Vue watch computed 生命周期执行顺序
Vue watch computed 生命周期执行顺序
·
computed :Vue的计算属性 适用于动态计算data
或props
中的数据,需要加return,当数据无变化时会优先从缓存读取。
watch :Vue的监听属性 监听data
或props
中的数据变化,并且支持异步,当数据发生改变的时候,watch中的函数就会执行,有两个参数 前者为newVal
后者为oldVal
为了发现对象内部值变化,需要深度监听 deep:true
但监听数组则不需要 immediate:true
页面首次加载的时候做一次监听。
watch、 computed在生命周期的哪个节点触发?
首先 beforeCreate
和 created
之间 会将 computed
和 watch
初始化(即初始化数据监测)
结论:在creted之前就会行初始化 computed 和 watch
而在beforeMount
执行时 我们会发现 虚拟DOM
已经生成 但未挂载到容器上 ;mounted
时 虚拟DOM已经被解析且挂在到容器中 (即HTML DOM加载完成的期间时发生在beforeMount —mounted之间)。
而在验证中我们会发现computed
执行的顺序正是在beforeMount
—mounted
之间
结论 : computed
是在HTML DOM加载后马上执行的 即在beforeMount结点之后触发。
wacth
当数据没有发生变化的时候 第一次进入页面的时候不会触发
当设置成immediate:true
时 进入页面会触发 此时执行在beforeCreate
和created
之间 (再次之间data选项注入到实例)
更多推荐
已为社区贡献4条内容
所有评论(0)