Vue computed实现原理深入讲解

首先我们来了解一下Vue computed属性的作用。

Vue中的computed属性是用于监听依赖变化并进行缓存的属性，其返回值会被缓存，只有当其依赖的属性发生变化时，才会重新计算并返回新值。这样可以避免反复重复计算已经得出的结果。

那么，Vue computed实现原理究竟是什么呢？

首先，我们需要了解computed属性的初始化时机。在Vue实例挂载后，会进行响应式数据的依赖收集和watcher的创建。

对于每个computed属性定义，在Vue实例挂载时，会将其getter函数作为watcher实例的求值函数，并通过Dep类在数据对象的getters数组中进行依赖收集。

当computed属性所依赖的数据发生变化时，watcher实例就会接收到数据更新的通知，并触发对应的setter函数重新求值。

整个computed属性实现的核心在于computed属性的getter函数和对应watcher的求值函数，以及对getter函数进行缓存的机制。

下面我们来演示一下computed属性的使用：

<body>
  <div id="app">
    <p>当前计数值为： {{ count }}</p>
    <p>计算属性： {{ computedCount }}</p>
    <button @click="increment">点击增加</button>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        count: 0
      }
    },
    computed: {
      computedCount() {
        console.log('计算属性函数执行了')
        return this.count * 2
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  })
</script>

在上面的代码中，我们定义了data中的count属性，和computed中的computedCount属性。其中，computedCount属性对count属性进行了监听并做出了相应的计算。每当count属性变化时，其会重新计算并返回新值。

现在我们来增加计数，观察控制台输出结果变化：

可以看到，当count属性发生变化时，computedCount属性的计算函数被重新执行了，而计算函数的结果被缓存起来供下一次使用。

另一个更有趣的示例是一个购物车计价器。我们有一个商品列表，每当用户选择或修改一件商品的数量时，我们需要重新计算总价。

下面是这个案例的代码示例：

<body>
  <div id="app">
    <ul>
      <li v-for="item in list">
        {{ item.name }}：
        <input type="number" v-model="item.num" @change='updateTotal'>
        <span class="price">{{ item.price }}元</span>
      </li>
    </ul>
    <p>购物车总价：{{ total }}元</p>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        list: [
          { name: '商品A', price: 10, num: 1 },
          { name: '商品B', price: 20, num: 2 },
          { name: '商品C', price: 30, num: 3 }
        ],
        total: 0
      }
    },
    computed: {
      computedTotal() {
        console.log('计算总价函数执行了')
        return this.list.reduce((sum, item) => sum + item.price * item.num, 0)
      }
    },
    methods: {
      updateTotal() {
        this.total = this.computedTotal
      }
    }
  })
</script>

在上面的代码中，我们定义了一个名为list的数组来存储商品列表，以及一个名为total的computed属性来计算商品总价。当用户修改商品的数量时，我们调用了updateTotal方法来更新computed属性的值。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue computed实现原理深入讲解 - Python技术站