vue 的 watch 监听属性的使用

最新推荐文章于 2024-07-28 19:44:27 发布

zxf_CN

最新推荐文章于 2024-07-28 19:44:27 发布

阅读量1.5k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/zxf_CN/article/details/109289540

版权

本文详细介绍了 Vue.js 中 `watch` 的基本使用，包括如何监听 `data` 数据变化，如何设置 `immediate` 属性来在初始化时执行监听，以及如何使用 `deep` 进行深度监听。通过示例代码，阐述了如何处理对象类型的数据变化，以及在性能和监听粒度之间的权衡。

摘要由CSDN通过智能技术生成

1. 基本使用

概念：监听数据的变化，他可以得到这个数据的旧和新的数据，watch 主要用于监控 vue实例的变化，

语法：

语法一：

data () {
   
    return {
   
        先定义变量: '变量值';
    }
},
watch: {
   
    '再监听的变量': function (newVal, oldVal) {
   
        
    }
}

语法二：

const vm = new Vue({
   
    data() {
   
        return {
   
            监听的变量: ''
        }
    }
})

vm.$watch('监听的变量', function(newVal, oldVal){
   
    
})

注意：

它监控的变量，必须在data 里面声明才可以，它只能监控整个对象或单个变量：像这样就会报错：

data () {
     
    return {
     
        one: '',
        two: {
     
            tow-one: '',
            tow-two: ''
        }
    }
},
watch: {
     
    one (newVal, oldVal) {
     
        // 可以
    },
    tow.tow-one (newVal, oldVal) {
     
        // 不能这样监听
    }
}