【Vue 快速入门系列】通过天气案例快速掌握监视属性
文章目录
-
- 前言
- 使用计算属性实现天气案例
- 使用监视属性实现天气案例
- 深度监视
- 监视属性的简写方式
- 使用监视属性实现姓名案例
前言
前面一篇博客提到了计算属性的使用，本篇博客将会使用计算属性实现一下简单的天气案例，然后引出监视属性，并学习深度监视，使用监视属性实现上一篇博客中的姓名案例，总的来说呢计算属性可以实现的东西，监视属性同样可以实现。反过来监视属性可以实现的东西计算属性不一定可以实现。
先来看一下案例的效果（通过点击按钮，切换dom元素内展示的文字）
使用计算属性实现天气案例
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>Documenttitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="demo">
<h1>今天天气状态为{{cls}}！好>
<br>
<button @click="trans">点击切换天气button>
div>
body>
<script>
let vm=new Vue({
el:"#demo",
data:{
tag:true
},
methods:{
trans(){
this.tag=(!this.tag)
}
},
computed:{
cls(){
return this.tag?"晴天":"阴天"
}
}
})
script>
html>
使用监视属性实现天气案例
监视属性有如下特征：
监视属性使用关键字是watch,每一个监视属性配置中都有一个handler在监视的属性被改变时而进行回调
监视属性必须存在才可以进行监视
监视属性有两种写法：
new Vue的时候进行watch配置
通过对vue对象进行添加（使用$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>Documenttitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="demo">
<h1>今天的天气是{{info}}！h1>
<br>
<button @click="temp">点我进行天气切换button>
div>
body>
<script>
// 第一种方法：直接对vue对象进行配置
/*let vm=new Vue({
el:"#demo",
data:{
tag:true,
},
methods: {
temp(){
this.tag=!this.tag
}
},
computed:{
info(){
return this.tag?"晴天":"阴天"
}
},
watch:{
tag:{
immediate:true,//在页面刚开始加载的时候调用一下回调函数
handler(newv,oldv){
console.log("监视的值改变了(新旧值分别为:)",newv,oldv)
}
}
}
})
*/
//第二种方法：先创建对象然后进行动态配置
let vm=new Vue({
el:"#demo",
data:{
tag:true,
},
methods: {
temp(){
this.tag=!this.tag
}
},
computed:{
info(){
return this.tag?"晴天":"阴天"
}
}
})
vm.$watch("tag",{
immediate:true,
handler(newv,oldv){
console.log("监视的值改变了(新旧值分别为:)",newv,oldv)
}
})
script>
html>
深度监视
什么是深度监视：
如果监视某个属性，我们可以采取用.拼接的形式,逐层访问到某一个属性
如果有一种需求就是检测某一数据节点下所有的子数据，在子数据有所改变的时候提示该节点存在数据改变
并且该节点的子节点数据量很多的话，一个一个写显得有些不现实，深度检测就是为了应对这些问题
需要手动开启深度监视的原因是：Vue对象的watch默认不检测对象内部值的改变
tips:
Vue对象时刻检测对象内部值的变化，Vue提供的watch默认不可以
（watch不加deep:true检测不到子节点的数据变化，Vue对象可以检测到）
深度监视语法:
在被监视属性的配置中加入deep:true
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>Documenttitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="demo">
<h1>深度监视测试-----深度检测h1>
<hr>
<button @click="number.a++">点我a++button>
<button @click="number.b++">点我b++button>
<button @click="number={a:888,b:888}">点我替换a与bbutton>
<h1>深度监视测试-----精准检测h1>
<hr>
<button @click="test.t1.t2.t3++">点我t3++button>
div>
body>
<script>
let vm=new Vue({
el:"#demo",
data:{
number:{
a:0,
b:0
},
test:{
t1:{
t2:{
t3:0
}
}
}
},
watch:{
number:{
deep:true,
handler(){
console.log("number数值改变了！")
}
},
'test.t1.t2.t3':{
handler(){
console.log("t3数据改变了！")
}
}
}
})
script>
html>
监视属性的简写方式
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>Documenttitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="demo">
<h1>监视属性简写h1>
<h2>今天的天气是{{info}}h2>
<button @click="alertTag">点我切换天气button>
div>
body>
<script>
let vm=new Vue({
el:"#demo",
data:{
tag:true
},
methods: {
alertTag() {
this.tag=!this.tag
}
},
computed:{
info(){
return this.tag?"晴天!":"阴天!"
}
},
//写法如此，可以直接用被监视的属性名作为函数名，然后操作。这里的参数如果是一个就是新值，如果是两个就与原来一样。
watch:{
tag(nv){
immedite:true
console.log("监视的tag发生了变化，新的值为:"+nv)
}
}
})
// vm.$watch(tag,(newvalue)=>{
// console.log("数据发生了变化！新的值为："+newvalue)
// })
script>
html>
使用监视属性实现姓名案例
在本案例中监视属性不可以是最后生成的属性，监视属性的工作原理就是被监视属性一旦发生改变就执行回调，如果监视最终的属性，那么会陷入一直回调，就会导致程序出错。只能监视输入框内的属性，当输入框内的属性改变时直接修改最终需要展示的结果。
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>Documenttitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="demo">
<h1>使用watch实现姓名案例h1>
姓：<input v-model="firstName"><br>
名：<input v-model="lastName"><br>
姓名：<div>{{allName}}div>
div>
body>
<script>
let vm=new Vue({
el:"#demo",
data:{
firstName:"张",
lastName:"三",
allName:"张-三"
},
watch:{
//常规写法
/*firstName:{
handler(nv){
this.allName=nv+"-"+this.lastName
}
},*/
//定时一秒后才展示修改结果
firstName(nv){
setTimeout(()=>{
this.allName=nv+"-"+this.lastName
},1000)
},
lastName:{
handler(nv){
this.allName=this.firstName+"-"+nv
}
}
}
})
script>
html>
今天的分享就到此结束吧！