当前位置：首页 > news >正文

Vue——认识day05_监视属性

news 来源：原创 2024/9/19 14:33:52

1.天气案例介绍以及初步实现

2.监视属性天气案例的实现

3.深度监视

4.监视的简写形式

5.姓名案例的监视属性实现

6.watch和computed对比

1.天气案例介绍以及初步实现

这段代码实现了一个简单的天气选择功能。页面中有一个标题和一个按钮，点击按钮可以切换天气的显示。默认显示晴天，点击按钮后会切换到雨天，并在副标题中显示当前选择的天气。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气案例</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h1>你是喜欢晴天还是雨天</h1><h2>我喜欢{{weatherInfo}}天</h2><button @click="changeWeather">切换天气</button><!-- <button @click="weather = !weather">切换天气</button> --></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{// true代表为晴天晴天，否则为雨天weather:true},computed:{weatherInfo(){return this.weather?'晴':'雨'}},methods: {changeWeather(){this.weather = !this.weather}},});
</script>
</html>

2.监视属性天气案例的实现

监视属性watch:

当被监视的属性变化时，回调函数会自动调用，可以在回调函数中进行相关操作。
要进行监视的属性必须存在，才能进行监视。
监视属性有两种写法： (1) 在创建Vue实例时传入watch配置对象，其中键是被监视的属性名称，值是对应的回调函数。 (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><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h1>你是喜欢晴天还是雨天</h1><h2>我喜欢{{weatherInfo}}天</h2><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{// true代表为晴天晴天，否则为雨天weather:true},// 监视属性watch:{weather:{// 初始化时让handler被触发immediate:true,// 当weather发生改变的时候被调用handler(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)} }},computed:{weatherInfo(){return this.weather?'晴':'雨'}},methods: {changeWeather(){this.weather = !this.weather}},});// 第二种实现监视的方法
/*     vm.$watch('weather',{// 初始化时让handler被触发immediate:true,// 当weather发生改变的时候被调用handler(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)}  }) */
</script>
</html>

3.深度监视

深度监视是指在Vue中使用watch来监测对象内部值的改变。默认情况下，Vue的watch只会监测对象的第一层属性变化。但是可以通过配置deep:true来实现对对象内部值的多层监测。需要注意的是，Vue自身是可以监测对象内部值的改变的，但是Vue提供的watch默认是不会进行深度监视的。在使用watch时，根据数据的具体结构决定是否需要采用深度监视。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气案例</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h1>你是喜欢晴天还是雨天</h1><h2>我喜欢{{weatherInfo}}天</h2><button @click="iLikeYou">心中的秘密</button><button @click="changeWeather">切换天气</button><hr><h3>a:{{numbers.a}}</h3><button @click="numbers.a++">点我a+1</button><br><h3>b:{{numbers.b}}</h3><button @click="numbers.b++">点我b+1</button></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{// true代表为晴天晴天，否则为雨天weather:true,numbers:{a:1,b:1}},// 监视属性watch:{weather:{// 初始化时让handler被触发//    immediate:true,// 当weather发生改变的时候被调用handler(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)} },// 监视多级结构某个属性的变化
/*             'numbers.a':{handler(){console.log('a改变了')}} */numbers:{// 开启即可监视多级结构中所有属性的变化deep:true,handler(){console.log('numbers改变了')}}},computed:{// 计算属性weatherInfo(){return this.weather?'晴':'雨'}},methods: {changeWeather(){this.weather = !this.weather},iLikeYou(){alert('我喜欢你(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤')}},});// 第二种实现监视的方法
/*     vm.$watch('weather',{// 初始化时让handler被触发immediate:true,// 当weather发生改变的时候被调用handler(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)}  }) */
</script>
</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><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h1>你是喜欢晴天还是雨天</h1><h2>我喜欢{{weatherInfo}}天</h2><button @click="iLikeYou">心中的秘密</button><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{// true代表为晴天晴天，否则为雨天weather:true,},// 监视属性watch:{// 正常写法
/*             weather:{// 初始化时让handler被触发//    immediate:true,// 深度监视//    deep:true,handler(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)} }, */// 简写的前提就是没有其他的配置项
/*             weather(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)} */},computed:{// 计算属性weatherInfo(){return this.weather?'晴':'雨'}},methods: {changeWeather(){this.weather = !this.weather},iLikeYou(){alert('我喜欢你(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤')}},});// 第二种实现监视的方法,完整写法
/*     vm.$watch('weather',{// 初始化时让handler被触发immediate:true,// 当weather发生改变的时候被调用handler(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)}  }) */// 简写vm.$watch('weather',function(newValue,oldValue){console.log('weather:',oldValue,'被修改为了',newValue)})
</script>
</html>

5.姓名案例的监视属性实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_监视属性实现</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><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></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{firstName:'W',lastName:'J',fullName:'W-J'},// 计算属性computed:{},// 监视属性watch:{firstName:{handler(newFirstName){this.fullName = newFirstName + '-' + this.fullName.split('-')[1]}},lastName:{handler(newLastName){this.fullName = this.firstName + '-' + newLastName}}}});
</script>
</html>