Vue中watch、computed、updated三者的区别及用法

Vue中watch、computed和updated这三个属性都是用于监听数据变化的，但是它们的用法和作用方式是不同的。

watch

watch用于侦听某个数据值的变化，当被侦听的数据发生变化时，系统就会自动调用watch的回调函数。

watch: {
  someData: function (newVal, oldVal) {
    // do something when someData has been changed
  }
}

上述代码中，someData就是要被侦听的数据，newVal和oldVal分别为新值和旧值。回调函数中可以针对someData的变化做出相应的处理，比如执行一些必要的操作或更新其他的组件等。

computed

computed用于计算属性，根据已有的数据计算出新的数据。与watch不同的是，computed是基于依赖的缓存，只有当依赖数据发生改变时，computed才会重新计算，否则直接返回之前的缓存结果。

computed: {
  someComputedData: function () {
    // compute some data based on someOldData
    return someNewData
  }
}

上述代码中，someOldData是依赖数据，它的变化会引发someComputedData的重新计算，从而得出someNewData，也就是新的数据。

updated

updated是一个生命周期钩子函数，用于监听数据变化后，Vue实例完成更新后所触发的回调。

updated: function () {
  // do something after the component has been updated
}

当数据发生变化后，组件重新渲染时，updated函数就会被调用。通常可以在这个函数内部执行一些DOM操作或其他的必要的逻辑。

下面给出一个使用范例：

<template>
  <div>{{ someData }}</div>
</template>

<script>
export default {
  data () {
    return {
      someData: 'Hello, world!'
    }
  },
  watch: {
    someData: function (newVal, oldVal) {
      console.log(`Watch: "${oldVal}" -> "${newVal}"`)
    }
  },
  computed: {
    reversedData: function () {
      return this.someData.split('').reverse().join('')
    }
  },
  updated: function () {
    console.log('Updated')
  }
}
</script>

上述代码中，我们定义了一个组件，并在其中定义了一个数据someData，还定义了一个watch函数、一个计算属性reversedData和一个updated函数。

当你启动这个组件，打开控制台，可以看到这个组件的初始化日志以及watch、computed和updated的运作方式。

# 初始化日志
Watch: "undefined" -> "Hello, world!"
Updated

# 修改someData的值
Watch: "Hello, world!" -> "Hello, Vue!"
Updated

# 修改someData的值
Watch: "Hello, Vue!" -> "Jessie, hi!"
Updated

综上所述，watch、computed和updated三个属性的区别就在于它们的作用方式和使用场景不同。在具体应用时，应根据具体的需求来选择使用哪个属性。