Vue.js|Vue.js 计算属性(computed) Vue.js计算属性(computed)

Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式，会让模板显得过于繁重，且后期难以维护。对此，vue.js 提供了计算属性（computed），你可以把这些复杂的表达式写到里面。
实例 1

Vue.js 计算属性(computed) Vue.js 计算属性(computed)a={{ a }}, b={{ b }}

计算属性缓存缓存是计算属性的一大特点，使用计算属性时，每次获取的值是基于依赖的缓存值，也就是说，当数据源未发生变动时，获取的值将一直是缓存值。

Vue.js 计算属性(computed) Vue.js 计算属性(computed)a={{ a }}, b={{ b }}

上述实例中，我们对 b 进行了重新赋值，但是没有改变a的值，因为 b 是依赖于 a 的，所以最终 b 的结果还是2。
计算属性与methods的区别计算属性能实现的功能，使用方法（methods）也能实现，但两者还是有本质的不同，区别如下：
计算属性获取的是缓存值，而methods是直接调用函数进行计算所得。
计算属性中的函数在dom加载后马上执行，并将结果显示在页面上。methods中的函数需要一定的触发条件，否则不会执行。
计算属性 Getter 和 Setter 方法 vue.js 计算属性有两个方法，分别为 getter 和 setter，当没有指明方法时，默认使用 getter。
实例1中 computed 里面的代码也可以写成：

computed: { b: { get:function () { return this.a + 1 } } }

运行结果是一样的。
实例 3

Vue.js 计算属性(computed) Vue.js 计算属性(computed) {{message}}

上述实例中，在给message重新赋值时，vue.js会执行set方法，从而改变message的值，如果不使用set方法，message值为“my first lesson”。
【Vue.js|Vue.js 计算属性(computed)】转载于:https://www.cnblogs.com/pzkperson/p/10717751.html