乐趣区

关于前端:vue2x版本中computed和watch的使用入门详解computed篇

jiezi

前言

在基于 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 篇

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

退出移动版