属性侦听器

属性侦听器
可以监听data里的属性值，当属性值发生变化时，会使watch里相应的函数触发

• 修改了与监听无关的属性:页面会重新渲染,但是侦听器属性不会触发
• 修改了引用数据内部的属性值:页面会重新渲染,但是侦听器属性不会触发
• 只有修改了引用数据的引用 才能触发侦听器属性
• 在watch对象里面，方法要与监听的属性一致

   <style>
        .box {
            width: 200px;
            height: 50px;
            background-color: aquamarine;
            text-align: center;
            margin-top: 10px;
        }
    </style>
    <div id="app">
        <div @click="fn" class="box">{{msg}}</div>
        <div @click="fn1" class="box">{{obj}}</div>
    </div>
    <script>
        new Vue({
                    el: "#app",
                    data: {
                        msg: "信息",
                        lu: 7,
                        obj: { name: "lay",age: "22"}
                    },
                    methods: {
                        fn() {
                            this.msg = "修改信息"
                            this.lu++ //修改了与监听无关的属性:页面会重新渲染,但是侦听器属性不会触发"
                            console.log(this.msg, this.lu);
                        },
                        fn1() {
                            this.obj.age = 18
                            //   this.obj={name:"chanYeol",age:18} //只有修改了引用数据的引用 才能触发侦听器属性
                            console.log(this.obj);
                            this.obj.name = "D.O" //若想触发侦听器属性,必须深度监听
                        }
                    },
                    // 监听属性，里面方法的名字要与监听的属性保持一致
                    watch: {
                        // 当被监听的属性的值发生变化时，该方法会被触发
                        msg() {
                            console.log("信息修改了就打印");
                        },
                        obj() {
                            console.log("obj修改了就打印");
                        },
                        // 深度监听
                        obj: {
                            deep: true,
                            handler: () => {
                                console.log("obj改变了")
                            }
                        }
                    }})
    </script>