欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

watch中的深度监听

程序员文章站 2022-03-07 22:02:50
watch只要被监听的数据发生改变,就会触发对应的逻辑代码如果被监听的数据是个对象(或数组),对象(或数组)中的属性发生改变时,监听是不会触发上的

watch

  • 只要被监听的数据发生改变,就会触发对应的逻辑代码
  • 如果被监听的数据是个对象(或数组),对象(或数组)中的属性发生改变时,监听是不会触发上的
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    姓名:<input type="text" v-model="obj.name"><br>
    年龄:<input type="text " v-model="obj.age"><br>
    <button @click="fn">
      点我修改
    </button>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  // watch:
  // 1.只要被监听的数据发生改变,就会触发对应的逻辑代码
  // 2.如果被监听的数据是个对象,对象中的属性发生改变时,监听是不会触发上的


  let vm = new Vue({
    el: '#app',
    data: {
      obj: {
        name: "xiaoming",
        age: 18
      }
    },
    watch: {
      // obj: function () {
      //   console.log('obj改变了');
      // },
      // 单独监听obj中的name属性,只要其修改watch就会触发
      'obj.name': function () {
        console.log('obj改变了');
      }
    },
    methods: {
      fn() {
        this.obj = {} // 修改了obj中的内在指向
        // this.obj.name = "zhansang" //还是在obj中内存中修改不会触发watch
      }
    },
  })
</script>

</html>
  • 开启深度监听:只要obj中的任何一个属性发生改变,都会触发相应的代码
  • 数组也是同样如此
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      姓名:<input type="text" v-model="obj.name" /><br />
      年龄:<input type="text " v-model="obj.age" /><br />
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    // watch:
    // 1.只要被监听的数据发生改变,就会触发对应的逻辑代码
    // 2.如果被监听的数据是个对象,对象中的属性发生改变时,监听是不会触发上的

    let vm = new Vue({
      el: '#app',
      data: {
        obj: {
          name: 'xiaoming',
          age: 18
        }
      },
      watch: {
        obj: {
          handler: function () {
            console.log('obj改变了')
          },
          // 开启深度监听:只要obj中的任何一个属性发生改变,都会触发相应的代码
          deep: true
        }
      }
    })
  </script>
</html>

本文地址:https://blog.csdn.net/weixin_44757417/article/details/110181404

相关标签: Vue.js experience