一、计算属性的使用

【什么是计算属性】

    ——写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用！

1.计算属性：首先它是一个属性，所以使用方式跟其他的属性没什么，就是定义的时候不同

2.定义计算属性：写法上是一个函数，这个函数的返回值就是计算属性最终的值

3.定义和使用的时候注意点：

   1.计算属性必须定义在computed节点中

   2.计算属性定义的时候必须是一个function，还必须有返回值，这个返回值就是计算属性最终值

   3.计算属性不能当作方法被调用，注意他是一个属性

       计算属性的缓存问题：计算属性只要计算了一次，就会把结果缓存起来，以后多次使用计算属性，直接使用缓存的结果，只会计算一次，如果是计算属性依赖的属性发生改变，计算属性会重新计算一次，并且再次进行缓存。比如定义个翻转字符串案例 的计算属性(这个只能获取计算属性的值，不能设置计算属性的

<div id="app3"><p>原字符串：{{message}}</p><p>计算反转字符串：{{reverseMessage}}</p>
</div>
<script>var num = 1;new Vue({el: "#app3",data: {message: 'xiaoma'},computed: {reverseMessage1:function () {//split()把一个字符串分割成字符串数组//reverse()颠倒数组中元素的顺序//join()把数组中的所有元素转换为一个字符串num += 1;return num +  this.message.split('').reverse().join('');}},methods: {reverseMessage2() {num += 1;return num + this.message.split('').reverse().join('');}}})

值)

 二、计算属性完整结构（setter和getter）

   计算属性的setter和getter
methods和computed的区别：methods不会进行缓存，如果多次使用会调用多次。计算属性会进行缓存，如果多次使用，计算属性只会调用一次

methods和computed的核心区别：

1·methods是函数调用，computed是属性调用
2·computed有缓存功能，methods没有
3·computed定义的方法是以属性访问的形式调用的，methods定义的方法是以函数访问的形式调的
4·computed是基于响应式依赖进行缓存的，只有响应式依赖发生改变时，才会重新求值对于任何复杂逻辑，都应当使用计算属性。

<div id="app">姓: <input type="text" v-model="lastName"><br><br>名: <input type="text" v-model="fristName"><br><br>全名:{{fullName}}<button @click="btn">修改计算属性的值</button></div><script src="../vue.js"></script><script>new Vue({el:'#app',data(){return{fristName:'马',lastName:'小跳',}},computed:{fullName:{//get:获取值时触发//当有人读取fullName时，get就会被调用，且返回值就作为fullName的值get(){return this.fristName + '-'+this.lastName;},set(value){console.log('set',value);const arr = value.split('-')this.fristName=arr[0]this.lastName=arr[1]}}},methods:{btn(){this.fullName='马-同学'}}})