监听属性

事件的简单写法

说明

通过 @click 绑定单击事件时，等号后面不一定要跟上事件名，也可以是一个简单的语句。
例如，对一个值取反，或者是算术运算等。

案例

需求：点击按钮切换天气。

代码

html

<body>
    <div id="root">
        <h3>今天天气很{{ state }}</h3>
        <button @click="isHost = !isHost">切换天气</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                isHost: true
            },
            computed: {
                state(){
                    return this.isHost ? '炎热' : '凉爽'
                }
            }
        })
    </script>
</body>

代码第四行，给按钮绑定单击事件，等号后面并不是函数名，而是对 isHost 进行取反，当 isHost 值改变时，计算属性自动调用，返回天气情况，并渲染到 h3 标签中。

监听属性 watch

知识点

当监听属性的属性值发生变化时，回调函数自动被调用，进行相关操作。
被监听的属性必须存在，可以是 data 中的普通属性，也可以是 computed 中的计算属性。
监听属性的两种写法
- new Vue 时传入 watch 配置。
- 通过 vm.$watch 监听。

代码实现

html

<body>
    <div id="root">
        <h3>今天天气很{{ state }}</h3>
        <button @click="isHost = !isHost">切换天气</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHost: true,
                state: '炎热'
            },
            watch: {
                isHost: {
                    handler(newValue, oldValue) {
                        this.state = newValue ? '炎热' : '凉爽';
                        console.log('isHost 的值发生了改变','新的值是：' + newValue, '旧的值是：' + oldValue);
                    }
                }
            }
        })

        vm.$watch('isHost',{
            handler(newValue, oldValue) {
                this.state = newValue ? '炎热' : '凉爽';
                console.log('isHost 的值发生了改变','新的值是：' + newValue, '旧的值是：' + oldValue);
            }
        })
    </script>
</body>

深度监听

知识点

Vue 中的 watch 配置项默认不见时对象内布值得改变（一层）
配置 deep: true 后可以检测对象内部值的改变（多层）
Vue 自身可以检测兑现内部值的改变，但 Vue 提供的 watch 默认不可以，开启 deep 后才可以深度监听。
使用 watch 时，根据数据的具体结构，决定是否采用深度监听。

代码实现

代码

html

<body>
    <div id="root">
        <h3>a 的值为：{{ numbers.a }}</h3>
        <button @click="numbers.a++">点我 a + 1</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                numbers: {
                    a: 10,
                    b: 20
                }
            },
            watch: {
                numbers: {
                    deep: true,
                    handler(newValue, oldValue) {
                        console.log('numbers 内部值发生变化！');
                    }
                }
            }
        })
    </script>
</body>

运行结果

监听属性简写

什么时候可以简写

当被监听的属性配置项里只有 handler 时，也就是不考虑 deep 等其他配置项时可以简写。

简写代码

html

<body>
    <div id="root">
        <h3>今天天气很{{ state }}</h3>
        <button @click="isHost = !isHost">切换天气</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHost: true,
                state: '炎热'
            },
            watch: {
                isHost(newValue, oldValue) {
                    this.state = newValue ? '炎热' : '凉爽';
                    console.log('isHost 的值发生了改变', '新的值是：' + newValue, '旧的值是：' + oldValue);
                }
            }
        })

        vm.$watch('isHost', (newValue,oldValue) => {
            this.state = newValue ? '炎热' : '凉爽';
            console.log('isHost 的值发生了改变','新的值是：' + newValue,'旧的值是：' + oldValue);
        })
    </script>
</body>

计算属性 VS 监听属性

区别

computed 能完成的功能，watch 都可以完成。
watch 能完成的功能，computed 不一定能完成。例如 watch 可以进行异步操作。

原则

所有被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 VM 或组件实例对象。
所有不被 Vue 管理的函数（例如：定时器回调函数，ajax 回调函数，Promise 的回调函数）最好写成箭头函数，这样 this 的指向才是 VM 或组件实例对象。

事件的简单写法 ​

说明 ​

案例 ​

监听属性 watch ​

知识点 ​

代码实现 ​

深度监听 ​

知识点 ​

代码实现 ​

监听属性简写 ​

什么时候可以简写 ​

简写代码 ​

计算属性 VS 监听属性 ​

区别 ​

原则 ​

事件的简单写法

说明

案例

监听属性 watch

知识点

代码实现

深度监听

知识点

代码实现

监听属性简写

什么时候可以简写

简写代码

计算属性 VS 监听属性

区别

原则