01
computed 计算
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
< ="example">
{{ .split('').reverse().join('') }}
</>
这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理
当你需要从现有数组得到新的数据这个时候你就需要计算了computed
<div id="example">
<p>原来的信息: "{{ msg }}"</p>
<p>计算翻转的信息: "{{ rmsg }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
msg: 'Hello'
},
computed: {
// 计算属性的 getter
rmsg: function () {
// `this` 指向 vm 实例
return this.msg.split('').reverse().join('')
}
}
})
结果:
原来的信息: "hello"
计算翻转的信息: "olleh"
02
computed 与method
强调了computed区别于method最重要的两点
- computed是属性调用,而methods是函数调用
- computed带有缓存功能,而methods不是
03
computed 原理
JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个:
var person = {};
Object.defineProperty (person, 'age', {
get: function () {
console.log ("Getting the age");
return 25;
}
});
console.log ("The age is ", person.age);
// Prints:
//
// Getting the age
// The age is 25
(Obeject.defineProperty是Object的一个方法,第一个参数是对象名称,第二个参数是要设置的属性名,第三个参数是一个对象,它可以设置这个属性是否可修改、可写等,而这篇文章主要使用的是Obeject.defineProperty的访问器属性
尽管 person.age 看起来像是访问了对象的一个属性,但其实在内部我们是运行了一个函数。