Vue计算属性computed与监听器watch

诞生原因：在模板中放入太多的逻辑会让模板过重且难以维护，比如

  1. 对后台插入地数据进行切割重组

 <div id="example">
   {{ message.split('').reverse().join('') }}
 </div>

  1. 对后台时间数据，格式化后显示

此时应该使用计算属性，

  • 关键词computed，与methods、methods平级

  • 计算属性可以按属性来调用，因为它必须有返回值，形式上是带返回值的function，始终有return

  • 在属性内用到data参数的要使用this作为声明

  • 计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时才会重新计算求值（类似缓存，除非值更新，否则只计算一次，后续返回不再计算），下面例子里除非message的值发生改变，reverseMessage会重新计算,负责一直返回”谁是花花“

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script type="text/javascript"  src="vue.js"></script>
     </head>
     <body>
         <div id="example">
           <p>Original message: "{{ message }}"</p>
           <p>Computed reversed message: "{{ reverseMessage }}"</p>
         </div>
         <script type="text/javascript"> 
         var vm = new Vue({
             el:"#example",
             data:{
                 message:"花花是谁"
             },
             computed:{
                 reverseMessage:function(){
                     return this.message.split('').reverse().join('');
                 }
             }
         });
         </script>
     </body>
 </html>

输出：

Original message: "花花是谁"

Computed reversed message: "谁是花花"

与定义在Methods里的区别：

定义在Methods每次都会计算，不会存在缓存属性

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

 // ...
 computed: {
   fullName: {
     // getter
     get: function () {
       return this.firstName + ' ' + this.lastName
     },
     // setter
     set: function (newValue) {
       var names = newValue.split(' ')
       this.firstName = names[0]
       this.lastName = names[names.length - 1]
     }
   }
 }
 // ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器

适用场景：

  1. 用于数据变化的监听事件，类似change

  2. 比较新值、旧值的操作

如果只是获取一个拼接或者计算结果，推荐使用计算属性。官网有一个比较介绍

计算属性和侦听器 — Vue.js (vuejs.org)

所有代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script type="text/javascript"  src="vue.js"></script>
     </head>
     <body>
         <div id="example">
             <!-- 计算属性 -->
           <p>Original message: "{{ message }}"</p>
           <p>Computed reversed message: "{{ reverseMessage }}"</p>
           
           <!-- 监听器 -->
           <button type="button" @click="num++">数字自增</button>
           <p>当前num: {{ num }}</p>
         </div>
         <script type="text/javascript"> 
         var vm = new Vue({
             el:"#example",
             data:{
                 message:"花花是谁",
                 num:0
             },
             watch:{
                 num:function(newVal,oldVal){
                     console.log(newVal+"  "+ oldVal);
                 }
             },
             computed:{
                 reverseMessage:function(){
                     return this.message.split('').reverse().join('');
                 }
             }
             
         });
         </script>
     </body>
 </html>
 ​

Vue计算属性computed与监听器watch的更多相关文章

  1. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  3. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  4. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  5. Vue计算属性computed的全面解析

    前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...

  6. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  7. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

  8. vue从入门到进阶：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  9. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  10. Vue教程：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

随机推荐

  1. 浏览器自动化与AI Agent结合项目browser-use初探

    browser-use介绍 browser-use是将您的 AI 代理连接到浏览器的最简单方式.它通过提供一个强大且简单的接口来实现 AI 代理访问网站的自动化. GitHub地址:https://g ...

  2. Vulnhub-kioptix2014靶机getshell及提权

    靶机搭建 点击扫描虚拟机 然后扫描文件夹即可 信息收集 扫描ip nmap扫描得到目标靶机ip nmap -sn 192.168.108.0/24 故 攻击机:192.168.108.130 目标靶机 ...

  3. QT5笔记： 30. 二进制文件读写

    Qt 预定义类型文件 *.stm 标准二进制文件 *.dat 例子: MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include & ...

  4. Idea - 关于mybatis的插件

      idea中配置的mybatis的mapper类和xml文件的图标怎么自动变为mybatis的logo?需要安装什么插件,怎么安装?   在 IntelliJ IDEA 中,要使 MyBatis 的 ...

  5. Log4j2 中三种常见 File 类 Appender 对比与选择

    在 Log4j2 中,若不考虑 Rolling(支持滚动和压缩)类文件 Appender,则包含以下三种文件 Appender:FileAppender.RandomAccessFileAppende ...

  6. AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类

    引言 人工智能(AI)技术的迅猛发展推动了各行各业的数字化转型.图像分类,作为计算机视觉领域的核心技术之一,能够让机器自动识别图像中的物体.场景或特征,已广泛应用于医疗诊断.安防监控.自动驾驶和电子商 ...

  7. 下载文件，后端返回的是文件流，我们需要请求并下载到本地，发现下载后打开只有个undefined

    在项目里做完上传,做下载的时候,把下载的文件打开,内容却时undefined,而且接口调用成功,但是postman校验接口时下载的文件正常的,那问题又出现在前端了. 我的前端代码如下图 前端代码的话我 ...

  8. 如何解决ubuntu安装第三方deb出现的read unknown VMA问题（SUID sandbox配置问题）

    前言 众所不周知,ubuntu的snap有些让人无语凝噎的问题,比方说如果你在Ubuntu 24.04 LTS通过它安装vscode,恭喜你,你无法在vscode中输入中文,缘由不明,又或者对于str ...

  9. Redis会遇到的15个坑

    前言 如果你在使用 Redis 时,也遇到过以下这些「诡异」的场景,那很大概率是踩到「坑」了. 究竟是什么原因,导致的这些问题呢? 我把这些问题划分成了三大部分: 常见命令有哪些坑? 数据持久化有哪些 ...

  10. Python字符串前缀u、r、b、f含义（转）

    1.字符串前加 u 例子: u"字符串中有中文" 含义: 前缀u表示该字符串是unicode编码,Python2中用,用在含有中文字符的字符串前,防止因为编码问题,导致中文出现乱码 ...