Vue 计算属性

基础示例

计算属性，第一点，也就是这个表达式有点复杂了，不方便在模块中书写；第二点，计算属性，做得是计算而不是修改，一般是根据已有的响应式变量计算出一个新的响应式变量，而不是改变原有的响应式变量的值。

设想一下，你原有3个响应式变量 a, b, c，根据这3个响应式变量计算出一个新响应式变量 x。这3个变量就是它的依赖项了，有任意一个变量的值变化了，x 也会自动重新计算。如果你在计算中修改了 a, b, c 中某的值，x 跟着计算，计算时再修改，x 再计算……，死循环就出现了。

计算属性缓存 vs 方法

计算属性适合有缓存、无修改值的场景；方法适合处理模板中的事件等场景。

可写计算属性

一直在说 getter,setter 之类的方法，有人可能不知道。这里简单说一下。

// 在这里使用了最简单的变量声明与初始化
let age=20;

// 修改变量的值
age=30;

想一下，如果你想在值变为30时进行其它操作，如何实现呢？

let age = 20;

Object.defineProperty(window, 'age', {
  get: function() {
    return age;
  },
  set: function(newValue) {
    // 当值变化时，在这里做一些处理。
    age = newValue * 2;
  }
});

console.log(age); // 输出 20
window.age = 30;
console.log(age); // 输出 60

上面的代码利用 Object.defineProperty，这也是 Vue2 的实现机制。

let target = {
  _value: 5
};

let handler = {
  get: function(target, prop) {
    return target[prop];
  },
  set: function(target, prop, value) {
    target[prop] = value * 2;
    return true;
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy._value); // 输出 5
proxy._value = 10;
console.log(proxy._value); // 输出 20

这段代码利用了 JavaScript 的新语法 Proxy。功能比 Object.defineProperty 更强大。Vue3 的实现机制。与上一个对比，实现同一个功能是不是取值要 ._value 呢？像不像 Vue3 的 Ref 呢？

可写计算属性，也是利用了这个 set 方法。