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>

　　- push:html

　　　　改变数据的长度的时候能够监听到数据改变, 新旧值是同样的vue

　　　　不能监听到数据里面值的改变, 深度监听也不能够npm

　　- $set:app

　　　　改变数据的长度的时候, 能够监听到数据改变,新旧值是不一样的,能够监听到数据里的值的变化函数

　　- watch:ui

　　　　该属性是在绑定 id= app的时候的实例化的Vue中的参数, 该参数对应的值是一个对象,该对象中this

　　　　包含的是须要被监听的 data 中存在且被定义了的对象,该对象中包含的参数有: handler,deep;spa

　　-handler: 对应函数,该函数,是对被监听属性的新旧值进行操做;.net

　　　　-参数解释:code

　　　　　　-val : 新值

　　　　　　-oldval: 旧值

　　　　- deep:是否开启深度监听