computed:快速理解setter和getter

2024年4月19日 211次阅读 来源: 狂奔的蜗牛

计算属性定义：当其依赖的属性的值发生变化时，这个属性的值会自动更新；同时，与其相关的DOM也会同步更新。

运用范围：模板内的表达式一般都是比较简单的，这是vue设计模板的初衷；如果在模板中放入过多复杂的逻辑，会让模板过重切难以维护。此时，需要使用计算属性。(处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值)

简单的Demo，实现setter和getter的使用，如下：
HTML部分如下：

<template>
  <div>
    <div>First Name:
      <el-input v-model="firstName" placeholder="请输入内容"></el-input>
    </div>
    <div>Second Name:
      <el-input v-model="secondName" placeholder="请输入内容"></el-input>
    </div>
    <div>Full Name:
      <el-input v-model="fullName" placeholder="请输入内容"></el-input>
    </div>
  </div>
</template>

JS部分如下：

export default{
  data () {
    return {
      firstName: '',
      secondName: ''
    }
  },
  components: {},
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.secondName
      },
      set: function (newVal) {
        let names = newVal.split(' ')
        this.firstName = names[0]
        this.secondName = names[1]
      }
    }
  }
}

实现的效果：firstName 、secondName 发生变化，fullName会自动更新；反过来，fullName的改变，firstName 和 secondName也会自动更新。

    原文作者：狂奔的蜗牛
    原文地址: https://segmentfault.com/a/1190000017828231
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞