计算属性(computed)
-
1）定义：要用的属性不存在，要通过已有属性计算得来；
-
2）原理：底层借助了 Object.defineProperty() 方法提供的 getter 和 setter；
-
3）get 函数什么时候执行？
- 1、初次读取时会执行一次，再调用会读缓存；
- 2、当依赖的数据发生改变会被再次调用，再刷新缓存；
-
4）优势：与 methods 实现相比，计算属性有缓存机制（复用），避免重复计算，效率更高，调试更方便；
-
5）备注：
- 1、计算属性最终会出现在 vm 上，直接读取使用即可；
- 2、如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。
示例代码
<div id="app">
<!-- v-model 双向绑定
https://v2.cn.vuejs.org/v2/style-guide/#简单的计算属性强烈推荐
-->
<input type="text" v-model="fistName"><br />
<input type="text" v-model="lastName"><br />
<input type="text" v-model="message"><br />
<p>
插值语法：
{{fistName.slice(0,3)}}
{{lastName}}
</p>
<p>methods方法：{{getFullName()}}</p>
<p>计算属性：{{fullName}}</p>
<p>计算属性：{{fullName}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
//数据变化，模板要重新解析，如果模板遇到了（methods里的）方法 也要重新调用，所以效率不高
data: {
fistName: '张',
lastName: '三',
message: 'hello word'
},
//计算属性
computed: {
fullName: {
//get作用：当有人读取 fullName 时，get就会被调用，且返回值作为 fullName的值
//get什么情况调用：
// 1、首次读取 fullName
// 2、所依赖的数据发生变化
get() {
console.log("computed-fullName");
return this.fistName + this.lastName;
},
//set 什么情况调用:
//1、当 fullName 被修改的时候 触发
set(value) {
}
}
},
methods: {
//数据变化，模板要重新解析，如果模板遇到了（methods里的）方法 也要重新调用，所以效率不高
getFullName() {
console.log("methods-getFullName");
return this.fistName + this.lastName;
}
}
})
</script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
//计算属性
computed: {
//简写：只考虑get ,不考虑set
fullName() {
return this.fistName + this.lastName;
},
fullName: function () {
return this.fistName + this.lastName;
}
}
})
</script>
