Vue计算属性使用

计算属性一般用在下面的例子,在模版里面可以像一个类属性那样访问它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<div>
<p>{{ name }}</p>
<p>{{ reverseName }}</p>
</div>
</template>

<script>
export default {
data() {
return {
name: "ssdemajia"
};
},
computed: {
reverseName() {
return this.name
.split("")
.reverse()
.join("");
}
}
};
</script>

实现

初始化

初始化函数在/src/instance/scope.js里的_initComputed()中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function noop () {}
exports._initComputed = function () {
var computed = this.$options.computed
if (computed) {
for (var key in computed) {
var userDef = computed[key]
var def = {
enumerable: true,
configurable: true
}
if (typeof userDef === 'function') {
def.get = _.bind(userDef, this)
def.set = noop
} else {
def.get = userDef.get
? _.bind(userDef.get, this)
: noop
def.set = userDef.set
? _.bind(userDef.set, this)
: noop
}
Object.defineProperty(this, key, def)
}
}
}

可以看到流程:

  1. 首先遍历这个vue对象的computed属性
  2. 新建一个def对象,用于配置vue对象的key属性
  3. 对computed中的每个key遍历时,判断是否是function,如果是,则def对象的get就是这个key的function
  4. 如果不是function,判断是否有get、set函数,有则添加。
  5. 使用Object.defineProperty设置vue对象的key属性

调用关系Vue=>_init=>_initScope=>_initComputed