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 可 ...
随机推荐
- 从 洛谷P5309 Ynoi2011 初始化 看卡常
一般情况下,程序运行消耗时间主要与时间复杂度有关,超时与否取决于算法是否正确. 但对于某些题目,时间复杂度正确的程序也无法通过,这时我们就需要卡常数,即通过优化一些操作的常数因子减少时间消耗. 比如这 ...
- Centos7 mysql网络源安装范例（其他系统也可参考）
1. 以下是一个通配的el7系列的yum源,可适应aarch64,x86_64,i386内核,但是可能会慢一点 # cat > /etc/yum.repos.d/mysql-community. ...
- 【Java并发004】原理层面：synchronized关键字全解析
一.前言 synchronized关键字在需要原子性.可见性和有序性这三种特性的时候都可以作为其中一种解决方案,看起来是"万能"的.的确,大部分并发控制操作都能使用synchron ...
- 使用Python实现多线程、多进程、异步IO的socket通信
多线程实现socket通信服务器端代码 import socket import threading class MyServer(object): def __init__(self): # 初始化 ...
- Spring Security（7）
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 有时某些业务或者功能,需要在用户请求到来之前就进行一些判断或执行某些动作,就像在Servlet中的FilterChain过滤器所做的那样,Spr ...
- 【每日一题】【找到位置返回&升序数组中第K大就是n-K小】2022年1月17日-NC88 寻找第K大
描述有一个整数数组,请你根据快速排序的思路,找出数组中第 k 大的数. 给定一个整数数组 a ,同时给定它的大小n和要找的 k ,请返回第 k 大的数(包括重复的元素,不用去重),保证答案存在. 方法 ...
- 你的项目使用Optional了吗？
1.基本概念 java.util.Optional<T>类本质上就是一个容器,该容器的数值可以是空代表一个值不存在,也可以是非空代表一个值存在. 2.获取对象 2.1 相关方法 2.2 案 ...
- 你不知道的Map家族中的那些冷门容器
概述 本篇文章主要讲解下Map家族中3个相对冷门的容器,分别是WeakHashMap.EnumMap.IdentityHashMap, 想必大家在平时的工作中也很少用到,或者压根不知道他们的特性以及适 ...
- 多种方法实现单例模式 pickle模块
目录 单例模式 类方法@classmethod实现 元类实现 模块实现 装饰器实现 双下call.反射实现 pickle序列化模块 单例模式 比如系统调用打印机,不管你要打印几次,都是调用同一个打印机 ...
- 高性能 Jsonpath 框架，Snack3 3.2.50 发布
Snack3,一个高性能的 JsonPath 框架 借鉴了 Javascript 所有变量由 var 申明,及 Xml dom 一切都是 Node 的设计.其下一切数据都以ONode表示,ONode也 ...