面试官:在vue中watch和created哪个先执行?为什么?
面试官:看到你简历上写着精通Vue? --- 在vue中watch和created哪个先执行?为什么?
·
答:官网的生命周期图中,init reactivity是晚于beforeCreate但是早于created的。
watch加了immediate: true,应当同init reactivity周期一同执行,会早于created执行。
而正常的watch,则是mounted周期后触发data changes的周期执行,晚于created。
1、immediate
watch 的一个特点是,默认最初绑定的时候是不会执行的,要等到值改变时才执行监听计算。
设置immediate为true后,被监听值初始化的时候就会执行监听函数,也就页面上的数据还未变化的时候。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true
2、deep
当需要监听对象的改变时,此时就需要设置deep为true,不论其被嵌套多深,改变对象中的属性值能够触发监听,改变整个监听值也会触发。
deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
优化,我们可以是使用字符串形式监听。
watch: {
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
}
}
总结:如果需要某个值在初始化时就触发监听,就使用immediate:true,如果需要深度监听就使用deep:true,两个也可以结合使用。
更多推荐
已为社区贡献3条内容
所有评论(0)