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>
预览: