Vue中的计算属性

1、什么是计算属性

计算属性：可以理解为能够在里面写一些计算逻辑的属性。
 

2.什么时候要用计算属性

对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性

3.计算属性的作用

作用：1）减少模板中的计算逻辑
2）数据缓存。当我们的数据没有变化时，不在执行计算的过程
3）依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据

4.计算属性的基本属性

//【基本结构】   
  new Vue({
    el:'',

    //数据
    data:{},

    //方法属性
    //事件绑定，不要return,没有缓存.
    methods:{},

    //侦听器(重视过程)
    //监听一个值的改变，不要返回值。
    watch:{
        要侦听的数据(){}
    },

    //计算属性(重视结果)
    //必须有return,只求结果，有缓存。
    computed:{
        计算属性名(){
        }
    }
  }) 

5.计算属性的配置项

1.get.()时获取值时触发，当有人读取fullName时，get就会被调用，其返回值就作为fullName的值

2.set.()时设置值时触发，当计算属性被修改时，调用set。

6. 定义计算属性fullName

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

})

结果：