观察者回调的有效利用：你可能还不知道的 Vue 黑科技

2023-10-21 09:16:47

尽管 Vue.js 提供了「计算属性」，可在大多数场景中大显身手，然而在某些情境下，「观察者属性」亦可派上用场。与生俱来的特点是，观察者属性的回调函数仅在被监察的属性值发生变动时方可执行，恰如其分。话说到这里，各位朋友一定可以准确理解。假若你运行上述代码，就会发现 dog 的名字是。

前进一步：即刻运行观察者回调

然而，倘若你有心令观察者回调函数在组件创建之初便应声执行，该怎么办？别慌，以下几个妙招可供你参考。

方法一：初始值

考虑以下这段代码：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`新值为${newVal}, 旧值为${oldVal}`)
    }
  },
  created() {
    console.log('组件创建完成')
  }
}
</script>

首先，在组件数据中，我们初始化一个名为 count 的响应式变量，并将其值设为 0。随后，我们在观察者对象中监听 count 变量的变化，并定义一个回调函数，该函数将在 count 变量发生变化时被调用。最后，我们在组件的 created 钩子函数中输出一条信息，表明组件已创建完成。

运行上述代码后，你会发现控制台会输出两次信息：

组件创建完成
新值为0, 旧值为undefined

这是因为，在组件创建过程中，count 变量的值从 undefined 变为 0，因此触发了观察者回调函数的执行。

方法二：立即执行函数

另一种实现方法是使用立即执行函数：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count() {
      console.log(`新值为${this.count}, 旧值为${this.count - 1}`)
    }
  },
  created() {
    this.count++
  }
}
</script>

在这个例子中，我们仍然在组件数据中初始化 count 变量，并将其值设为 0。在观察者对象中，我们定义了一个回调函数，该函数将在 count 变量发生变化时被调用。但是，这一次，我们使用了一个立即执行函数来将 count 变量的值增加 1。这将导致 count 变量的值从 0 变为 1，从而触发观察者回调函数的执行。

运行上述代码后，你会发现控制台会输出一条信息：

新值为1, 旧值为0

这是因为，在组件创建过程中，count 变量的值从 0 变为 1，因此触发了观察者回调函数的执行。

方法三：使用 nextTick

最后，我们还可以使用 Vue.js 的 nextTick 方法来实现这一目的：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count() {
      console.log(`新值为${this.count}, 旧值为${this.count - 1}`)
    }
  },
  created() {
    this.$nextTick(() => {
      this.count++
    })
  }
}
</script>

在这个例子中，我们仍然在组件数据中初始化 count 变量，并将其值设为 0。在观察者对象中，我们定义了一个回调函数，该函数将在 count 变量发生变化时被调用。这一次，我们使用 Vue.js 的 nextTick 方法来将 count 变量的值增加 1。这将导致 count 变量的值在下一个事件循环中从 0 变为 1，从而触发观察者回调函数的执行。

运行上述代码后，你会发现控制台会输出一条信息：