计算属性

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

一。什么是计算属性

1.定义：计算属性是通过已有属性，计算的来的属性

2. 原理：计算属性底层借助了Object.defineProperty() 方法提供的getter和setter

3. get()函数：

①。 get函数在初次读取时会执行一次

②。当计算属性所依赖的数据发生改变的时候，get()函数会被再次调用

4. 优势：与methods实现相比，计算属性采用了缓存机制，*在获取计算属性的属性值时，若所依赖的属性没有发生变化，那么就不会执行get()函数，而是将缓存的计算属性值返回。与methods每次都会执行计算逻辑相比，效率更高。

二。计算属性的应用 1.通常情况下，我们喜欢插值表达式里面，不要写过多的逻辑代码，而是直接展示结果

  <div>姓： <input type="text" v-model="firstName" /></div>
  <div>名：<input type="text" v-model="lastName" /></div>
  <div>姓名：{{firstName}}--{{lastName}}</div>

2. 插值表达式中可以调用方法，并显示方法的返回结果

     <div>姓： <input type="text" v-model="firstName" /></div>
     <div>名：<input type="text" v-model="lastName" /></div>
     <div>{{getName()}}</div>
   

3.这里调用的是计算属性，计算属性本质上是方法，在模板中当前属性去使用

  <div>姓： <input type="text" v-model="firstName" /></div>
  <div>名：<input type="text" v-model="lastName" /></div>
  <div>{{fullName}}</div>

计算属性的简单写法，就是定义一个方法，由该方法返回出去一份结果，所有它是只读的。

    computed: {
      // 在这里，我们定义的是方法，只不过这方法在模板中，可以当做属性来使用
      fullName() {
        return this.firstName + this.lastName;
      },

如果要修改计算属性的值，就要使用完整的写法

      fullName2: {
        // get方法，返回计算属性的结果
        //  get函数在初次读取时会执行一次
        // 当计算属性所依赖的数据发生改变的时候，get()函数会被再次调用
        get() {
          console.log("数据被读取");
          return `${this.firstName}--${this.lastName}`;
        },
        // set方法，修改计算属性的结果，该方法接收一个参数是最新的值
        set(val) {
          if (val.indexOf("--") !== 0) {
            let arr = val.split("--");
            this.firstName = arr[0];
            this.lastName = arr[1];
            console.log("数据被修改了");
          }
        },
      },
    },