携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

Vue3学习之路-计算属性的学习

computed

当我们需要使复杂的逻辑处理运算时，使用computed计算属性是非常有效果的。缺点是，模板会变得很复杂且不容易理解。

代码示例：

<div id="appdemo">
  <p>原始内容: {{ message }}</p>
  <p>两级反转: {{ reversedMessage }}</p>
</div>
    
<script>
const app = {
  data() {
    return {
      message: '赵兄，托你帮我办点事!!!'
    }
  },
  computed: {
    // 声明了一个计算属性 reversedMessage 。其提供的函数用作计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例，将原始内容字符串“两级反转”
      return this.message.split('').reverse().join('')
    }
  }
}
 
Vue.createApp(app).mount('#appdemo')
</script>

运行结果：

由代码this.message.split('').reverse().join('')可看出，reversedMessage属性依赖于message，当我们的message中的内容发生变化，reversedMessage中的内容也会随之发生变化。

methods

从效果上来说，methods是可以平替computed属性的，也就是说，它和computed的展现效果是一样的。
从实现方式来说，每次重新渲染的时候，methods每次都会重新调用其方法，也就是说，他每次渲染都得重走一遍方法，没有缓存。而compted是依赖缓存的，只有依赖改变才会去重新获取数据值。

代码对比示例

相对来说，compted的性能会更好，但当我们不需要缓存的时候，methods是一个不错的选择。从代码来看，语法并无差别，因此，两者只有是否依赖缓存的差别。

 computed: {
    // 计算属性的 getter
    reversedMessage1: function () {
         //this指向的是挂载的示例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }

setter

computed中默认是使用getter，但在一些特殊情况我们也可以设置其setter。

语法

  computed: {
    site: {
      // 使用getter
      get: function () {
        //······
      },
      // 使用setter
      set: function (value) {
       //·······
      }
    }
  }

Vue3学习之路 | computed计算属性