1.1.1基本用法
-
使用watch来响应数据的变化
-
一般用于异步或者开销较大的操作
-
watch 中的属性 一定是data 中 已经存在的数据
-
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
watch 是一个对象，这个对象里 可以写 很多 方法。
1.1.2 watch侦听数据的数据类型
1.1.2.1 监听一般数据 num 的变化
一般数据指的是基础类型的数据（数字，字符串，布尔，null，undefined）
下面这三种写法，都对，用哪个都可以
<div id="app"> <div> <p>{{num}}</p> <button @click="num++">自增</button> </div> </div>
<script src="./js/vue.js"></script> <script> var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ num:0, } }, //侦听器 //侦听的数据，一定是要在数据中心中 存在的数据 watch:{ //es5写法 // num:function(newVal,oldVal){ // console.log('旧值:'+oldVal); // console.log('新值:'+newVal); // } //es6写法 // num(newVal,oldVal){ // console.log('旧值:'+oldVal); // console.log('新值:'+newVal); // } num:{ handler(newVal,oldVal){ console.log('旧值:'+oldVal); console.log('新值:'+newVal); } } }, methods:{ } }) </script>
预览：
watch侦听 的数据 是 布尔类型的数据，操作如下所示：
<div id="app"> <div> <p v-if="flag">{{title}}</p> <button @click="isflag">点击显示</button> </div> </div>
<script src="./js/vue.js"></script> <script> var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ title:'平凡的世界', flag:false, } }, watch:{ flag(newVal,oldVal){ console.log('旧值：'+oldVal); console.log('新值：'+newVal); } }, methods:{ isflag(){ this.flag= !this.flag } } }) </script>
预览：
1.1.2.2 监听对象变化，需进行deep深度侦听
深度侦听 deep设置为true
deep 属性：深度监听对象变化 (代表是否深度监听)当需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，此时就需要 deep 属性对对象进行深度监听。
vue 是不能检测到对象属性的添加或删除，我们使用 watch 监听一个对象时，除非是直接重新给对象赋值，否则是不能监听到对象里的值的变化的deep 就是用来进行深度监听的！deep:false //值为 true 或 false，默认 false
deep 为 true把 deep 设为 true 后，就可以得到我们想要的结果了，可以监听到对象属性的变化。
<div id="app"> <p> <input type="text" name="" id="" v-model="msg.text"> </p> <p> 你输入的信息是：{{msg.text}} </p> </div>
<script src="./js/vue.js"></script> <script> var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ msg:{text:''} } }, watch:{ msg:{ handler(val){ console.log('新值：'+val.text); }, deep:true } }, methods:{ } }) </script>
预览：
数组(一维、多维)的变化不需要通过深度监听，对象数组中对象的属性变化则需要 deep 深度监听。
1.1.2.3 watch中immediate 属性的应用
使用 watch 时有一个特点，就是当值第一次绑定时，不会执行 handler()监听函数，只有值发生改变时才会执行 handler()监听函数。如果我们需要在最初绑定值的时候也执行函数，则就需要用到 immediate 属性。
immediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听只有发生数据改变,hander才会有操作,但是如果将immediate设置为true,在第一次进入页面时就会绑定值。
immediate [ɪˈmiːdiət] 立即属性：该值默认是 false，在进入页面时，第一次绑定值，watch 不会“立刻执行”监听，只有数据发生改变 watch 才会执行 handler 中的操作。immediate:false, //值为 true 或 false，默认 falseimmediate:true,---- 刚进入页面的时候，watch 可以立刻 监听到 对象中属性的值。immediate:false,---- 刚进入页面的时候，watch 不会“立刻执行” 监听。
immediate 为 true我们可以看到，handler 方法会在第一次绑定值时就触发（调用执行）。
例如1：
<div id="app"> <div> a等于 <button @click="a=a+10">a+10</button> </div> </div>
<script src="./js/vue.js"></script> <script> var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ a:1 } }, watch:{ a:{ handler(newVal,oldVal){ console.log('a的默认值是：'+newVal); console.log('点击后a的值是：'+newVal); }, immediate:true, deep:false } }, methods:{ } }) </script>
预览：
例如2：
<div id="app"> <p> <input type="text" name="" id="" v-model="man.name"> </p> <p>你的姓名：{{man.name}}</p> <p>你的年龄：{{man.age}}</p> <p>你的性别：{{man.gender}}</p> <p>你的身高：{{man.height}}</p> </div>
<script src="./js/vue.js"></script> <script> var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ man:{ name:'无', age:'无', gender:'无', height:'无' } } }, watch:{ man:{ handler(newVal){ console.log('新值：'+newVal.name); console.log('新值：'+newVal.age); console.log('新值：'+newVal.gender); console.log('新值：'+newVal.height); if(newVal.name == '小谷'){ newVal.age = 19; newVal.gender = '男'; newVal.height = 176; }else if(newVal.name == '李方利'){ newVal.age = 18; newVal.gender = '女'; newVal.height = 166; } }, deep:true, immediate:true } }, methods:{ } }) </script>
预览：
1.1.2.4 watch异步操作
Vue 的 watch 允许我们执行“异步操作”以响应数据更改。
前端的数据均是通过接口请求拿到的，而 Vue 本身不支持 ajax 请求，在项目中安装 axios 库
首先，你要查看下你计算机里有没有安装nodejs。查看是否安装node，我们使用node -v 命令查看node版本。
我们使用where node命令查看 node的安装路径
异步请求npm install axios 库axios-get 请求axios.get('/getData1').then(r => console.log(r))//接口调用成功返回的数据.catch(err => console.log(err)),//接口调用失败返回的数据
postman接口测试工具 （下载在win7下安装不了）
地址 Postman
接口测试工具（下载安装，可以使用）
Apifox - API 文档、调试、Mock、测试一体化协作平台 - 接口文档工具，接口自动化测试工具，接口Mock工具，API文档工具，API Mock工具，API自动化测试工具
免费天气接口地址
http://wthrcdn.etouch.cn/weather_mini?city=北京
watch执行 异步操作
<div id="app"> <input type="text" v-model.trim="word"> <hr> <div> <table border="1" width="500"> <tr> <th>高温</th> <th>低温</th> <th>风向</th> <th>天气</th> </tr> <tr v-for="item in result"> <td>{{item.high}}</td> <td>{{item.low}}</td> <td>{{item.fengxiang}}</td> <td>{{item.type}}</td> </tr> </table> </div> </div>
<script src="./js/vue.js"></script> <script src="./js/axios.js"></script> <script> var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ word:'', result:[] } }, watch:{ word(newVal,oldVal){ if(newVal.length>0){ //发送异步请求 apiUrl=`http://wthrcdn.etouch.cn/weather_mini?city=${newVal}` axios.get(apiUrl).then((res)=>{ console.log(res.data.data.forecast); this.result=res.data.data.forecast }) } } }, methods:{ } }) </script>
预览：
1.1.2.5 使用 lodash 库减少 watch 对后台请求的压力
（1）下载，安装lodash 库
npm install lodash --save
（2）页面中引入lodash.js
<!-- 页面里引入js --> <script src="./js/lodash.js"></script>
（3）使用_.debounce函数
_.debounce(func, [wait=0], [options={}])
（4） 具体操作
访问 天气的接口地址
http://wthrcdn.etouch.cn/weather_mini?city='合肥'
完整代码：
<div id="app"> <input type="text" v-model.trim="word"> <hr> <div> <table border="1" width="500"> <tr> <th>高温</th> <th>低温</th> <th>风向</th> <th>天气</th> </tr> <tr v-for="item in result"> <td>{{item.high}}</td> <td>{{item.low}}</td> <td>{{item.fengxiang}}</td> <td>{{item.type}}</td> </tr> </table> </div> </div>
<script src="./js/vue.js"></script> <script src="./js/axios.js"></script> <script src="./js/lodash.js"></script> <script> var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ word:'', result:[] } }, watch:{ word:_.debounce(function(newVal,oldVal){ //发送异步请求 apiUrl=`http://wthrcdn.etouch.cn/weather_mini?city=${newVal}` axios.get(apiUrl).then((res)=>{ console.log(res.data.data.forecast); this.result=res.data.data.forecast }) },2000)//2秒后，执行异步操作，每2s向后台服务器发送一次请求，作用：减少向服务器发送请求的压力 }, methods:{ } }) </script>
预览：
1.1.2.6 watch 监听路由变化
watch 除了可以监听数据的变化，路由的变化也能被其监听到。
vue 核心插件之一————Vue Router 路由模块vue-router 路由插件是 vue 的核心插件 1.下载npm install vue-router -S
路由，其实就是"指向"的意思。 / 路由
<div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> <template id="login"> <div> <h1>登录组件</h1> </div> </template> <template id="register"> <div> <h1>注册组件</h1> </div> </template>
<script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> //穿件局部组件 let login={ template:'#login' } let register={ template:'#register' } //创建路由对象，配置路由规则 var router=new VueRouter({ routes:[{ path:'/login', name:'login', component:login }, { path:'/register', name:'register', component:register }] }) //根实例（根组件） var vm=new Vue({ //模板选择器 el:'#app', //数据中心 data(){ return{ } }, router, //侦听器--监听路由变化 watch:{ '$route.path':function(newVal){ console.log(newVal); if(newVal=='/login'){ console.log('欢迎进入到登录页面'); } if(newVal=='/register'){ console.log('欢迎进入到注册页面'); } } }, methods:{ }, components:{ login,register } }) </script>
预览：
