vue组件watch

就是一篇记录关于vue 的watch使用记录：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>watch</title>
    <style type="text/css">
    </style>
</head>
<body>
    <div id="app">
        <h4>arr1</h4>
        <p v-for="(item,index) in arr1" :key="index">{{ item.a }}</p>
        <p>------------------------------ 分割线 -----------------------</p>
        <h4>arr2</h4>
        <p v-for="(item) in arr2" >{{ item }}</p>

        <p>------------------------------ 分割线 -----------------------</p>
        <p>a-{{a}}</p>

        <p>------------------------------ 分割线 -----------------------</p>
        <p>o.a1-{{o.a1}}</p>

        <p>------------------------------ 分割线 -----------------------</p>
        <p>o.a2-{{o.a2}}</p>

        <p>------------------------------ 分割线 -----------------------</p>
        <button @click="creadNum">改变</button>   
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
     var app = new Vue({
        el: '#app',
        data() {
            return {
                arr1:[{a:1},{a:2},{a:3},{a:4}],
                arr2:[1,2,3,4], 
                a:1,
                o:{
                    a1:"1",
                    a2:"2"
                }
            }
        },
        watch: {
            arr1:{ // 监听一个含有对象的数组
                handler:function(val,oldval){
                    console.log('val',val,'oldval',oldval);
                },
                deep: true
            },
            arr2:{
                // 如果监听的该数组是一个简单数组 那么在watch里面是获取不到变化值的 具体文档请移步 https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B 
                handler:function(val,oldval){
                    console.log('val',val,'oldval',oldval);
                },
                deep: true
            },
            o:{ // watch 整个对象
                handler:function(val,oldVal){
                    console.log("o-val:",val,"o-oldval",oldVal);
                },
                deep: true
            },
            a(val,oldval){ // watch 一个单独的数据
                console.log('val-',val,'oldval-',oldval)
            },
            'o.a1'(val,oldval){ // watch 某一个对象中属相
                console.log('val',val,"oldval",oldval);
            }
        },
        methods: {
            creadNum() {
                this.arr1[0].a='aaa';
                this.arr2[0]='aaa';
                this.a = 10;
                this.o.a1 ="100";
                this.o.a2 ="1000";
            }
        }
     })
</script>
</html>
猜你喜欢
