vue中created、watch和computed的执行顺序详解

请看下面的攻略。

Vue中created、watch和computed的执行顺序详解

在Vue中，我们可以使用created、watch和computed来响应数据的变化，但是它们的执行顺序可能会导致一些意想不到的问题。下面我将详细讲解它们的执行顺序。

1. created的执行顺序

当一个Vue实例被创建时，created钩子函数会立即被调用。在created阶段，该实例已经完成了数据观测，也已经设置了计算属性、观察者、事件和watch等。我们可以在该阶段访问数据，但是DOM尚未完成编译，因此无法访问DOM元素。

下面的代码展示了一个简单的示例，它演示了created的执行顺序：

new Vue({
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('我是created钩子函数')
    console.log('count值为：', this.count)
  }
})

输出结果如下：

我是created钩子函数
count值为： 0

2. watch的执行顺序

watch选项用于观察Vue实例的数据变动。当数据发生变化时，watch会自动触发回调函数，让我们可以进行特定的处理。在Vue实例创建后，watch选项会被先于created钩子函数执行。

下面的代码展示了一个简单的示例，它演示了watch的执行顺序：

new Vue({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log('count一旦发生变化，我就会被触发')
      console.log('新值：', newValue, '旧值：', oldValue)
    }
  },
  created() {
    console.log('created钩子函数执行完毕')
  }
})

输出结果如下：

count一旦发生变化，我就会被触发
新值： 1 旧值： 0
created钩子函数执行完毕

我们可以看到，当count发生变化时，先执行了watch选项，后执行了created钩子函数。

3. computed的执行顺序

computed属性是计算属性，它会根据现有的数据计算出一个结果，并将其缓存起来。只有在计算属性依赖的数据发生变化时，计算属性才会重新计算。在Vue实例创建后，computed属性会先于created钩子函数执行。

下面的代码展示了一个简单的示例，它演示了computed的执行顺序：

new Vue({
  data() {
    return {
      count: 0
    }
  },
  computed: {
    message() {
      return `count的值是：${this.count}`
    }
  },
  created() {
    console.log('created钩子函数执行完毕')
    console.log('计算属性的值：', this.message)
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count发生变化：${oldValue} => ${newValue}`)
    }
  }
})

输出结果如下：

created钩子函数执行完毕
计算属性的值： count的值是：0

我们可以看到，在created钩子函数执行的时候，计算属性的值已经被缓存起来了。只有在count发生变化时，计算属性才会重新计算。

4. 通过示例进一步理解执行顺序

下面的代码展示了一个比较复杂的示例，它可以让我们更好地理解Vue中created、watch和computed的执行顺序：

new Vue({
  data() {
    return {
      count: 0,
      message: ''
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count发生变化：${oldValue} => ${newValue}`)
      this.message = `count的新值为：${newValue}`
    }
  },
  computed: {
    showCount() {
      console.log('计算属性showCount被计算了')
      return this.count * 2
    }
  },
  created() {
    console.log('created钩子函数执行完毕')
    console.log('计算属性的值：', this.showCount)
    console.log('初始message：', this.message)
    this.count++
  }
})

输出结果如下：

计算属性showCount被计算了
created钩子函数执行完毕
计算属性的值： 0
初始message： 
count发生变化：0 => 1
计算属性showCount被计算了

我们可以看到，当Vue实例创建时，先执行了computed属性的计算，然后执行了created钩子函数。在created钩子函数中，我们将count的值增加了1，这导致了count的watcher被触发。该watcher将message的值更新为count的新值为：1。这时候，计算属性showCount又被重新计算了一次，最后的值为2。

最后再次提醒一下，虽然Vue生命周期中各种钩子函数的执行顺序是固定的，但是不同Vue版本的执行顺序可能会有差异，也取决于具体业务代码的编写。因此，在编写Vue代码时，请务必测试代码以了解它是如何执行的。