Vue 数据监听 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    {{hobby}}
    {{xuge_obj}}

    <button @click="my_click">点击改变数据</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "旭哥",
            hobby: ["唱歌", "跳舞", "请客吃饭"],
            xuge_obj: {
                obj1: "王铁锤",
                obj2: "李刚蛋"
            }
        },
        methods: {
            my_click: function () {
                // this.name = "病变"
                // this.hobby.push("烫头")
                // this.hobby[0] = "狼嚎"
                // console.log(this.hobby)
                // 用下面这种方法改变数据里的值
                // app.$set(this.hobby, 0, "狼嚎")
                this.xuge_obj.obj1 = "小粉嫩"
            }
        },
        watch: {
            name: {
                handler: function (val, oldVal) {
                    console.log(val)
                    console.log(oldVal)
                }
            },
            // push改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的
            // 不能监听到数据里值的改变 深度监听也不可以 除非用$set
            hobby: {
                handler: function (val, oldVal) {
                    console.log(val)
                    console.log(oldVal)
                },
                // deep: true
            },
            xuge_obj: {
                handler: function (val, oldVal) {
                    console.log(val)
                    console.log(oldVal)
                },
                deep: true
            }
        }
    })
</script>
</body>
</html>

- push：

改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的；
不能监听到数据里值的改变 深度监听也不可以

- $set：

改变数据的长度的时候 可以监听到数据改变 新旧值是不同的，可以监听到数据里的值的变化

- watch：

该属性是在绑定 id=app的时候的实例化的Vue中的参数，该参数对应的值是一个对象，
该对象中包含的是需要被监听的 data 中存在且被定义了的对象，该对象中包含的参数有：handler， deep；

　　- handler：对应函数， 该函数，是对被监听属性的新旧值进行操作；

　　　　- 参数解释：

　　　　　　- val： 新值；

　　　　　　- oldVal：旧值；

　　- deep：是否开启深度监听；

 

posted @ 2018-10-24 21:06  浮生凉年  阅读(611)  评论(0)  编辑  收藏  举报