Vue-计算属性

一、计算属性的使用

【什么是计算属性】

    ——写在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='马-同学'
              }
          }
 
      })