vue笔记（四）

侦听器

下面这个图是利用methods函数统计钱的数量的多少

改变前

改变后

点击下面的+1按钮，每个产品的金额就会加一，然后再把总的金额统计到产品下面

            <div v-for='(item,index) in books'>{{item.name}}--{{item.money}}</div>
            <div>{{all()}}</div>
            <button @click='add'>+1</button>

new Vue({
            el: '#app',
            data: {
                books: [
                    {
                        name: 'a',
                        money: 23
                    },
                    {
                        name: 'b',
                        money: 45
                    },
                    {
                        name: 'c',
                        money: 26
                    }
                ],
                moneyAll: 0
            },
            methods: {
                all() {
                    let a = 0
                    this.books.forEach(p => {
                        a = a + p.money
                    })
                    return a
                },
                add() {
                    this.books.forEach(p => {
                        p.money++
                    })
                }
            },

但是一般在vue中不会这么做，因为在每次调用methods里的方法的时候都会把页面重新渲染一遍，导致性能受到影响。

所以一般会用computed来代替methods函数对数据进行计算，一般大多数情况下都会用computed，比如这样也可以得到相同的效果。

            <div v-for='(item,index) in books'>{{item.name}}--{{item.money}}</div>
            <div>{{all()}}</div>
            <div>{{all2}}</div>
            <button @click='add'>+1</button>

new Vue({
            el: '#app',
            data: {
                books: [
                    {
                        name: 'a',
                        money: 23
                    },
                    {
                        name: 'b',
                        money: 45
                    },
                    {
                        name: 'c',
                        money: 26
                    }
                ],
                moneyAll: 0
            },
            methods: {
                all() {
                    let a = 0
                    this.books.forEach(p => {
                        a = a + p.money
                    })
                    return a
                },
                add() {
                    this.books.forEach(p => {
                        p.money++
                    })
                }
            },
            computed: {
                all2() {
                    let a = 0
                    this.books.forEach(p => {
                        a = a + p.money
                    })
                    return a
                }
            }

改变前

改变后

不过，还有一个既不用用到methods也不用用到computed的办法，那就是wacth。

使用watch必须要在data里面有它对应的属性，当属性发生变化时它才会调用watch内部定义的逻辑，来对数据进行相应的处理，注意：data里的属性名和watch的名字要一致，否则监听就会失败，数据无法改变。

改变前

改变后

            <div v-for='(item,index) in books'>{{item.name}}--{{item.money}}</div>
            <div>{{all()}}</div>
            <div>{{all2}}</div>
            <div>{{moneyAll}}</div>
            <button @click='add'>+1</button>

new Vue({
            el: '#app',
            data: {
                books: [
                    {
                        name: 'a',
                        money: 23
                    },
                    {
                        name: 'b',
                        money: 45
                    },
                    {
                        name: 'c',
                        money: 26
                    }
                ],
                moneyAll: 0
            },
            methods: {
                all() {
                    let a = 0
                    this.books.forEach(p => {
                        a = a + p.money
                    })
                    return a
                },
                add() {
                    this.books.forEach(p => {
                        p.money++
                    })
                }
            },
            computed: {
                all2() {
                    let a = 0
                    this.books.forEach(p => {
                        a = a + p.money
                    })
                    return a
                }
            },
            watch: {
                books: {
                    handler(val) {
                        let a = 0
                        this.books.forEach(p => {
                            a = a + p.money
                        })
                        this.moneyAll = a
                    },
                    deep: true,
                    immediate: true
                },
            },

deep

当需要监听的数据是一个对象或是数组是，普通的watch方法无法监听到对象和数组内部的改变，只有data中的数据才能够监听到变化，这个时候就需要用到deep属性对对象或数组进行深度监听，这样当对象或数组里面的某一个发生变化，那watch也能够监听到。

immediate和handler

使用watch要注意，就是当值第一次绑定时，不会立即执行监听函数，只有值发生改变才会执行。如果需要在一开始就需要计算的值时，就需要用到immediate属性。