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>预览：
2450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
