园龄：3年5个月粉丝：9 关注：0

第一章 Vue核心第九节监视属性

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

    4.深度监视：
        (1).Vue中的watch默认不监视对象内部值的改变(一层)；
        (2).配置deep:true可以监测对象内部值的改变(多层)。
        备注：
            (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以；
            (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

computed与watch之间的区别：
    1.computed能完成的功能，watch都能完成
    2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
    1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
    2.所有不被Vue所管理的函数（定时器函数的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数，
      这样this的指向才是vm 或组件实例对象

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视（侦听）属性-天气案例</title>
    <!--引入Vue-->
    <script src="../lib/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- @xxx='yyy' yyy可以是一个简单的js语句 isHot = !isHot; -->
        <button @click="change">切换天气</button>
        <hr/>
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++;">点我让a+1</button>
        <h3>b的值是：{{numbers.b}}</h3>
        <button @click="numbers.b++;">点我让b+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:2
                }
            },
            methods:{
                change(){
                    this.isHot = !this.isHot;
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎热':'凉爽';
                }
            },
            //监视属性的第一种写法
            watch: {
                //正常写法
                // isHot: {
                //     //immediate: true,//初始化时让handler调用一下
                //     //handler在isHot发生变化时调用
                //     handler(newValue, oldValue) {
                //         console.log('watch - isHot被修改了', newValue, oldValue);
                //     }
                // },
                // info: {
                //     //immediate: true,//初始化时让handler调用一下
                //     //handler在isHot发生变化时调用
                //     handler(newValue, oldValue) {
                //         console.log('watch - info被修改了', newValue, oldValue);
                //     }
                // },
                //简写  不能设置配置项
                isHot(newValue, oldValue){
                    console.log('watch - isHot被修改了', newValue, oldValue);
                },
                info(newValue, oldValue){
                    console.log('watch - info被修改了', newValue, oldValue);
                },
                // 'numbers.a':{
                //     handler(){
                //         console.log('a的值加一');
                //     }
                // }
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers被改变了');
                    }
                },
            }
        });

        //监视属性的第二种写法
        //正常写法
        // vm.$watch('isHot',{
        //     immediate:true,//初始化时让handler调用一下
        //     //handler在isHot发生变化时调用
        //     handler(newValue,oldValue){
        //         console.log('isHot被修改了',newValue,oldValue);
        //     }
        // });
        // vm.$watch('info',{
        //     immediate:true,//初始化时让handler调用一下
        //     //handler在isHot发生变化时调用
        //     handler(newValue,oldValue){
        //         console.log('info被修改了',newValue,oldValue);
        //     }
        // });
        //简写  不能设置配置项
        // vm.$watch('isHot',function(newValue,oldValue){
        //     console.log('isHot被修改了',newValue,oldValue);
        // });
        // vm.$watch('info',function(newValue,oldValue){
        //     console.log('info被修改了',newValue,oldValue);
        // });
    </script>
</body>
</html>

本文作者：何以之

本文链接：https://www.cnblogs.com/serendipity-echo/articles/15407944.html

posted @ 2021-10-14 18:24 何以之阅读(108) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

何以之

第一章 Vue核心第九节监视属性

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

何以之

第一章 Vue核心 第九节 监视属性

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

第一章 Vue核心第九节监视属性