Vue-监视属性(watch)简单说明和使用
前言
可以先使用技术属性的方式编写天气案例,然后使用监视属性,通过对比,更加清晰明了
编写案例
我们可以使用三木运算符实现对天气的更换,如果属性为真就是炎热,为假就是寒冷
但是不建议在插值语法里面做复杂操作,可以使用技术属性操作,利用插值语法获取计算属性的结果
计算属性完善案例
使用计算属性完善案例,同时给按钮绑定单击事件去升级案例改变天气
代码到这对于这个案例基本就写完了,但是我想分享一个坑和一个使用技巧
坑
我们改下代码,注意看,现在已经不用info这个计算属性和isHot这个属性了
我们单击按钮,发现vue开发工具对应的数据并没有改变,其实已经改变了,只是它觉得既然页面上已经没有用到这些改变数据的地方了,那么它就没必要更新了,反正它更新你也不用
通过控制台验证数据已经更新
这个问题也不严重,只是目前存在,说不定某天版本迭代就把这个坑填上了,只是希望大家知道这个坑!
使用技巧
注意观察代码和案例,按钮只想做一件事,就是更改属性的值,那么我就不需要写那么多的代码去做一个简单的事情,而是把逻辑都写在单击事件里面
效果也是一样的,但是要说明下,如果事件的逻辑很简单只有一件事,这样写没有问题,如果有多个事,需要用;分开,比如:
<button @click="isHot=!isHot;a++">点击切换天气</button>
如果有多个逻辑需要处理,那么还是建议写在函数里面
监视属性完成案例
在原有的技术上,通过监视属性的方式完成案例,监视isHot属性的变化,如果改变了,就要通知我,由我执行对应的逻辑,有两种监视方式,一一说明
监视方式1 直接使用watch
vue中通过watch实现监视,有一个handler函数,如果我们对监视属性的值进行修改的时候就会被调用,handler有两个参数,分别是修改前的值和修改后的值
还有一个函数叫immediate,默认为false,如果设置为true表示初始化时候让handler调用一下
我还没点击呢就自己调用了,还有更多的函数就不一一列举了
不只是可以监视data中的属性,也可以监视computed里面的计算属性
相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">点击切换天气</button>
</div>
<script type="text/javascript">
//Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键,这个按键对应的键码是13,也就是enter回车键
const vm=new Vue({
el:'#root',
data:{
//布尔值,如果为真就是天气热,为假就是天气冷
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'寒冷'
}
},
methods: {
changeWeather(){
// 直接两极反转
this.isHot=!this.isHot
}
},
// 第一种监视方式
watch:{
isHot:{
immediate:true, //初始化时候让handler调用一下
// handler什么时候被调用? 当isHot发生改变时,就会发生调用 有两个参数,分别是修改前的值和修改后的值
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}
})
</script>
</body>
</html>
监视方式2 使用$watch()
两种监视方式如何选择
如果很明确的知道需要监视哪个属性,那么直接使用方式1的watch监视比较合适,如果说不知道要检测谁,后续根据用户的行为才知道检测谁,那么方式2使用$watch无疑是更好的
总结watch
监视属性watcher:
1 当被监视的属性发生变化时,回调函数自动调用,进行相关逻辑处理
2 监视的属性必须存在,才能进行监视
3 监视的两种写法:
(1).new Vue时传入watch配置
(2)通过vm.$watch监视
深度监视
在监视属性的技术上,再学习深入的深度监视,还是天气的案例,再次基础上加一个新的功能
接下来提出需求,我想要监视a的变化,我们如果直接写number,a的话会报错,因为这个key是错误格式的,所以面对这种情况,我们需要还原成原始key的写法,也就是’number.a’,这种写法适用于多级属性结构
如果我想要监视属性b呢?
我一开始想到的笨办法是,复制a的监视改为b,但是如果number里面如果有成千上万个数据呢。。
不如直接监视number,并且配置一个新的属性:deep(有深度的),默认false,改为true就表示深度监视对象的每一个属性变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">点击切换天气</button>
<hr/>
<h2>a的值是:{{number.a}}</h2>
<button @click='number.a++'>点我让a自增</button>
<hr/>
<h2>b的值是:{{number.b}}</h2>
<button @click='number.b++'>点我让b自增</button>
</div>
<script type="text/javascript">
//Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键,这个按键对应的键码是13,也就是enter回车键
const vm=new Vue({
el:'#root',
data:{
//布尔值,如果为真就是天气热,为假就是天气冷
isHot:true,
number:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot?'炎热':'寒冷'
}
},
methods: {
changeWeather(){
// 直接两极反转
this.isHot=!this.isHot
}
},
watch:{
//监视多级结构中某个属性的变化
/* 'number.a':{
immediate:true, //初始化时候让handler调用一下
handler(newValue,oldValue){
console.log('a被修改了',newValue,oldValue)
}
} */
//监视多级结构中所有属性的变化
number:{
deep:true, //开启深度监视
immediate:true, //初始化时候让handler调用一下
handler(newValue,oldValue){
console.log('number被修改了',newValue,oldValue)
}
}
}
})
</script>
</body>
</html>
总结深度监视
深度监视:
(1)vue中的watch默认不监测对象内部值的改变(一层)
(2)配置deep:true可以监测对象内部值改变(多层)
备注:
(1)vue自身可以监测对象内部值的改变,但vue提供的watch默认
(2)使用watch时根据数据的具体结构,决定是否采用深度监视
监视的简写形式
watch简写
监视是可以简写的,但是有两个前提:
1 不需要immediate(初始化调用)
2 不需要deep(深度监视)
也就是说当配置项只有handler的时候,就可以开启简写形式
写法如下:
效果也是一样的
watch简写
友情提示:函数要用普通函数去写,不能使用箭头函数,不然this就不是vue实例对象了
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">点击切换天气</button>
</div>
<script type="text/javascript">
//Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键,这个按键对应的键码是13,也就是enter回车键
const vm=new Vue({
el:'#root',
data:{
//布尔值,如果为真就是天气热,为假就是天气冷
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'寒冷'
}
},
methods: {
changeWeather(){
// 直接两极反转
this.isHot=!this.isHot
}
},
watch:{
// 正常写法
/* isHot:{
immediate:true, //初始化时候让handler调用一下
// handler什么时候被调用? 当isHot发生改变时,就会发生调用 有两个参数,分别是修改前的值和修改后的值
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
} */
// 简写写法
/* isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
} */
}
})
// $watch正常格式
/* vm.$watch('isHot',{
immediate:true, //初始化时候让handler调用一下
// handler什么时候被调用? 当isHot发生改变时,就会发生调用 有两个参数,分别是修改前的值和修改后的值
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}) */
// $watch简写格式
vm.$watch('isHot',function(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
})
</script>
</body>
</html>
computed和watch之前的区别
computed和watch之前的区别
1 computed能够完成的功能,watch都能完成
2 watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
两个重要的小原则:
1 所被vue管理的函数,最好都写成普通函数,这样this指向的才是vue实例对象
2 所有不被vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好都写成箭头函数,这样this指向的才是vm或组件实例对象
相关文章
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- (尚006)Vue计算属性之set与get
- [转] vue&webpack多页面配置
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- 2023-02-19,新的30道Vue面试题!
- 技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用(二)
- 【Vue+element+admin】登陆页面篇(login.vue)
- 【Vue】超实用的通过Vue实现选项卡切换(图文+完整代码)
- vue 表单验证实例
- 基于vue 的 UI框架 -- Mint UI
- 06Vue - Vue实例(构造器)
- JavaScript - 批量替换对象数组中的属性名(快速将二维数组对象中的键名进行大量替换)传入原来的属性名和要修改的属性名即可,适用于 js vue nuxt uniapp等项目,详细示例代码教程
- 【vue系列-03】vue的计算属性,列表,监视属性及原理
- 推荐 | Vue 入门&进阶路线
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
- Vue知识点总结(7)——计算属性computed(超级详细)
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue源码解析之,插值替换
- Vue子组件调用父组件的方法
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- petite-vue源码剖析-属性绑定`v-bind`的工作原理
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法
- vue中如何动态添加readonly属性
- Vue开发实例(02)之将Vue项目代码导入到IDEA并运行
- 电商系统 常用代码 VUE
- VUE 遍历对象
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- Vue-计算属性(computed)简单说明和使用