computed

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

在 Vue.js 中，computed 属性是一种强大的特性，用于定义依赖于其他响应式数据的计算值。

computed 属性不仅能够简化模板中的表达式，还能够缓存计算结果，避免不必要的重复计算，从而提高性能。

本文将深入探讨 Vue 中 computed 属性的实现原理，包括其工作机制、依赖追踪、缓存策略等方面。
1. Computed 属性概述

Computed 属性是 Vue 实例中的一个特殊属性，它允许开发者定义一个计算值，该值依赖于其他响应式数据。Computed 属性具有以下特点：

    响应式：当依赖的数据发生变化时，computed 属性会自动重新计算。
    缓存：computed 属性会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。
    惰性求值：computed 属性在首次访问时才会进行计算，之后会根据依赖数据的变化情况决定是否重新计算。

可以看下以下反转字符串的例子：

不使用computed

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

使用computed

{{ reversedMessage  }} 是一个 computed 属性，它依赖于 massage。当 massage 发生变化时，massage 会自动重新计算

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

 

不使用computed使用method

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

computed和methods区别

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，

只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

通过计算得出的属性就是计算属性

计算属性可以是一个函数或者是一个getter和setter组成的对象

看看一个展示名字的实例：

需求一：展示名字

// 引用完整版 Vue，方便讲解
import Vue from "vue/dist/vue.js";

new Vue({
  data: {
    firstName: 'Jacky',
    lastName: 'Lee'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName      
    }
  },
  template: `
    <div>
      {{fullName}}
    </div>
  `,
  methods: {}
}).$mount("#app");

fullName通过first.Name + lastName 计算得出，fullName使用时不需要加括号，可以直接作为属性使用，展示再页面中

需求二：可以改名字

// 引用完整版 Vue，方便讲解
import Vue from "vue/dist/vue.js";

new Vue({
  data: {
    firstName: 'Jacky',
    lastName: 'Lee'
  },
  computed: {
    fullName: {
      get(){
      return this.firstName + ' ' + this.lastName
      },
      set(val){
        const names = val.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  },
  template: `
    <div>
      <div>
      {{fullName}}
      <button @click="change">改名字</button>
      </div>
    </div>
  `,
  methods: {
    change() {
      this.fullName = "Candy Wang"
      console.log('名字已更改') // 重复点击‘改名字’只打印一次？
    }
  }
}).$mount("#app");

通过setter和getter使得计算属性可修改，点击‘改名字’时，计算结果发生变化，重新运行计算，进行页面更新。计算属性的结果会被缓存，

计算属性只有在它的相关依赖发生改变时才会重新计算。所以再次点击‘改名字’由于计算结果不变，不会重新运行计算。

使用 Watcher 进行性能优化

在某些情况下，可以使用 watch 选项来替代 computed 属性，以实现更细粒度的控制和性能优化。

 

   watch: {
      firstName: 'updateFullName',
      lastName: 'updateFullName'
    },
    methods: {
      updateFullName() {
        this.fullName = `${this.firstName} ${this.lastName}`;
      }
    }

总结

Vue 的 computed 属性通过依赖追踪和缓存策略，实现了响应式计算和性能优化。在实现原理上，computed 属性依赖于 Vue 的响应式系统，

通过 Watcher 实例进行依赖收集和缓存控制。通过深入理解和掌握 computed 属性的实现原理，开发者可以更好地利用这一特性，提高应用的性能和可维护性。

在实际开发中，应根据具体需求合理使用 computed 属性，并结合其他优化手段，如避免不必要的计算和使用 Watcher 进行细粒度控制，从而构建高效、稳定的 Vue 应用。