对vue的计算属性再理解，computed vue 不触发，Vue中的计算属性

原创

wx6375cd1abf2fb 2022-11-18 00:00:31 博主文章分类：vue2 ©著作权

文章标签 vue.js 前端对vue的计算属性再理解 computed 不触发 Vue中的计算属性 文章分类 运维

©著作权归作者所有：来自51CTO博客作者wx6375cd1abf2fb的原创作品，请联系作者获取转载授权，否则将追究法律责任

什么是计算属性

提到计算属性，就不得不先提一下Vue中的另一个内容，它就是插值表达式。话不多说，先上一个案例，来见识一下何为插值表达式：

<div id="app">
  {{ message }}
</div

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面这个案例就是一个Vue插值表达式的实例，通过这个例子，我们不难看出，差值表达式的语法相当简洁，使用起来也很方便。但是也不免暴露出它的一些缺点，最典型的就是无法进行复杂逻辑运算（大量复杂的计算在结构中也很不合理）。所以，Vue才会自带计算属性的功能。

computed实例

下面，我们通过一段代码来具体看一下Vue中计算属性的实际应用

div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

上面这个案例就是一个computed的实例演示，我们通过代码不难看出：第一个div标记中的插值表达式显示的是原文，而第二个div标记中，显示的则是经过一系列API处理之后的文本内容。

这里我们声明了一个计算属性 reversedMessage。
Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新

其中，所有的API操作都放在了computed中的count方法中来实现，而最终插值表达式，只是将computed中处理完毕的属性绑定给自己即可。这也从另一个侧面证实了computed只负责进行复杂逻辑运算的特点。

computed与method的区别

在Vue中，有computed和methods两个模块，且这两个模块都可以进行方法的编写。那么问题来了，二者之间到底有何区别？

首先，计算属性是基于它们的依赖进行缓存的，只有在依赖发生改变的时候，它们才会重新计算（computed 是依赖于data中绑定数据的变化，数据变化了它才会去重新计算），否则，它们是不变的。换句话说，就是每次访问计算属性时，如果依赖没有发生改变，它们可以立即返回结果，而不需要进行复杂的逻辑运算。而methods中的方法，只要被触发，被调用的方法就会立即执行对应函数，重新进行渲染。

其次，计算属性是具有缓存性质的，而methods中的方法，则不具备缓存的能力，下面通过一个代码片段来进行演示：

对vue的计算属性再理解，computed vue 不触发，Vue中的计算属性_computed 不触发