watch深度监听

最新推荐文章于 2024-09-18 13:50:55 发布

了以李_

最新推荐文章于 2024-09-18 13:50:55 发布

阅读量430

点赞数

分类专栏： vue JavaScript 笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_47466275/article/details/126135386

版权

笔记同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

24 篇文章 1 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

如果监听的数据是一个对象或者是数组，那么普通的监听是监听不到数据变化的，此时就需要用到watch的deep属性

<template>
  <div>
    <input v-model="userInfo.name" type="text" />
    <input v-model="userInfo.age" type="text" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        name: 'zs',
        age: 20
      }
    }
  },
  watch: {

	// 以下两种方法按需使用


    // 第一种方法只有name发生变化的时候触发
    // 此时如果在age输入框里面输入是不会触发此打印的，因为它监听的只是name的变化
    'userInfo.name': value => {
      console.log('name', value)
    },

    // 第二种方法是只要userInfo对象里面的某一个变量发生了变化就会触发
    // 这个时候无论是在name输入框还是age输入框输入都会触发此方法，
    // 因为只要userInfo里面的任何一个值有变化都会监听到
    userInfo: {
      handler(value) {
        console.log('userInfo', value)
      },
      deep: true
    }
  },
  methods: {}
}
</script>