Vue计算属性Computed使用

计算属性Computed:

1. 在模板中放入太多的逻辑会让模板过重且难以维护,这才有了计算属性computed。
2. 计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。这也是computed跟methods的区别。
3. 计算属性默认有一个getter,但是也可以提供一个setter,当计算属性发生变化时,调用该setter,下例中set()方法并不能更改计算属性computed2的值。

<template>
  <div>
    <div>
      <div>
          {{msg1}}
      </div>
      <div>
          {{msg1}} | {{computed1}}
      </div>
      <div>
          <input type="text" v-model="msg2" /> | {{computed2}} |  <input type="text" v-model="computed2" />
      </div>
      <div>{{msg4}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: "12345",
      msg2: "12345",
      msg3: "12345",
      msg4:'null',
    };
  },
  computed: {
    computed1: function () {
      return this.msg1.split("").reverse().join(""); // 默认只有computed
    },
    computed2: {
      get() {
        return this.msg2.split("").reverse().join("");
      },
      set(newVal) {
        console.log(newVal); //更改computed2调用set方法
        this.msg4 = newVal + '调用set方法'
      }
    }
  },
}
</script>

参考资料:

1.cn.vuejs.org/v2/guide/co… 2.cn.vuejs.org/v2/api/#com… 3.juejin.cn/post/684490… 4.juejin.cn/post/684490…