- 定义：要用的属性不存在，要通过已有属性计算得来
- 原理：底层借助了Object.defineproperty方法提供的getter和setter
get什么时候执行：
- 初次读取时
- 当依赖的属性发生改变时会被再次调用
- 优点：与methods相比，内部有缓存机制（复用），效率更高，方便调试
注：计算属性最终会出现在vm身上，直接读取使用即可；
如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_计算属性实现（简写）</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
姓名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
},
computed: {
//完整写法
/* fullName: {
get() {
console.log("get被调用了")
return this.firstName + this.lastName;
},
set(value) {
console.log('set--->', value);
const arr = value.split('-');
this.firstName = arr[0];
this.lastName = arr[1]
}
} */
//简写（考虑读取，不考虑修改时，才用简写方式）
fullName() {
console.log("get被调用了")
return this.firstName + this.lastName;
}
}
})
</script>
</body>
</html>
评论 (0)