526互联

Vue学习笔记6：深度监视

发布时间 2023-11-05 18:43:53作者: MyMemo

6. 深度监视

监视number.a的变化：

<!--准备好一个容器-->
<div id="root">
    <h3>a的值是：{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    var vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: { a: 1, b: 1 }
        },
        watch: {
            //监视多级结构中某个属性的变化
            'numbers.a': {
                handler(newVal, oldVal) {
                    console.log('a被修改了', newVal, oldVal);
                }
            },

            //点击按钮后，发生不会有日志输出
            numbers: {
                handler(newval, oldVal) {
                    console.log('numbers被修改了', newVal, oldVal);
                }
            }
        }
    })
</script>

只有这样写才会让numbers对象的地址发生变化：

<!--准备好一个容器-->
<div id="root">
    <h3>a的值是：{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+1</button>
    <h3>a的值是：{{numbers.b}}</h3>
    <button @click="numbers.b++">点我让b+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    var vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: { a: 1, b: 1 }
        },
        watch: {
            //监视多级结构中某个属性的变化
            'numbers.a': {
                handler(newVal, oldVal) {
                    console.log('a被修改了', newVal, oldVal);
                }
            },

            //监视多级结构中所有属性的变化
            numbers: {
                deep: true,
                handler(newVal, oldVal) {
                    console.log('numbers的某个属性被修改了', newVal, oldVal);
                }
            }
        }
    })
</script>

总结：

  1. Vue中的watch默认不监测对象内部值的改变
  2. 配置deep: true可以监测对象内部值的改变
  3. 备注：
    • Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
    • 使用watch时根据数据的具体结构，决定是否采用深度监视