引言
看过多遍 vue.js 文档，但是对一些知识点始终似懂非懂。于是便有了重读 Vue.js 文档的计划。此篇对 computed 属性进行了一些梳理，分享给大家。
设计初衷
用于简单运算,避免在模版中放入太多的逻辑，造成难以维护。computed 属性是从一种(一些)状态中推导出另一种状态，且computed 属性的 getter 方法是无副作用的(side effect),类似于纯函数(pure function)。
特点
依赖于响应式依赖进行缓存的
更新条件
- 依赖的是响应式状态
- 状态发生了改变。
传参
<template>
{{ computedText('daniel fang') }}
</template>
computed: {
computedText () {
return function (value) {
return value.slice(0, 6);
}
}
}
setter
computed 默认只有 getter, 此 getter 即为 Object.defineProperty 中的 getter。在需要时亦可提供 setter。
- 希望在改变 computed 属性时，做一些其他的操作。
computed: {
fullName: {
get () {
return this.firstName + ' ' + this.lastName;
},
set (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
- 与 vuex 配合使用的时候
<template>
<input v-model="message">
</template>
computed: {
message: {
get () {
return this.$store.state.message;
},
set (newValue) {
this.$store.commit('updateMessage', newValue);
}
}
}
- 子组件中表单绑定了依赖于某个 props 的 computed
<template>
<radio v-model="message"></radio>
</template>
props: ['msg'],
computed: {
message: {
get () {
return this.msg;
},
set (newValue) {
this.$emit('change', newValue);
}
}
}
总结
本篇文章是个人对 computed 属性的一些理解，希望能对大家有所帮助。如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞
