Vue 监视属性 watch

<!--监视属性 watch:1. 当被监视的属性变化时，回调函数自动调用，进行相关操作2. 监视的属性必须存在，才能进行监视3. 监视的两种写法：(1). new Vue 时传入 watch 配置(2). 通过 vm.$watch 监视深度监视：(1). Vue 中的 watch 默认不检测对象内部值的改变（一层）(2). 配置 deep: true 可以检测对象内部值的改变（多层）备注：(1). Vue 自身可以检测对象内部值的改变，但 Vue 提供的 watch 默认不可以！(2). 使用 watch 时根据数据的具体结构，决定是否采用深度检测 --><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {isHot: true},computed: {info() {return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeather() {this.isHot = !this.isHot;}},// watch 的第一种写法watch: {isHot: {immediate: true, // 初始化时让 handler 调用一下// 当 isHot 发生改变时 调用 handlerhandler(newValue, oldValue) {console.log('isHot 被修改了', newValue, oldValue);}},// info: {// immediate: true, // 初始化时让 handler 调用一下// // 当 isHot 发生改变时 调用 handler// handler(newValue, oldValue) {// console.log('info 被修改了', newValue, oldValue);// }// }}});// watch 第二种写法vm.$watch('info', {immediate: true,handler(newValue, oldValue) {console.log('info 被修改了', newValue, oldValue);}}) </script>

一、watch 的简写

// 在 watch 里面 watch: {// 只是检测数据，不需要其他配置项就可以使用简写形式isHot(newValue, oldValue) {console.log('isHot 被修改了', newValue, oldValue);} }// 在 vm 外面这样写 vm.$watch('isHot', function (newValue, oldValue) {console.log('isHot 被修改了', newValue, oldValue); })

二、watch 和 computed 的区别

<!--computed 和 watch 之间的区别：1. computed 能完成的功能，watch 都可以完完成2. watch 能完成的功能，computed 不一定能完成。例如：watch 可以进行异步操作两个重要的小原则：1. 所有被 Vue 所管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或 组件实例对象2. 所有不被 Vue 所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数这样 this 的指向才是 vm 或 组件实例对象 --> <script>const vm = new Vue({watch: {firstName(value) {// 延迟一秒触发，setTimeout(() => {this.fullName = value + ' - ' + this.lastName;}, 1000);},lastName(value) {this.fullName = this.firstName + ' - ' + value;}}}); </script> 创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的Vue 监视属性 watch的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。