根据官网文档,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护我们可以知道 computed 第一个作用是将复杂的逻辑简化到一个于一个函数内部,对外表现成一个有返回值的变量。
- <p id="example">
- <p>Original message: "{{ message }}"</p>
- <p>Computed reversed message: "{{ reversedMessage }}"</p>
- </p>
- var vm = new vue({
- el: '#example',
- data: {
- message: 'Hello'
- },
- computed: {
- // 计算属性的 getter
- reversedMessage: function () {
- // `this` 指向 vm 实例
- return this.message.split('').reverse().join('')
- }
- }
- })
由此我们可以想到,使用函数也可以达到相同的效果,我们为什么使用 computed 呢?
原因是 computed 可以缓存结果,多次访问,如果 computed 依赖的值没有变化,将会直接输出缓存的值。只有 computed 依赖的值有变化,才会再次计算。 computed 除了 geter 也有 setter,setter 就是在 computed 相关的值进行赋值的时候会触发的函数。
- computed: {
- fullName: {
- // getter
- get: function () {
- return this.firstName + ' ' + this.lastName
- },
- // setter
- set: function (newValue) {
- var names = newValue.split(' ')
- this.firstName = names[0]
- this.lastName = names[names.length - 1]
- }
- }
- }
来源: https://www.2cto.com/kf/201712/706683.html