(4)vue 计算属性和侦听器

 一、计算属性

1.计算属性

如果计算方式不能复用，且不好维护

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

所以计算方式比较复杂，或者会重复使用时，可以用计算属性

    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#example',
            data: {
                message: 'Hello'
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

2.计算属性的缓存设计

计算属性是基于它们的响应式依赖进行缓存的，如果数据没有发生改变，下次调用方法时会使用上一次的结果

    <script>
        var vm = new Vue({
          computed: {
              now: function () {
                return Date.now()
              }
          }
        })
    </script>

如果希望每次都重新执行方法，可以使用

    <script>
        var vm = new Vue({
          methods: {
              now: function () {
                return Date.now()
              }
          }
        })
    </script>

 

 注意区分属性和方法，属性后不()

 3.侦听

使用vue的watch属性可以监听自定义属性的改变

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

但使用计算属性可能会更加方便

    <div id="demo">{{ fullName }}</div>
    <script>
        var vm = new Vue({
          el: '#demo',
          data: {
            firstName: 'Foo',
            lastName: 'Bar'
          },
          computed: {
            fullName: function () {
              return this.firstName + ' ' + this.lastName
            }
          }
        })
    </script>

4.get set

    <div id="demo">{{ fullName }}</div>
    <script>
        var vm = new Vue({
            el: '#demo',
            data: {
                firstName: "tom"
            },
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName
                    },
                    set: function (value) {
                        console.log(value)
                        this.firstName=value
                    }
                }
            }
        })
    </script>

 

二、侦听