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. 开源数据库生态遇新变数，天翼云TeleDB提供企业数据管理更优解！

    近日,知名开源大规模并行处理 (MPP) 数据库Greenplum的源代码在其官方GitHub页面突然消失,引发了用户和开发者的广泛关注, PostgreSQL生态系统或将产生新变数.开源软件在面对商 ...

  2. 解决yarn打包时出现“FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory”的问题

    1.问题描述 我们在使用yarn命令对项目进行打包时,可能会出现如下的错误信息 "FATAL ERROR: Reached heap limit Allocation failed - Ja ...

  3. FLink同步mysql到Iceberg丢数问题排查解决

    一.问题背景 数据对比程序发现通过Flink cdc同步mysql写入Iceberg表运行一段时间后存在丢数问题,排查到丢数是由于hivemetastore钩子函数缺陷引起,由腾讯云EMR修复 钩子函 ...

  4. mac spark+hive+hadoop 数据分析环境搭建(单机简版)

    apache产品下载地址: http://archive.apache.org/dist/ mysql5.6 brew方式安装配置: Icon   mysql做为元数据存储使用. brew searc ...

  5. VSCode Romote SSH连接远程主机经常初始化？10个解决方法！!

    解决方法: 删除远程主机上的 .vscode-server 文件夹:这个文件夹包含 VSCode 的远程服务器组件.如果这个文件夹损坏或配置不正确,会导致连接问题.删除并重新安装可以确保服务器组件是干 ...

  6. 安川Yaskawa机器人DX100示教器维修的方法

    安川Yaskawa机器人DX100示教器维修的优劣势分析 安川Yaskawa机器人示教编程,工业机器人维修,即操作人员经过安川机器人示教器,ABB机器人保养,手动操控机器人的关节运动,以使机器人运动到 ...

  7. 『Python底层原理』--Python属性的工作原理

    Python中的属性操作(如获取.设置和删除属性)是我们日常编程中非常常见的操作. 但你有没有想过,当我们写下obj.attr或obj.attr = value时,Python 内部究竟发生了什么? ...

  8. ubuntu更换国内镜像源备忘

    源的路径: /etc/apt/sources.list 更换前备份一下: sudo cp /etc/apt/sources.list /etc/apt/sources_init.list 打开文档,修 ...

  9. Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！

    在众多开源项目中,高颜值.功能强大且部署简单的项目往往更能俘获开发者的心.然而,实际部署 Web 应用时,面对数据库.缓存.消息队列等复杂的依赖关系,常常令人头疼.Docker 的开源为我们普及了容器 ...

  10. 从RNN、LSTM到NTM、MANN——神经网络的记忆与推理进化

    从RNN.LSTM到NTM.MANN--神经网络的记忆与推理进化 一.前言:为什么要研究记忆? (温馨提示:在阅读本文之前,请确保你已经对深度学习中最基本的概念有一定的了解,例如:激活函数.多层感知机 ...