Vue生命周期详解学习笔记

最新推荐文章于 2024-07-02 08:55:42 发布

隐藏用户y

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量378

点赞数

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/weixin_55355282/article/details/131752172

版权

生命周期

生命周期又名生命周期回调函数，生命周期函数，生命周期钩子。
生命周期是Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期中的this指向vm或组件实例对象。

钩子函数

钩子函数用来描述Vue实例从创建到销毁整个生命周期。
在这里插入图片描述

八大钩子数分别是：

beforeCreate,created,beforeMount,mounted（挂载）,beforeUpdate,updated（更新）,beforeDestory,destoryed（销毁）

实例创建

            beforeCreate() {
                console.log('beforeCreate')
                console.log(this);//vm

            },
            created() {
                console.log('created')
            },

beforeCreate前的init：初始化：生命周期、事件，但数据代理还未开始
data:{n:1},vm._data和vm.n都不存在。

beforeCreate：此时，无法通过vm访问到data中的数据、methods中的方法。

 beforeCreate() {
              console.log('beforeCreate')
              console.log(this);//vm
              debugger;//只分析到这里代码停到这里
          },

beforeCreate之后的init：数据监测，数据代理。
created：此时，可以通过vm访问到data中的数据，methods中配置的方法。

页面挂载

 beforeMount() {
                console.log('beforeMount');
                console.log(this);//vm
                // debugger;//只分析到这里代码停到这里

            },
            // vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
            mounted() {
                console.log('mounted', this.$el instanceof HTMLElement)//mounted 是真实dom
            },

下一阶段，Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容。
有el选项，无template选项，解析el的外部html做为模板,检测div是否属于模板，可以给div绑定:x=“n”，可以通过查看是否解析来看。

无el选项，当vm.$mounted(el)被调用，检测是否有template选项，进入下一步。
有el选项，有template选项，解析template进入渲染函数
在这里插入图片描述

将html内容放入单引号不换行不报错，或者换行将单引号换成反引号，就不会报错。

在这里插入图片描述

根据报错的提示,一个template只能有一个根元素，所以需要将内容用div包裹.这样就不报错了，但是这样的话div的root类名就不存在了。

beforeMount页面呈现的是未经Vue编译的DOM结构；所有对DOM的操作，最终都不奏效。
```
beforeMount() {
              console.log('beforeMount');
              console.log(this);//vm
              debugger;//只分析到这里代码停到这里
          },
```
如果没有debugger断点,控制台都不会显示操作DOM的结果。
将内存中的虚拟DOM转为真实DOM插入页面（将vm$el替换el）
mounted：此时页面中呈现的是经过Vue编译的DOM，对Dom操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

数据更新

beforeUpdate() {
                console.log('beforeUpdate')
                console.log(this.n)
                // debugger;
            },
            updated() {
                console.log('updated')
                console.log(this.n)
                // debugger;
            },

mounted挂载后，当数据发生改变会先调用beforeUpdate,此时，数据是新的，页面是旧的。页面尚未和数据保持同步。根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model->View的更新，更新完后，页面和数据保持同步，数据是新的，页面也是新的。

实例销毁

            beforeDestroy() {
                console.log('beforeDestroy')
            },
            destroyed() {
                console.log('destroyed')
            },

当vm.$destroy()调用时，beforeDestroy:此时，vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。
vm.$destroy()完全销毁一个实例，清理它与其它组件实例的连接，解绑它的全部指令及事件监听器（自定义事件）。

console.log是原生的do事件不是自定义事件所以销毁后还是存在的