Vue.js学习日记——计算属性和侦听器

Posted 2021-01-16 lilihaishiluan

1.计算属性

模板不仅可以是简单的声明式逻辑，也可以是较为复杂的表达式。

<div id="element">
    <!--简单声明-->
    {{message}}
    <!--复杂表达式,表示变量message的翻转字符串-->
    {{message.split(‘‘).reverse().join(‘‘)}}
</id>

如果表达式过于复杂，将不利于直接理解。当需要在模板中多次引用message的翻转字符串时，操作也会变得繁琐。

所以，对于任何复杂逻辑，都应当使用计算属性。下面是基础例子：

<div id="element">
    <p>message: {{message}}</p>
    <p>revered message:{{reversedMessage}}</p>
</div>

var vm = new Vue({
   el: ‘element‘, 
   data:{
        message: ‘Hello‘     
   },
   computed:{
        //计算属性的getter 
        reversedMessage: function(){
        // this 指向 vm 实例
        return this.message.split(‘‘).reverse().join(‘‘);
        }
   }
})

可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.reversedMessage依赖于vm.message，因此当vm.message发生改变时，所有依赖vm.reversedMessage的绑定也会更新。

 

2.计算属性缓存vs方法

事实上，还可以通过在表达式中调用方法来达到同样的效果：

<div id="element">
    <p>revered message:{{reversedMessage()}}</p>
</div>

var vm = new Vue({
   el: ‘element‘, 
   data:{
        message: ‘Hello‘     
   },
   methods:{
        reversedMessage: function(){
             return this.message.split(‘‘).reverse().join(‘‘);
        }
   }
})

在这里，我们将reversedMessage定义为一个方法而不是一个计算属性。两种方式的最终结果最终是完全相同的。然而，不同的是，计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

 

3.计算属性vs侦听属性

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。

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
    }
  }
})

开发人员很容易滥用watch,通常更好的做法是使用计算属性而不是命令式的watch回调。

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

 

4.计算属性的setter

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

var vm = new Vue({
  el: ‘#demo‘,
  data{
         firstName:" ",
         lastName:" ",
  },
  computed: {
      fullName:{
            //getter
            get: function(){
                 return this.firstName + ‘ ‘ + this.lastName;
            },
            //setter
            set: function(newValue){
                 var names = newValue.split(‘ ‘);
                 this.firstName = names[0];
                 this.lastName = names[names.length - 1];
            }
      }
  }
})

现在，运行vm.fullName = ‘John Doe‘ 时，setter会被调用，vm.firstName和vm.lastName也会相应地被更新。