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 可 ...
随机推荐
- 2022年Python顶级自动化特征工程框架⛵
作者:韩信子@ShowMeAI 机器学习实战系列:https://www.showmeai.tech/tutorials/41 本文地址:https://www.showmeai.tech/artic ...
- 嵌入式-C语言基础：指针
指针就是地址,变量的值可以通过两种方式访问,一个是通过变量名,一个是通过地址访问. 从而引出一个问题,即什么是指针变量?整型(字符)变量就是存放整形(字符)的变量,指针变量就是存放指针的变量,也就是存 ...
- GAC简述
GAC简介 GAC全称是Global Assembly Cache作用是可以存放一些有很多程序都要用到的公共Assembly,例如System.Data.System.Windows.Forms等等. ...
- 计算机系统大作业：Hello的一生
计算机系统大作业 题 目 程序人生-Hello's P2P 专 业 计算机科学与技术 学 号 班 级 学 生 江水为竭 指导教师 刘宏伟 计算机科学与技术学院 2022年5月 摘 要 HelloWor ...
- Huawei OJ 题解 - 1. A + B Problem - Go 参考解答
# Huawei OJ 题解 - 1. A + B Problem - Go 参考解答## 简介- 详情:http://oj.rnd.huawei.com/problems/1/details- 难度 ...
- ArcObjects SDK开发 004 如何学习好ArcObjects SDK开发
1.基于Arcobjects SDK可以做什么 基于Arcobjects SDK开发,大部分情况下就是做桌面GIS应用程序.AO写的代码是不能直接在Web服务上运行的,但如果你前端是JS,需要后端处理 ...
- ArcObjects SDK开发 003 宏观角度看ArcObjects SDK
1.为什么要宏观上看ArcObjects SDK ArcObjects SDK库是一个非常庞大复杂COM组件集合,ArcGIS10.0有1000多个枚举.90多个结构体.5000多个接口以及4000多 ...
- 14 STL-常用算法
重新系统学习c++语言,并将学习过程中的知识在这里抄录.总结.沉淀.同时希望对刷到的朋友有所帮助,一起加油哦! 每一次学习都是为了追求智慧! 写在前面,本篇章主要介绍STL中常用算法. 算法主要由 ...
- 打印三位数的水仙花数Java
public class Flower{ //水仙花数就是一个 个位数的立方+十位数的立方+百位数的立方=这个三位数 //153 = 1*1*1+5*5*5+3*3*3 public static v ...
- 【Java并发入门】03 互斥锁（上）：解决原子性问题
原子性问题的源头是线程切换 Q:如果禁用 CPU 线程切换是不是就解决这个问题了? A:单核 CPU 可行,但到了多核 CPU 的时候,有可能是不同的核在处理同一个变量,即便不切换线程,也有问题. 所 ...