在vue中data里面的值，为属性名与属性值
所谓的计算属性就是在原有的数据上加工整合；不能写在data中，要用到全新的配置项computed
其中get()方法就是放在vm对象中的
没有读，没有效果
读了返回ss,同时打印了s
区分属性和计算属性
在computed中，vue做了将computed的this指向，设置为了vm
写了四个fullName，get就被调用了一次，其余的是放在缓存中
get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生变化时
这是要所依赖是数据发生改变，get调用，像x不是就没有调用
计算属性是放的名字叫fullName。
有get，肯定也有set。其中set不行必须写，如诺有需求就写。set有收到参数，你把computed修改说明，set就会收到什么
为什么页面上的值没有修改 ？
fullName是盯死了firstName和lastName的。而我们实际上做了一件很无聊的事情，就是vm.fullName设置为了别值，然后输出，实际的值并没有改变
感觉fullName没有真正的值，而是算出来的值
总结：
| 计算属性： | |
| 1.定义：要用的属性不存在，要通过已有属性计算得来。 | |
| 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 | |
| 3.get函数什么时候执行？ | |
| (1).初次读取时会执行一次。 | |
| (2).当依赖的数据发生改变时会被再次调用。 | |
| 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 | |
| 5.备注： | |
| 1.计算属性最终会出现在vm上，直接读取使用即可。 | |
| 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>计算属性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
-->
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
测试：<input type="text" v-model="x"> <br/><br/>
全名：<span>{{fullName}}</span><br/><br/>
全名：<span>{{fullName}}</span><br/><br/>
全名：<span>{{fullName}}</span><br/><br/>
全名：<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm=new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
x:'搜索'
},
computed:{
fullName:{
// get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
// get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生变化时
get(){
console.log('get调用')
// console.log(this)此时的this就是vm
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];
}
}
}
})
</script>
</html>