目录

1.姓名案例--插值语法实现

2.姓名案例 --methods实现

 3.姓名案例--计算属性实现

1.计算属性的定义

2.计算属性所写的位置和写法形式

3.计算属性通过什么来调用(读取）

 4.计算属性中的两个方法：get和set作用是什么？什么时候调用？

5.计算属性的精简写法(不要求修改计算属性的值，只是读取)

4.计算属性的总结

---

用一个案例的不同方式实现，来体现出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 是 指向 vmconsole.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中要引起计算时依赖的数据发生变化。