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 可 ...
随机推荐
- 使用Opencv4和YOLOv4（XTDrone）训练模型遇到问题的记录（二）
使用Opencv4和YOLOv4(XTDrone)训练模型遇到问题的记录(二) Written By PiscesAlpaca(双鱼座羊驼) 目录 使用Opencv4和YOLOv4(XTDrone)训 ...
- Go语言核心36讲02
你好,我是郝林,今天我分享的主题是,学习专栏的正确姿势. 到了这里,专栏的全部内容已经都推送到你的面前了.如果你已经同步学习完了,那么我要给你点一个大大的赞! 还没有看完的同学也不要着急,因为推送的速 ...
- day20-web开发会话技术02
WEB开发会话技术02 6.Cookie的生命周期 默认情况下,Cookie只在浏览器的内存中存活,也就是说,当你关闭浏览器后,Cookie就会消失.但是也可以通过方法设置cookie的生存时间. c ...
- 跳出foreach循环
直接return false没用,需要用throw来跳出foreach 1 try { 2 this.categoryList.forEach((item, index) => { 3 if ( ...
- CPU 和 CPU Core 有啥区别？多核 CPU？多个 CPU？
CPU 全称 Central Processing Unit,中央处理器,计算机的大脑,长这个样子: CPU 通过一个插槽安装在主板上,这个插槽也叫做 CPU Socket,它长这个样子: 而我们说的 ...
- nuxt.js中引入lib-flexible 和 postcss-px2rem 实现pc自适应
最近一个需要用nuxt框架实现的pc自适应项目,从网上找了很多资料,最终完美实现 一.下载相关插件 npm i lib-flexible -Snpm i px2rem-loader -Dnpm ins ...
- 【JVM实战系列】「监控调优体系」实战开发arthas-spring-boot-starter监控你的微服务是否健康
前提介绍 相信如果经历了我的上一篇Arthas的文章[[JVM实战系列]「监控调优体系」针对于Alibaba-Arthas的安装入门及基础使用开发实战指南]之后,相信你对Arthas的功能和使用应该有 ...
- 网络编程 UDP套接字
第十二章 UDP套接字 12.1 前言 上一章讲述了TCP通信方式,它是基于流的面向连接的网络通信.UDP是IP协议上的另一种传输协议. TCP和UDP都是端到端的通信协议,都处于TCP/IP网络模型 ...
- pyCharm中下载包的速度慢的解决方案
1.解决方案 使用阿里镜像 2.具体步骤 1.在项目里面新建一个xxx.py文件 2.然后将下面的代码复制进xxx.py文件 import os ini = "[global]\nindex ...
- [数据与分析可视化] D3入门教程2-在d3中构建形状
d3.js入门教程2-在 d3.js中构建形状 文章目录 d3.js入门教程2-在 d3.js中构建形状 形状的添加 圆形的添加 矩形的添加 线段的添加 文本的添加 折线的添加 区域的添加 圆弧的添加 ...