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-11-21 15:26  九月江  阅读(166)  评论(0)  编辑  收藏  举报