vue 计算属性computed

computed计算属性

对于任何复杂逻辑，你都应当使用计算属性

<div id="app">
//computed属性
    <input v-model="price2" type="text" />
    <div>
        commputed----
        {{add}}
    </div>
//methods属性
    <input v-model="price1" type="text" />
    <div>
        methods----{{add2()}}
    </div>
    <div @click="test">{{total}}</div>
</div>

new Vue({
el:'#app',
data:{
    count:2,
    price1:'',
    price2:'',
    total:0,
    timer:0
},
//当computed里面的数据发生变化的时候,也会触发该函数
//因此我们通常不用此属性来定义需要频繁操作的数据的方法
methods:{ 
    add2(){
        console.log('methods')
        return this.count*this.price1; 
    },
    test(){
        console.log('我是点击事件来触发的');
        this.total = this.count*this.price1;
    }
},

//computed属性只有当自身的数据发生变化时才会再次触发该函数
computed:{//计算属性
    add(){
        var num;
        //函数的节流或防抖
        //比如:做一个搜索功能,当用户输入文字的时候函数会一直执行,但我们是希望用户输入完成之后才执行函数,实现这种效果的方法,我们叫节流或防抖
        clearTimeout(this.timer);
          //箭头函数本身是没有this,但我们用到this的时候,他会找定义函数时所处环境的this
        this.timer =setTimeout(()=>{  
            console.log(this)//vue的实例化对象
        },1000)
        return this.count*this.price2; 
    }
}
})

计算属性中的setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

<div id="app">
    <p>{{firstName}}---{{lastName}}---{{fullName}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        firstName: 'li',
        lastName: "zongjian"
    },
    computed: {
        fullName: {
            get: function () {
              //获取firstName和this.lastName的值
                return this.firstName + ' ' + this.lastName;
            },
            set: function (newValue) {
               //获取get中的返回值,并切割成数组
                var names = newValue.split(' ');
                console.log(names);//['fang','yuying']
              //分别赋回
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    }
})

vm.fullName = "fang yuying";  //当fullName发生改变时,同时改变firstName和lastName的值;