vue2.0 watch里面的 deep和immediate用法说明

下面我来详细讲解一下 "vue2.0 watch里面的 deep和immediate用法说明"， 希望对你有所帮助。

watch

在Vue.js中，我们可以使用 watch 来监听数据的改变，从而执行对应的操作。 Watch 是 Vue 实例的一个选项属性，用于监听 Vue 实例上的数据变化。当数据发生改变时，会执行 watch 选项的对应方法。

deep

当我们需要监听某个具有嵌套数据结构的对象时， Vue.js 提供了 deep 选项来实现深度监测，因此我们可以在对象的属性发生改变时得到通知。

示例1：当监听的数据对象的值有嵌套时，若只监听外层对象 v ，则其内层对象属性变化时是不会触发 watch 的，如下所示：

<template>
  <div>
    <h3>{{ foo.name }}</h3>
    <button @click="changeName">更改名字</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        foo: {
          name: '张三',
          sex: '男'
        }
      }
    },
    watch: {
      // 只监听外层对象 foo
      foo(newValue, oldValue) {
        console.log('foo改变了')
      }
    },
    methods: {
      // 点击按钮修改内层对象属性
      changeName() {
        this.foo.name = '李四'
      }
    }
  }
</script>

运行代码后，watch 没有监听到 foo 值的变化。但是如果我们需要监听到所有嵌套的属性改变时，可以使用 deep 来实现深度监听。

<template>
  <div>
    <h3>{{ foo.name }}</h3>
    <button @click="changeName">更改名字</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        foo: {
          name: '张三',
          sex: '男'
        }
      }
    },
    watch: {
      // 监听所有嵌套属性的变化
      foo: {
        deep: true,
        handler(newValue, oldValue) {
          console.log('foo改变了')
        }
      }
    },
    methods: {
      // 点击按钮修改内层对象属性
      changeName() {
        this.foo.name = '李四'
      }
    }
  }
</script>

运行代码，当点击更改名字按钮时，控制台输出了 'foo改变了' 字符串，表示 watch 监听到了数据的变化，这就是 deep 对象的作用。

需要注意的是，在大多数情况下，使用 deep 会带来性能问题。因为当我们使用 deep 监听对象时，Vue.js 会对对象进行递归遍历，从而会影响监听器的性能。因此除非确实需要监听所有嵌套属性的变化，否则建议不要使用 deep。

immediate

immediate 选项用于在 watch 首次被绑定时立即执行对应的处理函数。通常在一个组件刚刚创建时需要执行初始操作时使用。

示例2：这是用户数据的实时搜索功能的示例。添加 ":immediate=true" 参数可以让 watch 中的 userSearch 立即执行。

<template>
  <div>
    <h1>搜索用户</h1>
    <div>
      <label>
        用户名称：
        <input v-model="inputValue" />
      </label>
    </div>
    <ul>
      <li v-for="user in userSearch" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: '',
        users: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
          { id: 4, name: '赵六' }
        ]
      }
    },
    computed: {
      userSearch() {
        return this.users.filter(user => user.name.includes(this.inputValue))
      }
    },
    watch: {
      inputValue: {
        immediate: true,
        handler(newVal) {
          console.log(newVal)
        }
      }
    }
  }
</script>

运行代码，当输入用户名的输入框发生变化时，可以发现 watch 监听到数据的变化并输出到控制台。

需要注意的是，当我们使用 immediate 选项时，处理函数不管元素开始处于哪个状态，都会被立即执行一次。因此需要根据具体的业务场景谨慎使用。