VUE监视属性

听风吹麦浪

已于 2024-03-06 22:26:20 修改

阅读量410

点赞数 9

文章标签： vue.js 前端 javascript

于 2024-03-05 22:56:05 首次发布

本文链接：https://blog.csdn.net/qq_51550150/article/details/136492471

版权

本文通过示例展示了如何在Vue应用中使用数据绑定、计算属性以及watch功能来监控和更新状态。包括基本的属性监听、计算属性的实时更新以及深度监视多级对象的变化。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}},{{x}}</h2>
        <!-- 模板中可以读取到vm的所有属性，不需要this -->
        <button @click="changeWeather">切换天气</button><br/><br>
        <button @click="isHot=!isHot">切换天气</button>
        
    </div>
</body>


<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示。
    const vm =new Vue({
        el:'#root',
        data:{
            isHot:true,
            x:1
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods:{
            changeWeather(){
                //正常函数的this.都能读取到vm中所有的属性
                this.isHot =!this.isHot
                this.x++
            }
        }
    })
</script>





</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例_监控属性</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}},{{x}}</h2>
        <button @click="changeWeather">切换天气</button><br/><br>
    </div>
</body>
<!-- 监视属性watch
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：(1).new Vue时传入watch配置
                 (2).通过vm.$watch监视



-->

<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示。
    const vm =new Vue({
        el:'#root',
        data:{
            isHot:true,
            x:1
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods:{
            changeWeather(){
                //正常函数的this.都能读取到vm中所有的属性
                this.isHot =!this.isHot
                this.x++
            }
        },
        // watch:{//检测计算属性或者data属性都可以
        //     info:{
        //         immediate:true,//默认是false，当设置为true时，页面刷新就立刻调用hander()方法。
        //         //handler什么时候调用？当isHot发生改变时。
        //         handler(newValue,oldValue){
        //             console.log('info被修改了',newValue,oldValue)
        //         }
        //     }
        // }  
    }) 
    vm.$watch('ishot',{
            immediate:true,
            handler(newValue,oldValue){
                comsole.log('isHot被修改',newValue,oldValue)
            }
        })
</script>





</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例_深度监视</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button><br/><br>
        <hr/>
        <h3>a的值是:{{numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+1</button>
        <h3>a的值是:{{numbers.b}}</h3>
    <button @click="numbers.b++">点我让b+1</button>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示。
    const vm =new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods:{
            changeWeather(){
                //正常函数的this.都能读取到vm中所有的属性
                this.isHot =!this.isHot
                this.x++
            }
        },
        watch:{//检测计算属性或者data属性都可以
            isHot:{
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },
            numbers:{
                //监视多级结构中所有属性的变化
                deep:true,
                handler(){
                    console.log("numbers改变了")
                }
            }
        }  
    }) 
</script>





</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例_深度监视</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button><br/><br>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示。
    const vm =new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        methods:{
            changeWeather(){
                //正常函数的this.都能读取到vm中所有的属性
                this.isHot =!this.isHot
                this.x++
            }
        },
        watch:{//检测计算属性或者data属性都可以
            // isHot:{
            //     handler(newValue,oldValue){
            //         console.log('isHot被修改了',newValue,oldValue)
            //     }
            // }
            //简写
            isHot(newValue,oldValue){
                console.log("isHot被修改了",newValue,oldValue)
            }
        }  
    }) 
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_watch实现</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model:value="firstName"> <br/><br>
        名：<input type="text" v-model:value="lastName"> <br/><br>
        姓名：<span>{{fullName}}</span><br/><br>
    </div>    
</body>
<!--computed和watch之间的区别：
    1.computed能完成的功能，watch都可以完成
    2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
    两个重要的小原则：
    1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是VM或者组件实例对象。
    2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数）
    最好写成箭头函数。这样this的指向才是vm或者组件实例对象。 
 -->

<script type="text/javascript">
    Vue.config.productionTip = false 
    const vm = new Vue({
        el:"#root",
        data:{
            firstName:"张",
            lastName:"三",
            fullName:"张-三"
        },
        watch:{
            firstName(newValue){
                setTimeout(()=>{
                    this.fullName=newValue+"-"+this.lastName
                },1000);
            },
            lastName(newValue){
                this.fullName=this.firstName+"-"+newValue
            }

        }
    })
</script>


</html>