- A+
所属分类：Web前端
前言
在本篇，我将记录我对vue的 计算属性和侦听器 的学习记录
注：本篇对于”侦听“和”监听“是一个意思
一、计算属性
在官网上，可以看到这样一个例子：
<div id="example"> {{ message.split('').reverse().join('') }} </div> Vue官方预判到了某些人学了Vue，会在{{}}写复杂的语句，而这些语句会大大降低可读性，但有时候又不得不去写这么复杂的逻辑来满足业务需求
因此Vue提供了新的配置项：computed
在面对每当我们读取变量时需要对变量进行处理后再现实的情况
1.1 计算属性的基本用法
看代码：
computedcomputed<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://v2.cn.vuejs.org/js/vue.js"></script> <title>梦开始的地方</title> <style> input{ width: 500px; height: 50px; } </style> </head> <body> <div id="root"> 输入b站视频连接: <input v-model="bUrl"><br> 该视频的id为: {{id}} </div> </body> <script type="text/javascript"> new Vue({ el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器 data:{ bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click", //这是可以存放用于展示的数据 }, computed:{ id(){ if(this.bUrl.includes("?")){ return this.bUrl.split("/").slice(-2,-1)[0]; } return this.bUrl.split("/").slice(-1)[0]; } } }) </script> </html> 在这个例子中，在input框输入b站url链接，computed配置的方法会立刻计算，在dom节点可以当成属性来获取
为什么每次修改input的内容computed相关方法会重新执行一次呢？因为v-model对bUrl和input框的内容进行了双向绑定，一旦改变了其中一个另外一个也会跟着变化，变化的时候就会触发computed配置里面的相关方法
1.2 计算属性添加setter
除此之外，如果我要对计算属性的方法添加一个setter，那么就需要写成这样子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://v2.cn.vuejs.org/js/vue.js"></script> <title>梦开始的地方</title> <style> input{ width: 500px; height: 50px; } </style> </head> <body> <div id="root"> 输入b站视频连接: <input v-model="bUrl"><br> 该视频的id为: {{id}} <br> </div> </body> <script type="text/javascript"> new Vue({ el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器 data:{ bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click", }, computed:{ id:{ get(){ if(this.bUrl.includes("?")){ return this.bUrl.split("/").slice(-2,-1)[0]; } return this.bUrl.split("/").slice(-1)[0]; }, set(){ /* show your code. */ } } } }) </script> </html>
二、侦听器
在Vue中提供了单独的配置去监听变量的变化，这个配置项就是：watch
2.1 监听器的基本用法
对于watch来说，当被监听对象发生改变时会调用监听的回调函数（handler）：
具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://v2.cn.vuejs.org/js/vue.js"></script> <title>梦开始的地方</title> <style> input{ width: 200px; height: 20px; } </style> </head> <body> <div id="root"> 输入b站视频连接: <input v-model="msg"><br> 变化: {{info}} </div> </body> <script type="text/javascript"> new Vue({ el:"#root", 、 data:{ msg:"hello", info:"没变化" }, watch:{ msg:{ handler(oldValue,newValue){ this.info = `之前是${oldValue}，现在是${newValue}。`; } } } }) </script> </html> 除此之外，你还可以用vm去创建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://v2.cn.vuejs.org/js/vue.js"></script> <title>梦开始的地方</title> <style> input{ width: 200px; height: 20px; } </style> </head> <body> <div id="root"> 输入b站视频连接: <input v-model="msg"><br> 变化: {{info}} </div> </body> <script type="text/javascript"> let vm = new Vue({ el:"#root", data:{ msg:"hello", info:"没变化" }, }); vm.$watch('msg',function(oldValue,newValue){ this.info = `之前是${oldValue}，现在是${newValue}。`; }); </script> </html>
2.2 监听器的各种配置
- deep
- immediate
deepimmediate:true,<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://v2.cn.vuejs.org/js/vue.js"></script> <title>梦开始的地方</title> <style> input{ width: 50px; height: 20px; } </style> </head> <body> <div id="root"> <h1>{{mark.subject}}</h1> 当前学习进度：{{mark.process}} % <br> 输入要修改的值：<input type="text" v-model="newValue"> <button @click="changeProcess">确认</button> </div> </body> <script type="text/javascript"> let vm = new Vue({ el:"#root", data:{ newValue:0, mark:{ subject:"Vue课程学习进度", process:30 } }, watch:{ mark:{ deep:true, //开启深度监听，即遇到对象时对象成员变化也会触发handler immediate:true, //开启立即执行，即刚一开始dom渲染也会被调用一次 handler(oldV,newV){ if(!newV){ return; //把这个注释掉可以体会下有无immediate的区别 } alert("老师修改进度为："+ newV.process); } } }, methods: { changeProcess(){ this.mark.process = this.newValue; } }, }); </script> </html>
2.3 监听的两种简写方式
如果要使用监听的简写方式意味着你放弃了配置 immediate 和 deep 属性
就是将，原本配置对象的地方，改为一个函数，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://v2.cn.vuejs.org/js/vue.js"></script> <title>梦开始的地方</title> <style> input{ width: 200px; height: 20px; } </style> </head> <body> <div id="root"> 输入b站视频连接: <input v-model="msg"><br> 变化: {{info}} </div> </body> <script type="text/javascript"> new Vue({ el:"#root", data:{ msg:"hello", info:"没变化" }, watch:{ msg(oldValue,newValue){ this.info = `之前是${oldValue}，现在是${newValue}。`; } } }) </script> </html>
The More
本节完~~~~
