以下属于个人理解，如果不足请各位大佬多多提点
记忆单词 有d无d 有ed等等细节、彻底理解弄懂
Tips:components、watch、computed、methods是以:{}的方式引入，其他是已(){}的方法引入
<template><div>{{b}}</div></template><script>export default{//data 下面要加return是局部定义变量//data{ } 中直接定义变量是全局定义变量，可能造成数据污染data(){return {a:'A'}},components:{//components 是局部组件引入//component 是全局组件引入//全局组件也可以用 Vue.use()引入},//第一个生命周期函数，表示实例被完全创建之前运行出来//再data和methods都还没有被初始化//在methods 和 data 之前执行beforeCreate() {console.log('components、watch、computed、methods是以:{}的方式引入，其他是已(){}的方法引入');console.log('这是 beforeCreate ，data 和 methods还没初始化');},//第二个生命周期函数 data and methods 已经初始化好了//created(){} data 和 methods 已经初始化 有了created() {console.log('我是 created ，data 和 methods 已经有了');this.show()},//第三个生命周期函数，模板已经再内存中编译完成，但是尚未把模板渲染到页面中去// beforeMount 没有e 简单理解就是 浏览器已经解析了代码 但还没渲染上去beforeMount() {console.log('这是 beforeMount ，已经有DOM了');},//watch 监听data中变量的方法 ，只有当wathc中变量改变时才会变watch:{'a':function(now,old){console.log('now ',now)}},//计算属性 当变量改变时会跟着变化//如果computed和watch都能实现的功能 建议用computedcomputed:{b:function(){console.log('这是 computed')return this.a+this.a}},//第四个周期函数内存中的模板 已经真实挂在到了页面中，可以看到渲染好的页面了，当执行完这个，实例已经完全创建好了//mounted 执行这个时页面已经渲染出来了 mounted() {//重要console.log('这首 mounted ,数据和页面已经好了 但是methods还没执行');},methods: {show() {console.log('show执行了');}},//以上mouted（）实例完毕，马上进入到运行阶段//第五个周期函数 这俩事件会根据data数据的/*改变*/，有选择性的出发0-n次//beforeUpdate 数据最新的 但是页面还没更新beforeUpdate() {//这时候表示我们的界面还没有被更新，但是数据已经被更新了console.log('这是 beforeUpdate ');},//第六个周期函数 执行的手页面和data的数据已经保持同步了 都是最新的//updated 数据和页面都是最新的updated() {console.log('这是 updated');},//第七个周期函数 当执行这里的时候 //就已经从运行阶段进入到了销毁阶段了 //实例身上所有的data和所有的methods以及过滤器 指令等等，都处于可用状态，还没有真正执行销毁的过程//beforeDestory 数据什么都能用 理解为销毁开始beforeDestroy() {console.log("这是 deforeDestory")},//第八个周期函数//执行到这里的时候组件已经被完全销毁，组件中所有的数据方法指令过滤器 都已经不可用了//destoryed 到这里已经全部销毁 什么都不能在用destroyed() {console.log('这是 destoryed')}}</script>
如果觉得《vue 生命周期及watch 计算属性等等的理解》对你有帮助，请点赞、收藏，并留下你的观点哦！
