目录
?4.计算属性中的两个方法：get和set作用是什么？什么时候调用？
用一个案例的不同方式实现，来体现出Vue的计算属性的优势所在。
1.姓名案例--插值语法实现
?分析：分析，上面的代码也能实现功能，但是这样违背了Vue的一个原则：模板中的简单表达式。所以上面的代码不推荐这样写
2.姓名案例 --methods实现
<div id="app">
姓:<input type="text" v-model="firstName">
<br><br>
名:<input type="text" v-model="lastName">
<br><br>
<!-- 这里写 fullName 表示把这个函数插入到这里 -->
<!-- fullName()表示把fullname这个函数的返回值插入到这里 -->
全名: <span>{{fullName()}}</span>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data:{
firstName: '张',
lastName: '三'
},
methods:{
fullName(){
console.log('@-@fullName');
// this指向的是 Vue实例对象
console.log(this);//Vue?{_uid: 0, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…},?…}
return this.firstName + '-'+ this.lastName
}
}
})
</script>
上图代码解析过程分析：(重点)?
1.data中的数据，任何一个数据发生改变，Vue的模板都会重新解析一遍，就是Vue拿过来的模板整体要重新阅读解析
2.如果解析到插值语句里面在调方法，那么这个方法一定会帮你重新调用一遍。
3.解析到fullName(),发现它是来自于一个函数(方法)的调用?，也不知道这个函数的返回值跟之前是不是一样，所以就重新调一遍，重新调用就拿到了 最新的 firstName和最新的lastName 然后返回。
分析：虽然用methods方法也能实现功能，但是这样做的话，会让该方法多次调用。
原因是：methods方法没有缓存，不能像计算属性一样从缓存中直接获取数据，需要重新调用一次方法获取数据。这就是计算属性相对于methods方法 的优势所在。
?3.姓名案例--计算属性实现
1.计算属性的定义
Vue认为data里面的都是属性
计算属性：用已有的属性去加工去计算去生成一个全新的属性
2.计算属性所写的位置和写法形式
属性是写在data里面。且vm._data中只有属性，不会有计算属性
计算属性是写在?配置项computed 里面的
因为计算过程比较复杂，包括读和修改，有点像Object.defineProperty ,所以要写成一个对象的形式
注意点：计算属性 是一个对象，那么在 vm上面的就是一个对象？不不不 ，它是往vm上面放的时候，自动去调用get，把get的返回值拿到后，放到vm上面，然后那个返回值的名字叫 fullName(计算属性名)
3.计算属性通过什么来调用(读取）
注意点：计算属性中得 get 和 set 中得 this 都是指向 Vue实例化对象 vm
通过Vue实例化对象vm来读取
借助Vue开发者工具：
??
?4.计算属性中的两个方法：get和set作用是什么？什么时候调用？
get作用和get调用时机：
- 1.浅层次：get:当有人读取fullName(计算属性)时，get就会被调用，且返回值就作为fullName(计算属性)的值
- 2.深层次: get:1.计算属性fullName初次调用时? 2.计算属性fullName所依赖的属性(firstName和lastName)发生变化时,就会再次调用。
- 分析：计算属性初次调用时，get会执行，会将数据存储在 缓存 里面，再次去调用直接从缓存里面取，就不会再执行get。如果 计算属性所依赖的属性 改变，就会重新调用get,然后更新缓存。
解析模板时：
会有4处地方用到fullName,但是当计算属性fullName所依赖的的属性没有改时，get只调用一次：
当计算属性fullName所依赖的的属性firstName和lastName改变时，get就会调用：
set 的设置就是为了当? 计算属性 fullName 改变时起作用。set 不是必须写，如果 计算属性会被改(不是计算属性所依赖的属性改，而是计算属性被改)，就设置set。不修改就不写set
?
set 什么时候被调用？当计算属性 fullName被修改时才调用。
? ? ? ? 当计算属性fullName的值改成什么，set收到的的值就是什么，然后去把计算属性所依赖的属性改掉。
<div id="app">
姓:<input type="text" v-model="firstName">
<br><br>
名:<input type="text" v-model="lastName">
<br><br>
全名: <input type="text" v-model="fullName">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data:{
firstName: '张',
lastName: '三'
},
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
get(){
//console.log(this); //此处得 this 是 指向 vm
console.log('fullName有人读取,get就被调用了');
return this.firstName + "-"+ this.lastName;
},
//set当计算属性 fullName被修改时才调用,当计算属性fullName的值改成什么，set收到的的值就是什么
set(value){
console.log('set被调用了');
//获取到修改的值后，去把对应的计算属性所依赖的属性值改了
const arr = value.split('-');
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>?分析：计算属性改变，通过set方法，计算属性所依赖的属性的值就会改，对应页面上用到计算属性所依赖的属性的值也会改。
其实：计算属性的值可以说是没有，因为计算属性在用的时候才从已有的属性中去算出计算属性的值。所以改掉计算属性的值，实际上是改计算属性所依赖的属性的值。?
注意点：计算属性中的set和get方法，不能写成箭头函数的形式，不然 其中的 this 指向就不是 Vue实例化对象vm了。
5.计算属性的精简写法(不要求修改计算属性的值，只是读取)
?注意点：这里计算属性简写后，表面上看着是一个函数的形式。但是使用的时候不能加()
eg: {{fullName()}} <==这种是错的? ?；{{fullName}} <==这样才是对的
4.计算属性的总结
?计算属性：
? ? ? ? 1.定义：要用的属性不存在，要通过已有的属性(Vue管理的)计算得来。
? ? ? ? 2.原理：底层借助了Object.defineProperty方法提供的getter和setter
? ? ? ? 3.get函数什么时候调用？
? ? ? ? ? ? ? ? （1）初次读取时会执行一次
? ? ? ? ? ? ? ? （2）当依赖的数据发生改变时会再次调用
? ? ? ? 4.优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便
? ? ? ? 5.备注：
? ? ? ? ? ? ? ? 01.计算属性最终会出现在vm上，直接读取使用即可 。{{fullName}}
? ? ? ? ? ? ? ? 02.如果计算属性要修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。
?