Vue watch侦听属性

<script src="../libs/vue.js"></script>

<div id="app">

    {{fullName}}

    <br>

    {{lists}}

</div>

<script>

    var vue = new Vue({

        el: "#app",

        data: {

            firstName: 'Foo',

            lastName: 'Bar',

            fullName: 'FooBar',

            lists: [1, 2, 3]

        },

        watch: {

            /**

            * 第一个参数val 改变后的值

            * 第二个参数oldVal 改变前的值

            */

            firstName(val, oldVal) {

                console.log('val', val)

                console.log('oldVal', oldVal)

                this.fullName = val + this.lastName

            },

            lastName(val) {

                this.fullName = this.firstName + val

            },

            //数组或对象侦听数据变化的方式

            lists: {

                handler(val) {

                    console.log('val', val)

                },

                deep: true

            }

        }

    })

</script>