Vue數據的監聽

時間 2019-12-08

標籤 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>