3.Vue监听

基本使用

watch 可以监听 data 的数据。当 data 数据发生改变时执行函数。这个函数会传入两个参数，分别是 newVal 和 oldVal，也就是改变前和改变后的值。

1：定义测试数据和监听。

<script src="js/vue.global.js"></script>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                title: "你好，Vue3"
            }
        },
        watch: {
            title(newVal, oldVal) {
                console.log("newVal:", newVal, "oldVal:", oldVal);
            }
        }
    }).mount("#app");
</script>

2：实现 watch 监听。

<div id="app">
    <h1>{ {title} }</h1>
</div>

3：测试结果。

deep 与 immediate 属性

vue 默认关闭对象改变属性的监听。因为考虑到性能的问题，对象改变属性是非常频繁的操作，而且深度是不可控的。如果需要监听，就需要手动开启对象的深度监听，也就是设置 deep 为 true。

vue 默认情况下设置 immediate= false，也就是不会立即去加载监听对象的处理函数，只有改变 data 值才会触发。如果需要 vue 一加载完就立刻触发，就要手动设置 immediate 为 true。

1：定义测试数据和监听。

<script src="js/vue.global.js"></script>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                user: {
                    id: 1,
                    person: { pid: 1 },
                    username: "yppah",
                    age: 18
                }
            }
        },
        watch: {
            user: {
                handler: function (newVal, oldVal) {
                    console.log("newVal:", newVal);
                    console.log("oldVal:", oldVal);
                },
                deep: true,
                immediate: true // watch默认不会立即加载 只有data改变才会触发和执行 如果想立即加载 就修改为true
            }
        }
    }).mount("#app");
</script>

2：实现 watch 监听。

<div id="app">
    <h1>{ {user.id} } == { {user.username} } == { {user.age} }</h1>
    <h3>{ {user.person.pid} }</h3>
</div>

3：测试结果。