Vue数据监听

Vue数据的监听

Vue提供watchAPI可对数据进行监听：

为了防止错误，我们最好是使用app.$set()的方式取修改数组和对象的数据，保证Vue可以监听到数据的变化，从而发生视图变化；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{name}}
    <hr>
    {{hobby}}
    <hr>
    {{obj}}
    <hr>
    <button @click="my_click">点我</button>
</div>

<script src="vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "ggg",
            hobby: [1, 2, 3, 4],
            obj: {city: "北京", food: "面条"}
        },
        methods: {
            my_click: function () {
                // this.name = "hhh"  // 注意测试数组和对象时，把这个注释掉，要不然每次这个数据变化，
                //                         Vue监听到必然会对页面数据再次修改，这样后面的也会修改
                this.hobby.push(55); // 此时索引发生变化，Vue可以监听到
                // this.hobby[0] = "sdfsdf"  // 此时索引没发生变化，值虽然修改了 ，Vue不能监听到

                //使用这种方式，修改数组/对象，Vue才能监听到， 第一个参数时那个值，第二个时数组的索引，第三个是要要修改的数据
                app.$set(app.hobby, 0, "sdfsdfds");

                // 对于对象，直接修改原来的键值，使用deep: true深监听，就可以监听到
                this.obj.city= "陕西";

                // 添加新的键值对，不能监听到,数据变了，但是不能监听到
                // this.obj["name"] = "hahhaa";

                // 所以也使用app.$set的方式
                app.$set(app.obj, "city", "哈哈哈哈")

            }
        },
        watch: {
            name: {
                handler: function (val, oldVal) {
                    console.log("name变了");
                    console.log(val);
                    console.log(oldVal);
                }
            },
            hobby: {
                handler: function (val, oldVal) {
                    console.log("hobby变了");
                    console.log(val);
                    console.log(oldVal);
                }
            },
            obj: {
                handler: function (val, oldVal) {
                    console.log("obj变了");
                    console.log(val);
                    console.log(oldVal);
                },
                deep: true
            },
        }
    })
</script>
</body>
</html>

 

posted @ 2018-09-12 21:54  Mr.GLH  阅读(584)  评论(0)    收藏  举报
Top↑