vue.js计算属性和观察者

计算属性和观察者
在学习计算属性之前,先简单说一下模板属性:{{}}绑定数据
{{}}里边只能写一条表达式,可以写JS表达式子, 缺点,代码过重,难以维护,它不能执行复杂的JS逻辑

官方的定义
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太多的逻辑会让模板过重且难以维护

为了解决这个问题,所以有了一个computed计算属性
computed 可以直接在模板语法里使用,力与维护,和写一些复杂的JS逻辑,
解决了{{}}里边只能写一条表达式的问题;
所以,对于任何复杂逻辑,你都应当使用计算属性。
这里写一个vue官网的 反转字符串例子:

html代码:

<div id="app">
  <p>最初的字符串: "{{ msg }}"</p>
  <p>反转后的字符串: "{{ reversedMessage }}"</p>
</div>

js代码:

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

结果:

最初的字符串: "Hello"
反转后的字符串: "olleH"

这里我们声明了一个计算属性 “reversedMessage”。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数

所以当我们重新赋值给”msg”时,它也会发生反转:

console.log(vm.reversedMessage) // => 'olleH'
vm.msg= 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

当然,下面紧接着就说到,methods里面不是可以存放方法吗?那不是也可以这样写?:

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed 相比 function
所达到的效果是一样的,但是官方给出了这样的解释:

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

有缓存的原因(官网):

假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!

computed除非数据发生改变,才会重新赋值,。所以你只要用了computed,只要你的数据不改变,尽管经过多次调用,他还是会返回你之前的值,这就不用像函数那样每一次都要执行了。也就是说,computed有缓存,如果不想要缓存的话,就只能用methods 里的方法。

官网还用computed 和 watch 进行了比较;
比较结果就是watch代码繁琐;
而computed代码简洁,避免了重复的代码;
下面是官网的例子:

<div id="demo">{{ fullName }}</div>

//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
    }
  }
})
/*******************************************************/
//computed方法:
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {//只需要一句就可改变fullName;
      return this.firstName + ' ' + this.lastName
    }
  }
})

由上述代码可以知道,虽然输出的fullName都是'Foo Bar',但是性能上,还是computed略胜一筹。

文章持续更新中。。。。。
如果上面内容有那些不对的地方,还请给评论指出。。。
让我们一起进步。。。

猜你喜欢

转载自blog.csdn.net/heshuaicsdn/article/details/79717507
今日推荐