vue生命周期前后都做了哪些事情?

Init Events&Lifecycle

进行vue实例初始化,在这个时候开始完成的是vue实例自身对象注入,内部使用相关事件和对应生命周期函数初始化

beforeCreate

当这个方法执行的时候,vue实例仅仅是完成内部事件和生命周期函数

Init injections & reactivity

数据的注入,跟语法的校验,我们编写的data,method开始注入

created

在这个时候函数执行的时候vue实例已经完成自定义data,method,computed属性初始化,以及语法效验,vue实例已经生成,但还没有生成dom

compile

开始编译,首先查看是否有预编译的template模版,有的话直接编译成render函数渲染内容,如果没有那么将el的innerHTML编译为模版,在进行渲染

beforeMount

在这个函数执行的时候vue实例仅仅是将el属性指向的html编译成vue模板,此时并没有完成模板内容渲染,{{}}还没被替换

mounted

在这个函数执行的时候vue实例会将data数据渲染到编译的模板中,并形成虚拟dom,替换el执行dom


beforeUpdate

在这个函数执行的时候,vue实例中data数据发生变化,但是页面中数据还是原始数据

update

在这个函数执行的时候,vue实例中data数据和页面中数据已经一致了


beforeDestory

在这个函数执行的时候,vue实例仅仅是开始销毁 events 、child component,listener监听机制

destroyed

在这个函数执行的时候,vue实例上的所有数据 events childcomponent 监听机制 … 全部清空(包括双向数据绑定机制)

你可能感兴趣的:(我的笔记,vue.js,前端,生命周期)