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 25
| <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) } } }
|
可以看到流程:
- 首先遍历这个vue对象的computed属性
- 新建一个def对象,用于配置vue对象的key属性
- 对computed中的每个key遍历时,判断是否是function,如果是,则def对象的get就是这个key的function
- 如果不是function,判断是否有get、set函数,有则添加。
- 使用Object.defineProperty设置vue对象的key属性
调用关系Vue
=>_init
=>_initScope
=>_initComputed