[vue]计算和侦听属性(computed&watch)

先看一下计算属性

vue只有data区的数据才具备响应式的功能.

计算和侦听属性

- v-text里可以写一些逻辑

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

- 不过页面有大量引用这种逻辑, 显得就不太酷了, 将这种需要处理的属性写到computed里

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

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

参考

计算属性持续追踪它的响应依赖。在计算一个计算属性时，Vue.js 更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。因此，只要依赖不发生变化，访问计算属性会直接返回缓存的结果，而不是调用 getter。

下面的栗子,只有msg发生变化时,才会重新计算.即调用属性的get方法.

- 只有当this.msg更改时,才会触发computed重新计算

<div id="app">
    <input type="text" v-model="msg">
    {{example}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hi'
        },
        computed: {
            example() {
                return Date.now() + this.msg;
            }
        }
    })
</script>

- 栗子2: 全选按钮

<div id="app">
    全选: <input type="checkbox" v-model="checkAll"> <br>
    <input type="checkbox" v-for="product in products" v-model="product.isSelected">
</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "maotai",
            products: [
                {productName: 'python', isSelected: false},
                {productName: 'go', isSelected: true},
            ],
        },
        computed: {
            checkAll: {
                get() { //计算checkall的值
                    return this.products.every(item => item.isSelected);
                },
                set(val) {//根据checkall的值计算每项该不该选
                    this.products.forEach(item => item.isSelected = val);
                }
            }
        }
    })

- 仅有少数computed属性需要set, 绝大多数只有get(可以省略关键词)

<div id="app">
    <input type="text" placeholder="price1" v-model="price1">
    <input type="text" placeholder="price2" v-model="price2"> <br>
    总价格: {{price3}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'maotai',
            price1: 1,
            price2: 2,
        },
        computed: {
            price3() {
                return parseInt(this.price1) + parseInt(this.price2);
            }
        }
    })
</script>