vue watch侦听器有无immediate的运行顺序问题
更新时间：2024年08月07日 10:05:57 作者：敲完这个我就再也不熬夜了
这篇文章主要介绍了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时。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue--vuex的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue中cookies的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
在vue.js项目中使用vue-router，可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了Vue中错误图片的处理的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue通过路由实现页面间参数的传递,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解，感兴趣的朋友一起看看吧2016-11-11
Vite打包项目时,需要去除开发时加入的console、debugger调试信息,本文主要介绍了Vite打包时去除console的方法实现,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要介绍了vue根据条件不同显示不同按钮的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文介绍了如何利用Vue和Vant框架结合moment.js插件来实现一个7天日历展示功能,在这个功能中,用户可以在切换日期时看到界面的实时变化,此外,文章还提供了代码实现和效果测试的详细步骤,帮助开发者能够顺利完成类似的项目开发2024-10-10
下面小编就为大家分享一篇vue中实现移动端的scroll滚动方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论