4.vue2-计算属性computed

Vue计算属性

Author:vanessa
Date:2018/02/11

计算属性（computed）：通过对data中属性，进行简单变换后得到的属性

例子：

    <div id="box">
        <div>{{msg}}</div>
        <div>{{doubleMsg}}</div>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                msg:10
            },
            computed:{
                doubleMsg:function(){
                   return this.msg*2;
                }
            }
        })
    </script>

计算属性和方法

1.计算属性：具有缓存机制，只有他的依赖data中数据发生改变时才会重新求值，多次访问计算一次
2.方法：访问几次执行几次，不会缓存

ps：性能开销比较大的情况下得到一个计算属性A，缓存后不必多长执行多次消耗

计算属性和侦听属性（watch）

侦听属性没有计算属性简洁，不建议使用

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

计算属性的 setter

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

<div>{{users}}</div>
var vm=new Vue({
            el:'#box',
            data:{
                msg:10,
                user:{
                    name:"tom",
                    age:2
                }
            },
            computed:{
                users:{
                  get:function(){
                      return 'my name is '+this.user.name+',I am '+this.user.age+' year old';
                  },
                  set:function(val){
                      var arr=val.split(' ');
                      this.user.name=arr[0];
                      this.user.age=arr[1];

                  }
                },
                reverseMsg:function(){
                   return this.msg*2;
                }
            }
        })
        
        vm.users='jerry 1'

侦听器

watch 侦听数据变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div>
	<div><input v-model="question"><div>
    <div>{{answer}}<div>
</div>
data：{
 question: '',
 answer:'ask a question'
},
watch:{
    question: function(newQuestion, oldQuestion) {
        this.answer = 'Waiting for you to stop typing...';
        this.getAnswer();
    }
},
methods:{
    getAnswer: function() {
        if (this.question.indexOf('?') === -1) {
            this.answer = 'Questions usually contain a question mark. ;-)'
            return
        }
        this.answer = 'Thinking...'
        var vm = this
        axios.get('https://yesno.wtf/api')
            .then(function (response) {
                vm.answer = (response.data.answer)
            })
            .catch(function (error) {
                vm.answer = 'Error! Could not reach the API. ' + error
            })
    }
}