<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>计算属性实现名字案例简写</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>欢迎来带{{name}}学习</div>
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
全名：<span>{{fullName}}</span><br />
</div>
<!--
计算属性
1.定义:要用的属性不存在，要通过已有的属性计算得来
2.原理:底层借助了Object.defineproperty 方法提供的getter 和setter
3.get函数什么时间执行
1）初次读取的时候会执行一次
2）当依赖的数据发生变化时会被再次调用
4.优势:与methods实现相比，内部有缓存机制（复用）效率更高调试方便
5.备注:
1)计算属性最终会出现在vm上，直接读取使用即可
2)如果计算属性被修改，那么必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
-->
</body>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
firstName: "张",
lastName: "三",
},
computed: {
//get 有什么作用 当有人读取fullName时，get 就会被调用，其返回值作为fullname
//get 什么时候调用 1.初次读取fullName时，所依赖的数据变化
//计算属性有缓存
// 完整的写法
// fullName: {
// get() {
// return this.firstName + "-" + this.lastName;
// },
// //set什么时间被调用，当fullName被修改的时候
// set(value) {
// console.log("set", value);
// const arr = value.split("-");
// this.firstName = arr[0];
// this.lastName = arr[1];
// },
// },
fullName() {
return this.firstName + "-" + this.lastName;
},
},
});
</script>
</html>
//模板里面写代码的时候 是data 中配置的数据，还是methods 中配置的方法，还是computed 计算的属性
只是读取，不修改的时候，才能有简写形式
<div id="root">
<div>欢迎来带{{name}}学习</div>
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
全名：<span>{{fullName}}</span><br />
</div>