Vue基础--监视属性

最新推荐文章于 2024-08-14 18:44:30 发布

WikL116824

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量132

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/WikL116824/article/details/125794635

版权

本文详细介绍了Vue.js中的监视属性（watch）的定义、写法和实例，包括如何进行深度监视。强调了在使用watch时，当对象内部值改变时的处理，并通过姓名实例展示了监视属性与计算属性（computed）的区别。watch不仅能完成计算属性的功能，还可以执行异步操作，且在处理this指向时需要注意普通函数和箭头函数的选择。

摘要由CSDN通过智能技术生成

一.定义

&emssp;当被监视的属性变化时，回调函数自动调用进行相关操作

二.写法

new Vue时传入watch配置
通过vm.$watch监视

三.实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
    
    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true  //表示天气热
            },
            computed:{
                info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                isHot:{
                    // handle什么时候调用? 当isHot发生改变时
                    handle(newValue,oldValue){
                        console.log(newValue,oldValue)
                    }
                }
            }
        
        })
        // 这样的监视和上面的watch是一样的效果
        // vm.$watch('isHot',{
        //     handle(newValue,oldValue){
        //                 console.log(newValue,oldValue)
        //             }
        // })
        
    </script>
</body>
</html>

四.深度监视

Vue中的watch默认不检测对象内部值得改变（一层）
配置deep: true可以检测对象内部值得改变
备注：
Vue自身可以检测对象内部值得改变，但Vue提供得watch默认不允许，使用watch时根据数据得具体结构，决定是否采用深度监测

五.姓名实例（监视属性）

在前面得计算属性中用了计算属性来写得实例，这次用监视属性来改写一下吧。

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例（监视属性）</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstName">
        名: <input type="text" v-model="lastName">
        姓名: <span>{{fullName}}</span>
    </div>

    <script>
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三',
                fullName:'张 - 三'
            },
            watch:{
                firstName(newValue){
                    this.fullName = newValue + '-' + this.lastName
                },
                lastName(newValue){
                    this.fullName = this.firstName + '-' + newValue
                }
            }
        })
    </script>
</body>
</html>