008-watch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch</title>
</head>

<body>
    <div id="div">
        <p>num1<input type="text" v-model='num1'></p>
        <p>num2<input type="text" v-model='num2'></p>
        <p>obj.name<input type="text" v-model='obj.name'></p>
        <p>obj.age<input type="text" v-model='obj.age'></p>
  

    </div>
    <script src="./vue.js"></script>
    <script>
        var aa = new Vue({
            el: '#div',
            data() {
                return {
                    num1: 0,
                    num2: 0,
                    obj: {
                        name:'aaaa',
                        age:11
                    }
                }
            },
            methods: {

            },
            watch: {
                //监听 变量 num1 的变化  ，第一个参数是变化后的值，第二个参数是变化前的值
                // 监听基本数据类型
                num1(newnum1, oldnum1) {
                    console.log("newnum1", newnum1)
                    console.log("oldnum1", oldnum1)
                },
                /**
                 * 监听引用数据类型
                 * */
                obj: {
                    handler(newobj, oldobj) {
                        // oldobj  newobj  结果是一样的    
                        console.log("newobj",newobj)
                        console.log("oldobj",oldobj)
                    },
                    // 深度监听   监听对象的属性
                    deep:true
                }

            }
        })
    </script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容