vue的核心 - 计算属性computed和vuex

2023-09-21 19:42:15

在 Vue 的开发中，我们不免会使用到计算属性，使用计算属性，vue会帮我们收集所有的该计算属性所依赖的所有data属性的依赖，当data属性改变时，便会重新获取computed属性，这样我们就不用关注计算属性所依赖的data属性的改变，而手动修改computed属性，这是vue强大的一点，体现了vue响应式的特性。

在大型应用中，随着业务的不断发展，我们不可避免的会遇到多个组件共享状态的需求，这就会导致组件之间的通信变得复杂，为了解决这个问题，vuex便出现了。vuex可以帮我们集中式管理组件间共享的状态，这样组件之间就不用互相通信来获取状态了，只需要从vuex中获取即可，极大的简化了组件间的通信。

计算属性computed

计算属性computed是Vue中非常有用的一个特性，它可以让我们在组件中定义一些只读的属性，这些属性的值是根据组件data中其他属性的值计算出来的。当data中其他属性的值发生改变时，计算属性的值也会自动更新，而不需要我们手动修改。

举个例子，假设我们有一个组件，里面有一个data属性叫做“age”，还有一个计算属性叫做“isAdult”。“isAdult”的值是根据“age”的值计算出来的，如果“age”大于或等于18，那么“isAdult”的值就是true，否则就是false。

export default {
  data() {
    return {
      age: 18
    }
  },
  computed: {
    isAdult() {
      return this.age >= 18
    }
  }
}

在模板中，我们可以这样使用计算属性：

<div v-if="isAdult">
  <h1>你是成年人了</h1>
</div>

<div v-else>
  <h1>你未成年</h1>
</div>

当“age”的值发生改变时，计算属性“isAdult”的值也会自动更新，从而导致模板中内容的变化。

vuex

vuex是一个状态管理工具，它可以帮我们集中式管理组件间共享的状态。vuex中的状态是响应式的，这意味着当状态发生改变时，组件中的所有依赖该状态的部分都会自动更新。

vuex有三个核心概念：

状态：vuex中的状态是一个对象，它存储了组件间共享的数据。
动作：vuex中的动作是用来修改状态的方法。
变更：vuex中的变更是一种特殊的动作，它只能由组件触发，用于更新状态。

举个例子，假设我们有一个应用，其中有两个组件：一个组件叫做“Counter”，另一个组件叫做“DisplayCounter”。“Counter”组件有一个名为“count”的数据属性，它记录了当前的计数。“DisplayCounter”组件有一个名为“count”的计算属性，它根据“Counter”组件的“count”数据属性的值来计算当前的计数。

// Counter.vue
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// DisplayCounter.vue
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在模板中，我们可以这样使用vuex：

<!-- Counter.vue -->
<button @click="increment">+</button>

<!-- DisplayCounter.vue -->
<h1>{{ count }}</h1>

当我们点击“Counter”组件中的按钮时，会触发“increment”方法，该方法会调用vuex的“increment”动作，从而更新vuex中的状态。当vuex中的状态更新后，“DisplayCounter”组件中的“count”计算属性的值也会自动更新，从而导致模板中内容的变化。

总结

计算属性和vuex都是Vue中非常重要的特性，它们可以帮助我们构建复杂的可维护的应用程序。计算属性可以让我们在组件中定义一些只读的属性，这些属性的值是根据组件data中其他属性的值计算出来的。vuex可以帮我们集中式管理组件间共享的状态，这样组件之间就不用互相通信来获取状态了，只需要从vuex中获取即可，极大的简化了组件间的通信。