前言
前面一篇博客提到了计算属性的使用，本篇博客将会使用计算属性实现一下简单的天气案例，然后引出监视属性，并学习深度监视，使用监视属性实现上一篇博客中的姓名案例，总的来说呢计算属性可以实现的东西，监视属性同样可以实现。反过来监视属性可以实现的东西计算属性不一定可以实现。
先来看一下案例的效果（通过点击按钮，切换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>Document</title> <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>Document</title> <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>Document</title> <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> <!-- 如果不加深度监视只有这种情况会提示number改变了 --> <button @click="number={a:888,b:888}">点我替换a与b</button> <h1>深度监视测试-----精准检测</h1> <hr> <!-- 这里的t3在test对象内的t1内的t2对象中 --> <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>Document</title> <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>Document</title> <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>
今天的分享就到此结束吧！
