Vue2基础篇-11-监视属性

最新推荐文章于 2024-07-16 09:35:10 发布

Alan0517

最新推荐文章于 2024-07-16 09:35:10 发布

阅读量353

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Hmj050117/article/details/128218721

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. demo1- 使用点击事件完成

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> 监视属性-天气案例</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>今天天气很{{info}}</h3>
        <!-- <button @click="changeWeather">切换天气</button> -->

        <!-- 如果是非常简单的表达式，也可以这样写，因为它是从vm上找，vm上存在的都能这样玩，但是还是建议使用方法 -->
        <button @click="isHot = !isHot">切换天气</button>
    </div>
    <script text="text/javascript">
        new Vue({
            el: "#root",
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
        })
    </script>
</body>
</html>

2. demo2-使用监视属性完成

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>监视属性-天气案例-watch</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>今天天气很{{info}}</h3>
        <button @click="{{changeWeather()}}">切换天气</button>
    </div>
    <script text="text/javascript">
        const vm = new Vue({
            el: "#root",
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
            // watch: {
            //     immediate: true,  //默认是false,当改成true时,使用场景就是初始化时，让handler调用一下
            //         //handler什么时候调用？当isHot发生变化时
            //          除了可以监视data内的属性之外，computed里面的方法属性也可以监视
            //         handler(newValue, oldValue) {
            //             console.log('isHot被修改了', newValue, oldValue);
            //     }
            // }
        })
        //除了在vm里面可以写watch监视之外，在外面也可以这样写
        vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }

        })

        /**
         *    监视属性watch:
         * 
         *      1. 当被监视的属性变化时,回调函数自动调用，进行相关操作；
         *      2. 监视的属性必须存在，才能进行监视！！
         *      3. 监视的两种写法:
         *         1. new Vue时传入watch 配置
         *         2. 通过vm.$watch监视
         *
    </script>
</body>
</html>

3. 深度监视

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>监视属性-天气案例-深度监视-watch</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>数字为{{numbers.a}}</h3>
        <button @click="{{numbers.a++}}">切我数字自增</button>
    </div>
    <script text="text/javascript">
        const vm = new Vue({
            el: "#root",
            data: {
                numbers: {
                    a: 1,
                    b: 1
                }
            },
            watch: {
                //监视多级结构中某个属性的变化，这里需要注意，vue里面的key都是字符串，只是我们有时候简写，把字符串的逗号省略了

                // 'numbers.a': {
                //     handler() {
                //         console.log("number被修改了")
                //     }
                // },

                //这样写表面看是会监视numbers的内部所有数据的变化，其实不是，它监视的是numbers这个整体的地址，而不是里面具体的元素的变化
                numbers: {
                    deep: true,  //要想监测到具体某个元素的变化，需要打开深度监测
                    handler() {
                        console.log("number被修改了")
                    }
                }
            }
        })
        /**
         * 深度监视
         *
         *   1. Vue中的watch默认不监测对象内部值的改变(一层)；
         *   2. 配置 deep:true 可以监测对象内部值改变(多层)；
         *
         * 备注：
         *
         *    1. Vue自身可以监测对象内部值得改变，但Vue提供的watch默认不可以；
         *    2. 使用watch时根据数据的具体结构，决定是否采用深度监视
         *
    </script>
</body>
</html>

4. 深度监视简写

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>监视属性-天气案例-深度监视-watch-简写</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>数字为{{numbers.a}}</h3>
        <button @click="{{numbers.a++}}">切我数字自增</button>
    </div>
    <script text="text/javascript">
        const vm = new Vue({
            el: "#root",
            data: {
                numbers: {
                    a: 1,
                    b: 1
                }
            },
            // watch: {
            //     //简写
            //     numbers(newValue, oldValue) {
            //         immediate: true  //初始化时让handker调用一下
            //         deep: true  //深度检测  
            //         console.log('number被修改了', newValue, oldValue)
            //     }
            // }
        })
        //简写
        vm.$watch('numbers', function (newValue, oldValue) {
            console.log('number被修改了', newValue, oldValue)
        })
    </script>
</body>
</html>

5. computed和watch的区别

        //计算属性与监视属性(侦听属性比对)  https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7
       /**
        *   computed和watch 之间的区别：
        *      1. computed能完成的功能，watch都可以完成。
        *      2. watch能完成的功能，computed不一定能完成，比如 watch可以进行异步操作；
        *
        * 两个重要的小原则：
        *
        *     1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件 实例对象。
        *     2. 所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象