详解Vue中watch的详细用法
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：
'''
<input type="text" v-model="cityName"/>
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName(newName, oldName) {
// ...
}
}
})
'''
直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：
'''
watch: {
cityName: 'nameChange'
}
}
'''
immediate和handler
这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
'''
new Vue({
el: '#root',
data: {
cityName: ''
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
immediate: true
}
}
})
'''
监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
deep
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
'''
<input type="text" v-model="cityName.name"/>
new Vue({
el: '#root',
data: {
cityName: {id: 1, name: 'shanghai'}
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
})
'''
设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：
'''
watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
'''
总结
以上所述是小编给大家介绍的Vue中watch的详细用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，这篇文章主要介绍了vuex 中插件的编写案例,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
本篇文章主要介绍了vue2.0中vue-cli实现全选、单选计算总价格的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Vue MVVM模型与data及methods属性超详细讲解
MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码（代码隐藏）,更好地促进视图层开发与模式其余部分的分离,这篇文章主要介绍了Vue MVVM模型与data及methods属性2022-10-10
在做项目中，会遇到一些树形的数据结构，常用在左侧菜单导航，本文就介绍一下如何实现，感兴趣的可以了解一下2021-07-07
本文给大家详细介绍了Mac下安装vue的方法，本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下2018-04-04
跨域指的是在浏览器中,当一个网页尝试加载另一个不同域名(或协议、端口号)下的资源时所面临的限制,这篇文章主要给大家介绍了关于前端uniapp微信小程序跨域问题的解决方法,需要的朋友可以参考下2024-08-08
Vue.js提供了多种方式来实现页面刷新、重置和更新页面所有数据的功能,下面通过示例代码演示vue 页面刷新、重置、更新页面所有数据,感兴趣的朋友跟随小编一起看看吧2024-01-01
页面有定时器,并且定时器在离开页面时,有清除,本文主要介绍了vue项目中定时器无法清除的原因解决,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
这篇文章主要介绍了Vue项目中keepAlive的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论