9. 监视属性

最新推荐文章于 2024-05-20 23:37:52 发布

Sun Jiakai_凯

最新推荐文章于 2024-05-20 23:37:52 发布

阅读量237

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/s12345672/article/details/119762007

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

监视属性

1. 天气案例

<!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>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;

            new Vue({
                el: '#root',
                data: {
                    isHot:true
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
            })
        </script>
    </body>
</html>

2. 监视属性

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

<!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>
        </div>

        <script type="text/javascript">
            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:{
                //         handler(newValue, oldValue){
                //             console.log('isHot被修改了', newValue, oldValue)
                //         }
                //     }
                // }
            })
            vm.$watch('isHot',{
                immediate: true,    //初始化时让handler调用一下
                //当isHot发生改变时，handler被调用
                handler(newValue, oldValue){
                    console.log('isHot被修改了', newValue, oldValue)
                }
            })
        </script>
    </body>
</html>

3. 深度监视

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

<!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>
            <h2>a的值是 {{numbers.a}}</h2>
            <button @click="numbers.a++">点我让 a+1</button>
            <h2>b的值是 {{numbers.b}}</h2>
            <button @click="numbers.a++">点我让 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: 1
                    }
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                watch:{
                    isHot:{
                        //immediate: true,    //初始化时让handler调用一下
                        handler(newValue, oldValue){
                            console.log('isHot被修改了', newValue, oldValue)
                        }
                    },
                    //监视多级结构中某个属性的变化
                    numbers:{
                        deep: true,
                        handler(){
                            console.log('numbers的值发生了变化')
                        }
                    }
                }
            })
        </script>
    </body>
</html>

4. 监视属性简写

<!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>
        </div>

        <script type="text/javascript">
            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:{
                    //     //immediate: true,    //初始化时让handler调用一下
                    //     handler(newValue, oldValue){
                    //         console.log('isHot被修改了', newValue, oldValue)
                    //     }
                    // }
                    
                    //简写
                    isHot(newValue,oldValue){
					    console.log('isHot被修改了',newValue,oldValue,this)
				    }
                }
            })
        </script>
    </body>
</html>

5. 姓名案例 watch实现

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

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>
</html>

Sun Jiakai_凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9. 监视属性

监视属性1. 天气案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气案例</title> <!-- 引入V
复制链接

扫一扫