vue 计算属性

什么是计算属性

计算属性指的是通过一系列的代码运算 最终得到的一个属性值
这个动态计算出来的属性值可以被模板结构或者是methods方法中使用
简单的说
计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动变化，与之相关的DOM部分也会同步自动更新。

计算属性的使用

计算属性一般定义到computed中
计算属性其实是属性，在页面上使用只需要用属性值，不要带（），不然就变成方法了。

计算属性都包含有一个getter和一个setter，计算属性会默认使用 getter 函数,如果你要使用 setter 函数，那么你必须要手动写出 setter 函数
setter函数中，我们可以去对getter中使用到的数据进行操作，所谓因变量去影响自变量。
当我们要给这个属性进行赋值，vue会解析调用set方法，并且将值传入，这样newValue就能接收到

案例如下

<template>
  <div id="main">
    <div class="one">
      <p>{{ firstName }}</p>
      <p>{{ lastName }}</p>
    </div>

    <p>拼接后为: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "张三",
      lastName: "李四",
    };
  },
  mounted() {
    window.vue = this;
  },
  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];
      },
    },
  },
};
</script>