vue 生命周期钩子的理解 watch computed

Posted 2020-10-22 凉梁凉糕

一  理解vue的生命周期，首先需要注意几个关键字

　　1. el :选择器

　　2. $el：对应选择器的template模板（html代码）

　　3. render：也是vue实例中的一项，其参数更接近vue解析器，按优先级，render参数 > vue实例对象中有template > 外部的HTML模板 后面两个也是将其编译成render函数

         　【注意】render选项参数比template更接近Vue解析器！所以优先级如下：

　　　　 render函数选项  > template参数  > 外部HTML

　　4. $mount ：当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中，假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：

       　　new Vue({内部无el项}).$mount(\'#app\')是延迟加载，同下面的语句相同

    　　   new Vue({el:"#app",***})

 

二 各个生命周期  beforecreate》created》beforeMount》mounted》beforeDestroy

1. beforecreate：el 和 data 并未初始化；

　　案例：可以在这加个loading事件 及获取路由参数，但是this.(data｜computed｜methods）参数均为undefind（无法访问到 el 属性和 data 属性等），看不到页面的任何内容

2. 在beforeCreate和created之间：在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变），页面内容如弹框等都存在了，也能被看到；

3. created:组件实例创建完成,属性已绑定,但 DOM 还未生成,$el 属性还不存在(this.$refs.XXX===undfined)。

　　案例：在这结束loading，还做一些初始化，如根据父组件props计算当前组件数据

4. created和beforeMount之间：首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。再次判断template参数选项的有无（因为vue需要通过el找到对应的outer template）：

　　（1）如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。

　　（2）如果没有template选项，则将外部HTML作为模板编译。

　　（3）可以看到template中的模板优先级要高于outer HTML的优先级。

如果没有template,则通过render传人的createElement编译

5. beforeMount：完成了 el 和 data 初始化 。

　　坑：如果直接使用{{msg}} 在生命周期beforeMount期间，此刻的msg数据尚未编译至{{msg}}中，用户能看到一瞬间的{{msg}}  v-cloak可解决

6. beforeMount和mounted之间：给vue实例对象添加$el成员，并且替换掉挂在的DOM元素

7. mounted ：完成挂载

　　案例： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

8. beforeUpdate：可以监听到data的变化但是view层没有被重新渲染，view层的数据没有变化

9. beforeUpdate和update之间：当vue发现data中的数据发生了改变，会触发对应组件的重新渲染（重新渲染虚拟 dom,并通过 diff 算法对比 vnode 节点差异更新真实 dom (virtual DOM re-render and patch)），先后调用10. beforeUpdate和updated钩子函数（beforeUpdate：可以监听到data的变化但是view层没有被重新渲染，view层的数据没有变化，updated： view层才被重新渲染，数据更新。此处可回顾下react对更新函数。

11. updated：候 view层才被重新渲染，数据更新

12. beforeDestroy 组件销毁之前　　

　　案例：你确认删除XX吗？第二个：比如走马灯文字，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。解决办法：在组件生命周期beforeDestroy停止setInterval

13. destroyed ：当前组件已被删除，清空相关内容 。实例销毁后虽然 dom 和属性方法都还存在,但改变他们都将不再生效!

 

### 注意 

> 1. vue实例中没有el时钩子，仅仅执行到了created ；有el时将可以按顺序执行beforeCreate  created  beforeMount mounted几个钩子，没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)

> 2. beforeUpdate 和 updated两个钩子会在data数据发生变化时进行调用，也就是说可以监听data里面的所有数据，只有要变化就执行钩子函数，重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板中！！

　　eg {{number}}在模板中显示，当只在js中对数据进行修改而没有显示在页面上时将不会进行重渲染调用对应的钩子函数

　　1. 对比watch：针对某一个数据进行监听实时的；

　　2. 对比computed：当依赖项不变化时不会进行重新的执行，只有变化时才会再次执行

> 3. 在各个钩子里面引用的this指向 vm 实例，即使在没有mounted挂载在具体元素上时mounted之前的钩子中打印this仍然有$el属性，而在其后包括mounted钩子里面单独打印this.$el时是未定义的，但是断点调试是符合的（此处有点不理解，希望有大神可以讨论下）

 

 分别在不同的钩子函数里面打印data里面的变量和method里面的方法；

一定注意  var _self = this ;的操作 

console.log(\'mounted-\'+typeof _self.showTopTip);
console.log(\'mounted-\'+typeof _self.showTip)

beforeCreate-undefined
beforeCreate-undefined
created-boolean
created-function
beforeMount-boolean
beforeMount-function
mounted-boolean
mounted-function

 

 

参考学习连接 ：

https://www.cnblogs.com/penghuwan/p/7192203.html

http://www.zhi-jie.net/vue2-study-mount/

https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8125.html