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略胜一筹。

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

vue.js计算属性和观察者

猜你喜欢