前言

在基于vue框架的前端我的项目开发过程中，只有波及到略微简单一点的业务，咱们都会用到computed计算属性这个钩子函数，能够用于一些状态的联合解决和缓存的操作。

根底应用

在computed中，申明一个函数，并须要提供一个返回值，用于在页面展现或者联合其余办法进行解决

联合state状态应用

通过changeName返回一段依赖于name的字符串

<li>computed根本应用</li><li>name值：{{ name }}</li><li>{{ changeName }}</li>data() {        return {            name: "zhangsan",        };    },computed: {    changeName: function () {        return `一段依赖于name：${this.name}的文字`;    },},

应用其余组件状态

被动触发computed办法，比照不依赖于其余状态下的区别，通过点击事件，被动触发一些操作

<li>{{ isCache }}</li><li>{{ cacheTip }}</li><li>{{ changeCache }}</li><li><button @click="handleChange">批改文字</button></li>data() {    return {        cacheTip: "cacheTip原始值",    };},computed: {    isCache: function () {        return `不依赖于任何属性值的一段文字`;    },    changeCache: function () {        return `依赖于cacheTip，${this.cacheTip}`;    },},methods: {    handleChange() {        this.cacheTip = "cacheTip状态被批改";    },},

当咱们点击批改状态时，能够看到，cacheTip被批改只会，依赖于cacheTip的changeCache也会产生扭转
isCache因为不和其余状态关联，所以还是放弃原来的值不变

getter VS setter

下面的cacheTip，或者isCache，在computed的通用办法中，默认都是应用了getter办法去获取解决过的值

能够写成

isCache: {    setter:function () {        return `不依赖于任何属性值的一段文字`;    }}

通过getter和setter，能够进一步对须要解决的状态进行解决

<li>{{ firstName }}</li><li>{{ lastName }}</li><li>{{ setterGetter }}</li><li><button @click="handleChangeFirst">批改文字</button></li>data() {    return {        firstName: "lewyon001",        lastName: "布欧001",    };},computed: {    setterGetter: {        // getter        get: function (newValue) {            console.log("newValue", newValue);            return this.firstName + " " + this.lastName;        },        // setter        set: function (newValue) {            console.log("newValue", newValue);            this.firstName = `${newValue.firstName}`;            this.lastName = `${newValue.lastName}`;        },    },}methods: {    handleChangeFirst() {        this.setterGetter = { firstName: "lewyon", lastName: "布欧" };    },},

get属性能够获取最原始的依赖值并解决，
set办法，能够获取批改后的依赖值，在批改之后一并展现到页面上或者进行其余业务须要的解决

computed办法的根底，包含进阶的操作，以及setter和getter办法如上

应用倡议

作为常常应用的办法，
  • computed能够作为依赖于其余状态的缓存进行应用，包含一些不常常更新的内容，缩小开销
  • 简略的字符串模板联合其余状态
  • 还有其余的场景在开发中，咱们都能够进行应用，联合watch等。

对于vue和watch的区别，以及watch的应用详解，在集体的博客中继续更新中。以上例子的源码中已开源，后续对于vue的笔记也会持续更新

  • 码云 https://gitee.com/lewyon/vue-note
  • githup https://github.com/akari16/vue-note

文章集体博客地址：vue2.x版本中computed和watch的应用入门详解-computed篇

创作不易，转载请注明出处和作者。