监视属性

当被监视的属性发生变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视
两种写法：
- new Vue时传入watch配置
- 通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_watch实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    姓：<input type="text" v-model="firstName"> <br><br>
    名：<input type="text" v-model="lastName"> <br><br>
    姓名：<span>{{fullName}}</span>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
            fullName: '张-三'
        },
        watch: {
            firstName(newValue) {
                //定时器指定的回调不是Vue实例管理的，此处可以用箭头函数
                setTimeout(() => {
                    this.fullName = newValue + '-' + this.lastName
                }, 1000)
            },
            lastName(newValue) {
                this.fullName = this.firstName + '-' + newValue
            }
        }
    })
</script>
</body>
</html>

深度监视：

Vue中的watch默认不监测对象内部值得改变（一层）；
配置deep:true可以监测对象内部值改变（多层）

注：Vue自身可以监测对象内部值得改变，但Vue提供的watch默认不可以

使用watch时应根据数据的具体结构，决定是否采用深度监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例_深度监视（简写）</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2> <br>
    <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            //正常写法
            /* isHot: {
                //immediate: true, //初始化时调用handler
                //deep: true, //深度监视
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            }, */
            //简写（当监视属性不需要配置其他选项时(immediate,deep)，可以使用简写）
            /* isHot(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue)
            } */
        }
    })

    //正常写法
    /* vm.$watch('isHot', {
        //immediate: true, //初始化时调用handler
        //deep: true, //深度监视
        handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue)
        }
    }) */
    //简写
    vm.$watch('isHot', function (newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue);
    })
</script>
</body>
</html>

computed与watch的区别：

computed能完成的功能，watch也能完成；watch能完成的功能，computed不一定能完成，如：watch可以进行异步操作
所有被Vue管理的函数，最好写成普通函数，这时this的指向才是vm或组件实例对象
所有不被Vue管理的函数（定时器回调，ajax的回调，Promise的回调等），最好写成箭头函数，这样this的指向才是vm或组件实例对象（涉及Vue原型链）

评论 (0)