Watch概述
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
简单的监听
<body> <div id="app"> <input type="text" v-model="num"> </div> <script src="vue.js"></script> <script> new Vue({
el: '#app', data: {
num: '' }, watch: {
num(newVal, oldVal) {
// 监听 num 属性的数据变化 // 作用 : 只要 num 的值发生变化,这个方法就会被调用 // 第一个参数 : 新值 // 第二个参数 : 旧值,之前的值 console.log('oldVal:',oldVal) console.log('newVal:',newVal) } } }) </script> </body> immediate（立即处理 进入页面就触发）
<body> <div id="app"> <input type="text" v-model="num"> </div> <script src="vue.js"></script> <script> new Vue({
el: '#app', data: {
num: 1 }, watch: {
num: {
// 数据发生变化就会调用这个函数 handler(newVal, oldVal) {
console.log('oldVal:', oldVal) console.log('newVal:', newVal) }, // 立即处理 进入页面就触发 immediate: true } } }) </script> </body> deep（深度监听）
对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true
<body> <div id="app"> <input type="button" value="更改名字" @click="change"> </div> <script src="vue.js"></script> <script> new Vue({
el: '#app', data: {
food: {
id: 1, name: '冰激凌' } }, methods: {
change() {
this.food.name = '棒棒糖' } }, watch: {
// 第一种方式：监听整个对象，每个属性值的变化都会执行handler // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的 food: {
// 每个属性值发生变化就会调用这个函数 handler(newVal, oldVal) {
console.log('oldVal:', oldVal) console.log('newVal:', newVal) }, // 立即处理 进入页面就触发 immediate: true, // 深度监听 属性的变化 deep: true }, // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数 // 函数执行后，获取的 newVal 值和 oldVal 值不一样 'food.name'(newVal, oldVal) {
console.log('oldVal:', oldVal) // 冰激凌 console.log('newVal:', newVal) // 棒棒糖 } } }) </script> </body> Watch和computed的区别
- computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作
- computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化，而watch支持异步
- computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
- 如果一个属性是由其它属性计算而来的，这个属性依赖其它属性，多对一或者一对一，一般用computed；而当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/199390.html原文链接：https://javaforall.net
