vue watch侦听器有无immediate的运行顺序问题
作者：敲完这个我就再也不熬夜了
这篇文章主要介绍了vue watch侦听器有无immediate的运行顺序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
watch侦听器有无immediate的运行顺序
刚写项目的一个需求中遇到了watch运行顺序的坑，本打算把项目弄完再来看看，结果leader说产品还在改需求（高强度学习开始！！>_>）
watch普通监听属性（无immediate）
在初始化时不会执行watch
created() {
this.id = 1;
console.log(this.id);
console.log(this.name);
},
watch: {
id: function (val) {
if (val == 0) {
this.name = "id等于0";
} else if (val == 1) {
this.name = "id等于1";
}
console.log(this.name, "这里是watch");
},
},
- 结果：
这里有个问题是第一次打印name的值为什么是‘初始值’而不是‘id等于1’。
解决这个疑问就得谈到js事件处理的执行机制事件循环。
在created中id=1触发watch侦听器，侦听器中函数进入事件queue，继续执行created，打印两个log，这里的name为初始值。
created执行完后，执行事件queue中的watch侦听器的函数，给name赋值为‘id等于1’
immediate为true
添加immediate，在初始化时也会执行watch回调函数，组件加载立即执行。
要使用immediate需要添加handler属性
created() {
this.id = 1;
console.log(this.id);
console.log(this.name);
},
watch: {
id: {
handler: function (val) {
if (val == 0) {
this.name = "id等于0";
} else if (val == 1) {
this.name = "id等于1";
}
console.log(this.name, "这里是watch");
},
immediate: true,
},
},
- 结果：
在组件加载完成时，立即执行watch回调函数，即在created前执行。
后面的执行顺序同无immediate时。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。