Vue12 监视属性
1 简介
所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化
2 使用
使用watch配置项，在配置项里面写上要监视的属性，每次属性值的变化都会触发handler函数回调，也可以监视计算属性的变化
2.1 语法格式
其中，属性名表示监视的data里面的属性或者计算属性里面的属性
handler是监视回调的方法，它有两个参数：新的值和旧的值
配置项：可以配置也可以不配置
watch:{
属性名:{
handler(newValue,oldValue){
console.log('新值：'+newValue + "---旧值："+oldValue)
},
配置项:值,
配置项:值
}
}
2.2 简写格式
当只有handler回调函数而没有其他配置项的时候，可以简写成下面格式
watch:{
属性名(newValue,oldValue){
console.log('新值：'+newValue + "---旧值："+oldValue)
}
}
2.3 示例1-没有其他配置项
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
watch:{
name(newValue,oldValue){
console.log('新值：'+newValue + "---旧值："+oldValue)
}
}
})
</script>
</body>
如下图，初始化的时候，监视方法没有调用
如下图，在修改第一个name输入框的时候，监视方法调用了
2.4 示例2 添加配置项 immediate
immediate，默认值是false，设置为true时，在被监视的值初始化的时候调用一次监视函数
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
watch:{
name:{
immediate:true,
handler(newValue,oldValue){
console.log('新值：'+newValue + "---旧值："+oldValue)
}
}
}
})
</script>
</body>
如下图，在初始化的时候，监视方法就调用了。且发现旧值是undifined，因为只没有改变过，所以没有旧值，就是undifined了
3 深度监视
3.1 示例1 监视的属性是个对象
监视person这个属性，它是个对象
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<h1>{{person}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州',
person:{
sex:'男',
age:20
}
},
watch:{
person:{
immediate:true,
handler(newValue,oldValue){
console.log('新值：'+newValue + "---旧值："+oldValue)
}
}
}
})
</script>
</body>
如下图，我们去修改person.age和person.sex的时候，发现监视方法没有被调用。只有使用一个新的对象替换原对象的时候，监视方法才调用了
因为，被监视的属性是对象的时候，它监视的是整个对象。可以理解为被监视的这个属性持有的值实际上是对象的地址，所以监视的时候实际上是在监视这个地址有没有发生变化
3.2 监视对象中某个属性
监视person的age属性
注意：watch里面'person.age'需要加上引号。虽然我们平时写这些属性都可以不加引号，实际上是vue给我们自动加上了，但是在这里需要我们自己手动写上引号
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<h1>{{person}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州',
person:{
sex:'男',
age:20
}
},
watch:{
'person.age':{
immediate:true,
handler(newValue,oldValue){
console.log('新值：'+newValue + "---旧值："+oldValue)
}
}
}
})
</script>
</body>
如下图，修改person.age时监视方法发生变化
3.3 监视对象的所有属性 配置项deep
deep：是否进行深度监视，默认false，配置为true，深度监视对象里面每个属性(包括多个层级)
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<h1>{{person}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州',
person:{
sex:'男',
age:20,
house:{
'size':'120',
'floor':12
}
}
},
watch:{
person:{
immediate:true,
deep:true,
handler(newValue,oldValue){
console.log('新值：'+newValue + "---旧值："+oldValue)
}
}
}
})
</script>
</body>
如下图，修改person.age和person.house.floor，监视方法都会被调用
4 监视属性和计算属性的区别
1）computed能实现的，watch都能实现，computed不能实现的，watch也能实现
2）计算属性不能执行异步任务。计算属性一般不会用来向服务器请求或者执行异步任务(如setTimeOut)，因为耗时可能会比较长，我们的计算属性要实时更新。所以这个异步任务就可以用监听属性来做
4.1 示例
我们要实现下面这个标题的值是两个输入框的值的拼接
分别使用监视属性和计算属性实现
4.1.1 监视属性实现
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<h1>{{nameAndAddress}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州',
nameAndAddress:''
}
,
watch:{
name:{
immediate:true,
handler(newValue,oldValue){
this.nameAndAddress = this.name + this.address
}
},
address:{
immediate:true,
handler(newValue,oldValue){
this.nameAndAddress = this.name + this.address
}
}
}
})
</script>
</body>
4.1.2 计算属性实现
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<h1>{{nameAndAddress}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
computed:{
nameAndAddress(){
return this.name+this.address
}
}
})
</script>
</body>
4.2 示例2
在上面的基础上，要求两个输入框的值变化时，标题的值要延迟2秒后再变化
4.2.1 监视属性
注意setTimeout里面写的是箭头函数，这样子它就没有自己的this，this往外层找，就能找到vm对象
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<h1>{{nameAndAddress}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州',
nameAndAddress:''
}
,
watch:{
name:{
immediate:true,
handler(newValue,oldValue){
console.log('111')
setTimeout(()=>{
this.nameAndAddress = this.name + this.address
},2000)
}
},
address:{
immediate:true,
handler(newValue,oldValue){
console.log('111')
setTimeout (()=>{
this.nameAndAddress = this.name + this.address
},2000)
}
}
}
})
</script>
</body>
4.2.2 计算属性
<body>
<div id="root">
<input v-model="name"></input> <br/><br/>
<input v-model="address" ></input> <br/>
<h1>{{nameAndAddress}}</h1>
</div>
<script type="text/javascript" >
const vm = new Vue({
el:'#root',
data:{
name:'历史',
address:'杭州'
},
computed:{
nameAndAddress(){
setTimeout(()=>{
this.name+this.address
},2000)
}
}
})
</script>
</body>
如下图，我们发现标题压根没有值。
我们要知道，计算属性的值依赖的是getter函数的返回值。
如下图这么编码，计算属性nameAndAddress是没有返回值的，也就是它的getter函数式没有返回值的，所以该计算属性就没有值
nameAndAddress(){
setTimeout(()=>{
this.name+this.address
},2000)
}
它只能下面这么编码，但是这样子又不能实现等2秒的效果
nameAndAddress(){
setTimeout(()=>{
this.name+this.address
},2000)
return this.name+this.address
}
4.3 注意细节
在vue示例里面，所有被vue管理的函数，全部写成普通函数，这样子this就可以获取到vm对象或者组件对象
所有不被vue管理的函数，最好写成箭头函数，这样子this就可以获取到vm对象或者组件对象
Vue12 监视属性的更多相关文章
- Vue的计算属性，监视属性代码理解
1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...
- vue的计算和监视属性,附一小实例
1. 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2. 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性 ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue学习之--------监视属性（2022/7/10）
文章目录 1.监视属性 1.1 监视属性--天气案例 1.1.1 基础知识 1.1.2 代码实例 1.1.2 测试效果 1.2 深度监视-天气案例 1.2.1 基础知识 1.2.2 代码实例 1.2. ...
- VUE：计算属性和监视
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- (尚004)Vue计算属性之基本使用和监视
所做效果预览: test004.html <!DOCTYPE html><html lang="en"><head> <meta char ...
- 使用属性动画 — Property Animation
属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...
- iOS开发Swift篇—（九）属性
iOS开发Swift篇—(九)属性 一.类的定义 Swift与Objective-C定义类的区别 Objective-C:一般需要2个文件,1个.h声明文件和1个.m实现文件 Swift:只需要1个. ...
- swift 存储属性和计算属性 set{}和get{} didSet{}和willSet{}
首先我们看一段代码: var A:Int = 0 var B:Int = 0 var C:Int { get { return 1 } set { print("Recived new va ...
- Swift 学习一函数&函数属性&懒加载
函数 函数相当于OC中的方法 格式: func 函数名(参数列表) -> 返回值类型 { 代码块 return 返回值} func 函数名(参数列表){ // 返回值为Void 可 ...
随机推荐
- 【笔记】CF1251E Voting 及相关
题目传送门 贪心: 一个人 \(i\) 要投票,两种情况:花钱,或当前的人数达到了 \(m_i\). 而当前达到 \(m_i\) 的话所有 \(m_j \le m_i\) 也就达到要求了. 所以考虑将 ...
- 【初赛】CSP 2020 第一轮（初赛）模拟记录
感觉初赛不过关,洛谷上找了一套没做过的来练习. 顺便写了详细的题解. 试题用时:1h 单项选择: 第 1 题 十进制数 114 的相反数的 8 位二进制补码是: A.10001110 B.100011 ...
- 嵌入式-C语言基础：字符串比较函数strcmp及其实现
#include<stdio.h> #include <string.h> int mystrcmp(char * p1,char * p2) { int ret=0; if( ...
- React+echarts (echarts-for-react) 画中国地图及省份切换
有足够的地图数据,可以点击到街道,示例我只出到市级 以umi为框架,版本是: "react": "^18.2.0", "umi": &quo ...
- MSP430中断小实验——通过按键改变小灯闪烁频率
本小实验基于MSP430f5529,不同的型号可能管脚和中断配置有所不同. 实现的功能为: 第一次按下按键后,系统以每 2 秒钟,指示灯暗 1 秒,亮 1 秒的方式闪烁.程序采用默认时钟配置: 第二次 ...
- Linux deb系统 nginx 配置解析php
如果你是root用户可以不加sudo 首先安装php php-fpm nginx sudo apt-get install php php-fpm nginx -y nginx 是一个轻量级的http ...
- python3中的常见知识点3------reduce()函数
python3中的常见知识点3--reduce()函数 python3导入reduce()函数 reduce()函数语法 reduce()举例 其他python3常用函数 参考链接 python3中不 ...
- 错误：Required request parameter 'XXX' for method parameter type String is not present
错误信息:Required request parameter 'XXX' for method parameter type String is not present 这种都是前端请求方式不同,后 ...
- java逻辑运算中 | | 和 | 的区别
本文主要阐明逻辑运算中 | |(短路或) 和 |(逻辑或) 的异同 | | 和 | 的相同之处: 只有二者都是假时,结果才为假,否则结果为true. | | 和 | 的不同之处在于: a | | b: ...
- 发送http2请求
有时服务器会检测http协议版本,有http/1.1和h2,requests发送的是http1.1的请求 # pip install httpx client = httpx.Client(http2 ...