liang14658fox

Appearance

语法 ​

js
export default {
    data() {
        DataName:null,
    },
    watch: {
        DataName(newVal,oldVal) {
            // ...
        },
    }
}
export default {
    data() {
        DataName:null,
    },
    watch: {
        DataName(newVal,oldVal) {
            // ...
        },
    }
}
js
export default {
    data() {
        DataName:null,
    },
    watch: {
        DataName: {
            handler(newVal,oldVal) { 
                // ...
            }
        }
    }
}
export default {
    data() {
        DataName:null,
    },
    watch: {
        DataName: {
            handler(newVal,oldVal) { 
                // ...
            }
        }
    }
}

深度侦听 ​

侦听对象时，对象内部属性变化watch无法侦听到

  • 深度监听，多用于对象等深层次的数据
js
export default {
    data: {
        DataName: {
            name:'谈畅',
            age:18,
        }
    },
    watch: {
        DataName: {
            handler(newVal,oldVal) {
                // ...
            },
            deep: true, // 深度侦听开启
            immediate: true, // 立即执行，进入页面时直接触发一次
        },
        ...
    }
}
export default {
    data: {
        DataName: {
            name:'谈畅',
            age:18,
        }
    },
    watch: {
        DataName: {
            handler(newVal,oldVal) {
                // ...
            },
            deep: true, // 深度侦听开启
            immediate: true, // 立即执行，进入页面时直接触发一次
        },
        ...
    }
}
html
<body>
    <div id="app">
        <input type="text" v-model="DataName.name">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                DataName: {
                    name: ''
                }
            },
            watch: {
                'DataName.name' (newval,oldVal) {
                    // ...
                }
            }
        })
    </script>
</body>
<body>
    <div id="app">
        <input type="text" v-model="DataName.name">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                DataName: {
                    name: ''
                }
            },
            watch: {
                'DataName.name' (newval,oldVal) {
                    // ...
                }
            }
        })
    </script>
</body>

侦听数组（一维、二维） ​

js
js