Vue计算属性【四】

计算属性和侦听器

计算属性

模板内的表达式是用于简单运算的，放入太多的逻辑会让模板过重且难以维护。

因此，对于复杂逻辑运算，应当使用计算属性。

<div id="app">
      <p>This is message: {{ message }}</p>
      <p>This is message.reverse: {{ reverse }}</p>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {
            message: 'Hello Vue.js'
            // reverse: 'hhhhh'
          }
        },
        computed: {
          reverse: function () {
            return this.message.split('').reverse().join('')
          }
        }
      })
    </script>

计算属性的值始终随着data值的变化而动态改变。

Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新

计算属性缓存vs方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

<div id="app">
      <p>This is message: {{ message }}</p>
      <p>This is Computed: {{ reverseComputed }}</p>
      <p>This is Methods: {{ reverseMethods() }}</p>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return { message: 'This is message' }
        },
        computed: {
          reverseComputed: function () {
            console.log('computed')
            return this.message.split('').reverse().join('')
          }
        },
        methods: {
          reverseMethods: function () {
            console.log('methods')
            return this.message.split('').reverse().join('')
          }
        }
      })
    </script>

计算属性vs侦听属性

<div id="app">
      <p>{{ fullName }}</p>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {
            firstName: 'Evan',
            lastName: 'You'
            // fullName: ''
          }
        },
        computed: {
          fullName: function () {
            return this.firstName + ' ' + this.lastName
          }
        }
        // watch: {
        //   firstName: function (val) {
        //     console.log('firstName')
        //     this.fullName = val + ' ' + this.lastName
        //   },
        //   lastName: function (val) {
        //     this.fullName = firstName + ' ' + val
        //   }
        // }
      })
    </script>

计算属性的setter

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

<div id="app">
      <p>firstName: {{ firstName }}</p>
      <p>lastName: {{ lastName }}</p>
      <p>fullName: {{ fullName }}</p>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return { firstName: 'Evan', lastName: 'You' }
        },
        computed: {
          fullName: {
            get: function () {
              return this.firstName + ' ' + this.lastName
            },
            set: function (newValue) {
              let name = newValue.split(' ')
              this.firstName = name[0]
              this.lastName = name[1]
            }
          }
        }
      })
    </script>

侦听器

暂时略过