1.computed概念
计算属性:顾名思义就是计算出来的属性，在vue中data里面的全部数据是属性，而计算出来的属性需要放在computed
2.computed实现原理及优势
（1） 计算属性:1.定义:要用的属性不存在，要通过已有属性计算得来 （2） 原理:底层借助了Objcet.definproperty方法提供的getter和setter，get函数什么时候执行(1)当初读取时会执行一次（2）当依赖的数据发生改变时会被再次调用 （3） 与method,watch实现相比，内部哟暖存机制（复用）,效率更高，调试方便， （4） 计算属性最终会出现在vue的实例上,直接读取使用即可
<div id="root">
姓:<input type="text" v-model:value="firstname"> 名:
<input type="text" v-model:value="lastname"> 姓名:
<!--这里调用了3次计算属性但是只执行了一次 get()，剩下的来两次执行的缓存-->
<!--所以和method，watch相比计算属性最大的区别在于多次调用相同的计算属性只执行一次，
//剩下的执行暖存里面的，效率高-->
<!--当计算属性的值发生变化时，才重新调用计算属性的get()方法-->
<span>{{fullname}}</span>
<span>{{fullname}}</span>
<span>{{fullname}}</span>
</div>
<script>
const vm = new Vue({
el: "#root",
//用data实现
data: {
firstname: "邓",
lastname: '紫琪'
},
//计算属性
computed: {
//计算的过程为一个对象，计算属性的底层也用的数据代理
fullname: {
//get的调用:（1）当有人读取vm身上的fullName时，get就会被调用去找computed中的
//fullname，且返回值作为fuallname的值 ，（2） 当所依赖的数据发生变化时
get() {
//获取vm,计算属性中函数的this也是指向vue实例vm的
console.log(this)
console.log("邓紫琪get被调用了")
return this.firstname + this.lastname
},
//当vm上的fullName被修改时调用set(),value修改的值
//如果计算属性要被修改，那必须写set函数去响应修改，
//且set中要引起计算时依赖的数据发生变化
set(value) {
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
},
}); //计算属性最终会出现在vm上,直接读取使用即可
console.log(vm)
</script>
