Vue - 深入使用计算属性 —— setter 和 getter

女爷i 2021-07-26 00:18 428阅读 0赞

##        在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。 ##

##        每一个计算属性都包含一个 getter 方法和一个 setter 方法。 ##

--------------------

##### 一.  如果计算属性后面直接是一个 function函数，使用的就是计算属性的方法 getter 来读取。 #####

<template>
      <div>
        <el-row>{
       {msg}}</el-row>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg1: "Hello",
          msg2: "World"
        };
      },
      //如果计算属性后面直接是一个 function函数时，使用的就是计算属性的默认方法 getter 来读取
      computed: {
        msg(){
            return this.msg1 + " " + this.msg2
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

##### 二.  可以在需要时使用 setter 函数 ， 当计算属性的值被修改时，会触发 setter 函数，执行自定义的操作。 #####

<template>
      <div>
        <el-row>{
       {msg}}</el-row>
        <el-divider></el-divider>
        <el-button @click="btn">修改计算属性值</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg1: "Hello",
          msg2: "World"
        };
      },
      //当计算属性的值被修改时，会触发 setter 函数，执行自定义的操作。
      computed: {
        msg: {
          get() {
            return this.msg1 + " " + this.msg2;
          },
          set(val) {
            console.log(val);
            const arr = val.split(" ");
            this.msg1 = arr[0];
            this.msg2 = arr[1];
          }
        }
      },
      methods: {
        btn() {
          this.msg = "Hello Lee";
        }
      }
    };
    </script>
    
    <style scoped>
    </style>