06_计算属性
相比于methods，效率更高
完整写法
<body>
<div id="app">
<label for="last-name">姓：</label>
<input id="last-name" type="text" v-model="lastName" />
<br />
<label for="first-name">名：</label>
<input id="first-name" type="text" v-model="firstName" />
<h3>全名：{{ fullName }}</h3>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
lastName: '',
firstName: '',
};
},
computed: {
fullName: {
// 当fullName被读取的时，get就会被调用，get的返回值作为fullName的值
// get什么时候被调用？
// 1. 初次读取fullName时。
// 2. 所依赖的数据发生变化时。
get() {
console.log(this); // this指向vm
return this.lastName + this.firstName;
},
// set什么时候被调用？
// 当fullName被修改时 vm.fullName = '李四'
set(value) {
console.log(value); // 修改的fullName值
const arr = value.split('');
console.log(arr);
this.lastName = arr[0];
this.firstName = arr[1];
},
},
},
});
</script>
</body>
-
定义：通过已有的属性来计算出新的属性，当依赖的属性发生变化时，自动重新计算得到新的属性。
-
优势：内部具有缓存机制，初次读取时会计算一次，值可以复用，当依赖数据发生变化时才重新计算。
-
计算属性最终会出现在vm上，直接读取使用。
-
修改计算属性的值，必须写set函数去响应修改，set函数中去更新data中的值才是实现修改。
简写形式
一般情况下，计算属性的值只是用来展示到页面，不会去修改计算属性的值
// 只考虑读取，不考虑修改，直接把计算属性写成一个函数，这里相当于set
fullName: function () {
return this.lastName + this.firstName;
},
阅读剩余
THE END
