vue中watch的用法汇总
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。
1. 常用用法
<input type="text" v-model="name"/>
new Vue({
el: '#app',
data: {
name: '咸鱼'
},
watch: {
name(newVal,oldVal) {
// ...
}
}
})
直接写一个监听处理函数，当每次监听到 name 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：
watch: {
name: 'nameChange'
}
2 .立即执行(immediate和handler)
第一种用法watch有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
new Vue({
el: '#app',
data: {
name: ''
},
watch: {
name: {
handler(newVal,oldVal) {
// ...
},
immediate: true
}
}
})
监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
3 .深度监听
当需要监听复杂数据类型(对象)的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
<input type="text" v-model="person.name"/>
new Vue({
el: '#app',
data: {
person: {id: 1, name: '咸鱼'}
},
watch: {
person: {
handler(newVal,oldVal) {
// ...
},
deep: true,
immediate: true
}
}
})
设置deep: true 则可以监听到person.name的变化，此时会给person的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：
watch: {
'person.name': {
handler(newVal,oldVal) {
// ...
},
deep: true,
immediate: true
}
}
这样只会给对象的某个特定的属性加监听器。
数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。
以上就是vue中watch的用法汇总的详细内容，更多关于vue watch用法的资料请关注脚本之家其它相关文章！
相关文章
下面小编就为大家分享一篇Vue实现点击后文字变色切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
axios作为Vue生态系统中浓墨重彩的一笔,我学习这个东西也是花了一定的时间的,下面这篇文章主要给大家介绍了关于axios和vue整合操作的相关资料,需要的朋友可以参考下2022-04-04
我们在做项目经常会遇到组件功能不能满足业务需求的时候,这时候需要在原有的组件上进行二次封装,下面这篇文章主要给大家介绍了关于Vue组件二次封装的一些实用技巧,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue项目中使用多选框的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
这篇文章主要为大家介绍了useEffect理解React、Vue设计理念的不同详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
这篇文章主要介绍了vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要给大家介绍了关于vue3组件TS类型声明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目（一），接下来就来看看Vue3集成Ant Design Vue 的相关资料，需要的小伙伴可以参考一下文章的具体内容2021-10-10
过去在Vue2中,我们采用ref来获取标签的信息,用以替代传统 js 中的 DOM 行为,下面这篇文章主要给大家介绍了关于如何通过一篇文章搞懂Vue3中如何使用ref获取元素节点的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了this在vue和小程序中的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
最新评论