Vue -- 數據監聽

時間 2019-12-06

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