vue侦听器(引入vue.js写法)

首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906，下载后在html中引入：

侦听data里的数据变化：

方法格式：

<script>

    const vm=new Vue({

        el:"#app",

        data:{

            username:"张三",

            userList:[

                {"id":1,"name":"张三"},

                {"id":2,"name":"李四"}

            ],

            info:{

                username:'admin'

            }

        },

        //所有侦听都定义到watch里

        watch:{

            //本质是个函数，要监视那个数据的变化就把数据名作为方法名

            username(newVal,oldVal){

                console.log(newVal,oldVal);

            },

　　　　//如果要侦听的是对象的子属性的变化,则必须包裹一层单引号

　　      'info.username'(newVal){

                console.log(newVal)  

            }

        }

        })

</script>

缺点1:无法在刚进入页面的时候,自动触发
缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器

对象格式

<script>

    const vm=new Vue({

        el:"#app",

        data:{

            username:"张三",

            userList:[

                {"id":1,"name":"张三"},

                {"id":2,"name":"李四"}

            ],

            info:{

                username:'admin'

            }

        },

        //所有侦听都定义到watch里

        watch:{

            //定义对象格式的侦听器

            username:{

                handler(newVal,oldVal){

                    console.log(newVal,oldVal);

                },

                //默认选项是false，作用：控制侦听器刚进页面是否自动触发一次

                immediate:true

            },

            userList:{

                handler(newVal,oldVal){

                    console.log(newVal,oldVal);

                },

                //默认为false，开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器

                deep:true

            }

        }

        })

</script>

好处1:可以通过immediate选项,让侦听器自动触发
好处2:可以通过deep选项,让侦听器深度监听对象中每个属性的变变化