vue初学-计算属性和侦听

计算属性

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo1</title>
       <script type="text/javascript" src='vue.js'></script>
    </head>
    <body>
        
        <div id="app">
            <p>Original message: "{{ message }}" </p>
            <p>Computed reversed message: "{{ reversedMessage }}" </p>
        </div>

        <script type="text/javascript">
      
           var app = new Vue({
               el:'#app',
                data: {
                    message: 'Hello'
                },
                computed: {
                    reversedMessage: function(){
                    // 计算属性的 getter
                    return  this.message.split('').reverse().join('');
                }
            }
           });   


            app.message = 'goodBye'
        </script>
    </body>
</html>

我们声明了一个reversedMessage计算属性。提供的函数将作用于 property，vm.reversedMessage的getter函数.
vm.reversedMessage 的值，始终取决于vm.message的值。

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

计算属性的getter函数时没有副作用的（side effect)的，易于测试和理解。

计算属性和方法
上面的计算属性可以通过方法达到同样的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>

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

完全可以达到相同的效果，但是不同的是，计算属性是基于他们的响应式以来进行缓存的。只是在响应式依赖发生改变时，才会重新求值。这就是意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前计算的结果，不必多次执行函数

如果不希望缓存，则可以使用方法来替代

计算属性vs侦听属性
未避免滥用watch，vue提供了侦听属性来监控vue实例数据的变动。

<div id="demo">{{ fullName }}</div>
<script>
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
    }
  }
})

</script>

计算属性的setter

<script>
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]
    }
  }
}

</script>

现在在运行 vm.fullName='John Doe' 时， setter就会被调用， vm.firstName和 vm.lastName也会响应的被更新

侦听器

计算属性在大多数情况下是合适的，但有时也需要一个字对应的侦听器。当在数据变化时需要执行异步，或者执行开销较大的操作时，这种方式最有用。
watch选项允许我们执行异步操作（访问一个api），限制我们执行该操作的频率，在我们得到最终结果钱，设置中间状态，这是计算属性无法做到的。
除了watch选项之外，还可以使用命令式的vm.$watch API

最后编辑于：2021.01.06 19:26:55