Vue数据的监听 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/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:["q","w","e"],
            xuge_obj:{
                obj1:"12",
                obj2:"33"
            }
        },
        methods:{
            my_click:function () {
                //this.name = "xx"
                // this.hobby.push("汤")
                this.hobby[0] = "狼嚎"
                console.log(this.hobby)
            }
        },
        watch:{
            name:{
                handler:function (val,oldval) {
                    console.log(val),
                    console.log(oldval)
                }
            },
            //push改变数据的长度的时候，可以监听到数据改变 新旧值是一样的
            hobby:{
                handler:function (val,oldval) {
                    console.log(val),
                    console.log(oldval)
                },
                //deep为深度监听，深度监听也监听不到
                deep:true
            }
        }
    })
</script>
</body>
</html>

 

 

这个时候   this.hobby[0] = "狼嚎"  无法被监听到，需要将   this.name = "xx"打开，

因为这样就更改了数值，会重新渲染页面，this.hobby[0] = "狼嚎"便会被监听到并且渲染到页面

 

或者将this.hobby[0] = "狼嚎"  更改为   app.$set(this.hobby,0,"狼嚎")也会点击后修改

 

 

在数据监听中数组有很多的坑

posted @ 2018-10-31 10:16  贾迪123  阅读(1442)  评论(0)  编辑  收藏  举报