零基础入门Vue之窥探大法——计算与侦听

  • 零基础入门Vue之窥探大法——计算与侦听已关闭评论
  • 32 次浏览
  • A+
所属分类:Web前端
摘要

在 上一小节 我介绍了我学习vue入门 插值语法 的过程。在本篇,我将记录我对vue的 计算属性和侦听器 的学习记录


前言

上一小节 我介绍了我学习vue入门 插值语法 的过程。

在本篇,我将记录我对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

计算属性缓存-vs-方法

计算属性-vs-侦听属性

本节完~~~~