Vue 知识点：深度监视 deep

最新推荐文章于 2025-09-21 21:40:09 发布

原创最新推荐文章于 2025-09-21 21:40:09 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了Vue中深度监视的概念，指出默认情况下watch仅监测对象的顶层变化，但通过设置`deep:true`，可以监听对象内部深层属性的变动。示例展示了如何使用watch监测多级结构属性以及使用`vm.$watch`直接创建监视器。强调根据数据结构选择合适的监视策略。

Vue 知识点：深度监视

深度监视：

vue中的watch默认不监测对象内部值的变化（一层）
配置deep:true 可以监测对象内部值的变化（多层）

备注：

vue自身可以监测对象内部值的变化，但是vue提供的watch默认不可以监测对象内部值的变化
使用watch时根据数据的具体结构，决定是否采用深度监视

//监视属性实现
<div id="root">
     <h2>a的值是：{{numbers.a}}</h2>
     <button @click="numbers.a++">点我让a+1</button>
     <h2>b的值是：{{numbers.b}}</h2>
     <button @click="numbers.b++">点我让b+1</button>
</div>

<script>
  const vm = new Vue({
       el:"#root",
       data:{
           numbers:{
              a:1,
              b:1,
           }
       },
       watch: {
          //监视多级结构中的某个属性的变化
          'numbers.a':{//监视对象
               handler() {
                 console.log('a修改了')
             }
           },
          //监视多级结构中的所有属性的变化
          numbers:{//监视对象
               deep: true,
               handler() {
                 console.log('numbers修改了')
             }
           }       
       }
   })
   
 // 方法二： vm.$watch =>这种写法，前提是确定有vue实例
  vm.$watch('isHot'//监视的对象,{
     immediate:true // 初始化时调用 handler
     //isHot 被改变时调用 handler
     handler(newValue,oldValue) {
         console.log('isHot被修改了',newValue, oldValue)
     }
  })