vue-created、mounted、watch、computed的执行顺序

1、created、mounted、watch、computed的执行顺序
created ------> computed ------> mounted ------> watch
2、浅析生命周期钩子
new Vue({})------创建vue实例
init event & lifecycle------vue实例为空,有默认的一些生命周期和默认事件,但还没初始化数据,data、methods、el等都不存在
beforeCreate()钩子函数运行:不能获取到data中的数据和methods中的方法,在实例初始化数据之前就被调用
init injections & reactivity------vue内部初始化了data数据和methods事件,但还没编译模板
created()钩子函数运行:可以获取到data中的数据和methods中的方法,可以更改数据而不会触发update和其他钩子函数,证明数据已经在vue实例中初始化完成
编译模板阶段------created()到beforeMount()之间,此时模板编译成功,生成一个编译好的模板字符串,在内存中渲染成虚拟DOM,没有挂载到页面中
beforeMount()钩子函数运行:在渲染前最后一次获取vue中的数据,但无法对页面上的元素和内容进行修改,可以更改数据而不会触发update和其他钩子函数
挂载页面阶段(渲染真实DOM)------内存中的虚拟DOM挂载到了页面上,可以操作页面上的DOM元素了
mounted()钩子函数运行:vue实例已经渲染到了页面上,可以操作dom等
运行阶段------当data中的数据发生改变时,先在内存中对之前的虚拟dom中的data数据进行更改,生成新的虚拟dom之后再挂载到页面上
beforeUpdate()钩子函数运行:更改数据后,当虚拟dom中的data发生改变时触发,页面上数据不变
updated()钩子函数运行:更改数据后,虚拟dom中的data发生改变页面上的data也发生改变,即新生成的虚拟dom挂载到页面上了
销毁阶段
beforeDestory()钩子函数运行:销毁前执行的钩子函数,可以继续使用vue实例中的数据,如data、methods、filters等
destroyed()钩子函数运行:已经销毁了,vue实例中的数据不可用
3、浅析watch
watch默认最初绑定的时候不执行,等值改变时才执行监听;
正常的watch执行的生命周期在created之后,mounted后触发data changes的周期;
如果加了 immediate属性,会早于created执行;
- immediate:立即以表达式的当前值触发回调,即被监听值初始化的时候就会执行监听。
设置成true后,当子组件首次接收到父组件传来的动态值时,就会执行函数。
- deep:监听对象的变化,深入监听(监听数组的变更不需要设置)




更多推荐
所有评论(0)