vue 计算属性computed和方法的区别

1. 计算属性使用时，是当成属性使用的，而方法需要调用

<div id="app">
姓：{{firstName}} 名：{{lastName}}
  <p>
    全名：{{fullName}} //计算属性
  </p>
  <p>
    全名：{{getFullName()}}// 方法不写()会报错
  </p>
</div>
<script>
  var vm = new Vue({
    data: {
      firstName: "殷",
      lastName: "志源",
    },
    computed: {
      //本质是函数 当作属性来用
      fullName() {
        return this.firstName + this.lastName;
      },
    },
    methods: {
      getFullName() {
        return this.firstName + this.lastName;
      },
    },
  });
  vm.$mount("#app");
</script>

2. 计算属性会进行缓存，如果依赖的属性不变，会直接使用缓存结果，不会重新计算；而方法调用一次执行一次，无论依赖的属性和变量是否改变。

<div id="app">
  姓：{{firstName}} 名：{{lastName}}
  <p>
    全名：{{fullName}}
  </p>
  <p>
    全名：{{fullName}}
  </p>
  <p>
    全名：{{fullName}}
  </p>
  <p>
    全名：{{getFullName()}}
  </p>
  <p>
    全名：{{getFullName()}}
  </p>
  <p>
    全名：{{getFullName()}}
  </p>
</div>
<script>
  var vm = new Vue({
    data: {
      firstName: "殷",
      lastName: "志源",
    },
    computed: {
      //本质是函数 当作属性来用
      fullName() {
        console.log("计算了属性fullName");
        return this.firstName + this.lastName;
      },
    },
    methods: {
      getFullName() {
        console.log("运行了了方法getFullName");
        return this.firstName + this.lastName;
      },
    },
  });
  vm.$mount("#app");
</script>

因此计算属性在一定程度上，比如说算数较多，运算符较为复杂，重新渲染时，性能要优于方法！

3. 计算属性可以当成属性赋值，而方法不可以

当前计算属性不能赋值是因为计算属性默认只读

怎么样才能让计算属性既能读，又能赋值呢？

computed: {
//将计算属性设置为对象
  fullName: {
    get() {//读取方法
      console.log("计算了属性fullName");
      return this.firstName + this.lastName;
    },
    set(val) {//赋值方法
      console.log("计算属性赋值！");
      this.firstName = val[0];
      this.lastName = val.substr(1);
    }
  }
}

一般情况下默认只写get方法 有时候也需要set方法