Vue源码系列5：computed多次访问，如何避免死循环？

在Vue.js中，computed属性是一种非常有用的特性，它可以让我们在组件中定义一些计算属性，这些属性的值会根据其他属性的值进行计算。当这些依赖项发生变化时，computed属性也会自动更新。

但是，如果computed属性中存在循环依赖，则可能会导致死循环。例如，如果我们定义了一个computed属性，该属性的值依赖于另一个computed属性，而另一个computed属性又依赖于第一个computed属性，那么就会形成一个循环依赖。当其中一个computed属性发生变化时，另一个computed属性也会发生变化，如此循环下去，就会导致死循环。

为了避免死循环，我们需要确保computed属性之间不存在循环依赖。我们可以通过以下方法来避免循环依赖：

• 使用computed属性中的set方法来设置属性值。
• 在computed属性中使用watch方法来监听其他属性的变化。
• 使用Vuex状态管理工具来管理数据状态。

在computed属性中使用set方法来设置属性值时，我们可以使用以下语法：

this.$set(this, 'computedPropertyName', newValue)

例如，我们可以这样来设置computedPropertyName属性的值：

this.$set(this, 'computedPropertyName', 'new value')

在computed属性中使用watch方法来监听其他属性的变化时，我们可以使用以下语法：

watch: {
  'propertyName': {
    handler: function (newValue, oldValue) {
      // do something
    },
    deep: true
  }
}

例如，我们可以这样来监听propertyName属性的变化：

watch: {
  'propertyName': {
    handler: function (newValue, oldValue) {
      // do something
    },
    deep: true
  }
}

使用Vuex状态管理工具来管理数据状态时，我们可以使用以下语法：

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    // state properties
  },
  getters: {
    // getter functions
  },
  mutations: {
    // mutation functions
  },
  actions: {
    // action functions
  }
})

例如，我们可以这样来定义一个Vuex store：

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => {
      return state.count * 2
    }
  },
  mutations: {
    increment: state => {
      state.count++
    }
  },
  actions: {
    incrementAsync: ({ commit }) => {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在Vue组件中，我们可以这样来使用Vuex store：

import Vuex from 'vuex'

const store = new Vuex.Store({
  // ...
})

export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
}

通过以上方法，我们可以避免在Vue.js中使用computed属性时出现死循环。