vue 计算属性

计算属性

基本用法

1.计算属性的特点

• 1、可以对属性数据进行逻辑处理操作
• 2、对计算属性中的数据进行监视，也就是被计算的属性如果被修改，那计算属性后的结果就是被修改后再计算的结果；
  例如：msg：hello vue，经过计算属性计算后，反转值为：vue hello;
  如果此时msg被修改为：my name is vue， 那此时计算属性会监视原来的数据被更改，会重新计算结果为：vue is name my

2.具体实例用法

    var vm = new Vue({
        el: "#app",
        data:{
            msg:"hello vue!"
        },
        computed:{
            msgReverse:function(){
                return this.msg.split(" ").reverse().join(" ");
            }
        }
    })
    调用方法：{{msgReverse}}

3.computed计算属性 VS mehtods内的方法

计算属性的get函数，如果使用methods内的方法，也可以达到同样的效果，那我们为何要使用计算属性呢？

• 他们之间的区别：
  1).计算属性是依赖于被计算的数据，只有当这个数据发生改变的时候，计算属性才会改变
  2).计算属性是有缓存的，如果被计算的那个数据没有发生改变，不管你访问多少次，
  计算属性返回的值依然是之前计算的值。
  ps：实例方法

         var vm = new Vue({
             el: "#app",
             data:{
                 num:8
             },
             computed:{
                 getNum:function(){
                     console.log(new Date());    // Wed Feb 27 2019 13:00:42 GMT+0800 (中国标准时间)
                     return this.num+1;         // 9
                 }
             },
             methods:{
                 getNum2:function(){
                     console.log(new Date());    // Wed Feb 27 2019 13:00:42 GMT+0800 (中国标准时间)
                     return this.num+1;         // 9
                 }
             }
         })
  
         // 模拟多次访问计算属性，每次结果都一样，new Date()的值也被缓存了，没有发生改变
         setInterval(function(){
             console.log(vm.getNum);     // Wed Feb 27 2019 13:00:42 GMT+0800 (中国标准时间)
                                         // 9
         },1000)
  
         // 模拟多次访问methods内的方法，new Date()每次结果都在发生改变，没有被缓存
         setInterval(function(){
             console.log(vm.getNum2());     // （ new Date的值一直在变化 ）
                                         // 9
         },1000)
      ```
  
  
  
  

get和set

计算属性由两部分组成：get和set，get为读取数据，set为设置更改数据

get和set实例用法：

 var vm = new Vue({
         el: "#app",
         data:{
             msg:"hello vue!"
         },
         computed:{
             msgReverse:{
                 get:function(){
                     return this.msg.split(" ").reverse().join(" ");
                 },
                 set:function(value){
                     this.msg = value;           // 这里的vulue等于外部赋的值
                 }
                 
             }
         },
         methods:{
             changeMsg:function(){
                 vm.msgReverse = "i love you"        // 这里赋的值就相当于计算属性内set函数传进去的vuelue
             }
         }
     })