-
VUE的侦听器watch
这是关于VUE的watch侦听器的学习笔记，这里面介绍了关于VUE的watch侦听器的一些使用方法和注意事项。
侦听属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视，否则就监听不了，在浏览器的控制台上就会报错
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch()
深度监听：
1.Vue中的watch默认不监测对象内部值的改变（一层），deep一般默认为false。
2.配置deep:true可以监测对象内部值改变（多层）。
3.当配置为deep:true,.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
4.使用watch时根据数据的具体结构，决定是否采用深度监视。
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
这两个的使用，我们要根据具体情况而定。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
案例代码1：主要是介绍了watch的基本使用方法
案例代码2：主要介绍了深度侦听
案例代码3：主要是对比计算属性和侦听属性案例代码1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视天气</title> <script type="text/javascript" src="../vue_js/vue.js"></script> </head> <body> <div id="wd"> <h1>武汉的今日真的很{{weather}}</h1> <button @click = "xiugai">切换按钮</button> </div> <script> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const watchExampleVM = new Vue({ el:"#wd", data:{ isWeather:true }, computed:{ weather(){ return this.isWeather?'很热':'很冷'; } }, methods: { xiugai(){ this.isWeather = !this.isWeather; } }, watch:{ //immediate:true, //初始化时让handler调用一下 isWeather(newValue,oldValue){ console.log("天气变化了"+newValue+","+oldValue); } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
案例代码2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>深度监视天气的变化</title> <script type="text/javascript" src="../vue_js/vue.js"></script> </head> <body> <div id="root1"> <h1>武汉的天气是真的{{weatherOfHotOrCold}}</h1> <button @click="weacherListener">点击按钮进行切换变器，并且监视天气的变化</button> <h1>我们在一个伟大的国家里，这个国家是{{country.Asia.CH}}</h1> <button @click="showGreatCountry">我爱中国</button> </div> <script> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const weatherVM = new Vue({ el: '#root1', data: { isHotOrCold: true, country: { Asia: { CH: 'China' } } }, computed: { weatherOfHotOrCold() { return this.isHotOrCold ? '炎热' : '很冷'; } }, methods: { weacherListener() { this.isHotOrCold = !this.isHotOrCold; }, showGreatCountry() { this.country.Asia.CH = '最大的国家---->中国'; } }, watch: { isHotOrCold: { handler(newValue, oldValue) { console.log(newValue + "---" + oldValue); } }, country: { deep: true, handler() { alert(this.country.Asia.CH + "是世界上最伟大的国家"); } } } }) </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
案例代码3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例的watch实现</title> <script type="text/javascript" src="../vue_js/vue.js"></script> </head> <body> <div id="demo1"> <h1>我们这里使用计算属性实现姓名案例</h1> 姓氏:<input type="text" v-model="surname"></br> 名字:<input type="text" v-model="name"></br> 完整的名字:<span>{{fullName}}</span> <h1>我们这里使用watch侦听实现姓名案例,全名那里改变的事件比前面延迟一秒钟</h1> 姓氏:<input type="text" v-model="watch_surname"></br> 名字:<input type="text" v-model="watch_name"></br> 完整的名字:<span>{{watch_fullName}}</span> </div> <script> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el: '#demo1', data: { surname: '张', name: '三', watch_surname: '李', watch_name: '四', watch_fullName: '李-四' }, computed: { fullName: { get() { return this.surname + "-" + this.name; } } }, watch: { //正常完整的写法 'watch_surname': { handler(value1) { console.log(value1); this.watch_fullName = value1 + "-" + this.name; } }, 'watch_name': { handler(value2) { setTimeout(() => { console.log(this); this.watch_fullName = this.watch_surname + "-" + value2; }, 1000); } } //简写形式 /*watch_surname(val) { setTimeout(() => { console.log(this) this.watch_fullName = val + '-' + this.watch_name; }, 1000); }, watch_name(val) { this.watch_fullName = this.watch_surname + '-' + val }*/ } }); //正常完整的写法 /*vm.$watch('watch_surname', { handler(value) { this.watch_fullName = value + "---" + this.watch_name; console.log(this.watch_fullName); } })*/ //简写形式 /*vm.$watch('watch_name',function(value){ console.log(this); this.watch_fullName = this.watch_surname + "---" + value; })*/ </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
-
相关阅读:
MySQL -- 环境安装（CentOS7）
【前端设计模式】之代理模式
IO模型3-NIO(非阻塞IO)
BUUCTF学习(8): 随便注，SQL
BST二叉搜索树
STM32读写RTC内部时钟外设，设置和显示时钟
UGNX配置许可服务器
asp.net mvc 起步
『现学现忘』Git基础 — 37、标签tag（二）
代码版的《本草纲目》毽子舞！如何本地整一个
- 原文地址：https://blog.csdn.net/weixin_43228946/article/details/126652032
