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. ceph数据重构原理

    本文分享自天翼云开发者社区<ceph数据重构原理>,作者:x****n 在分布式存储系统Ceph中,硬盘故障是一种常见问题.为了保证数据安全,当发生硬盘故障后,分布式存储系统会依据算法对故 ...

  2. xshell连接服务器无法用password登录，只能用public key的解决办法

    xshell无法用password登录服务器,只能用public key的解决办法 只能用public key登录, 那么我们用阿里云后台的远程连接按钮进入服务器,进入后 修改/etc/ssh/ssh ...

  3. Markdown文件上传到博客图片处理

    Markdown文件上传到博客图片处理 在本地编写Markdown文章并准备上传到博客园时,经常会遇到的一个挑战是本地图片无法直接显示,因为它们存储在本地文件系统中.为了解决这个问题,有两种常见的策略 ...

  4. Kyuubi支持Iceberg配置

    一.简述 Kyuubi调用Spark来查询iceberg表,修改Spark配置信息即可. 二.服务配置 1.上传jar包到Kyuubi server节点 可以选择emr spark组件后,按照配置组( ...

  5. FreeModbus源码详解（转）

    学习转载原文链接: https://blog.csdn.net/golf_research/article/details/52240739 https://blog.csdn.net/u014748 ...

  6. SMOTE算法解决样本不平衡

    首先,看下Smote算法之前,我们先看下当正负样本不均衡的时候,我们通常用的方法: 抽样 常规的包含过抽样.欠抽样.组合抽样 过抽样:将样本较少的一类sample补齐 欠抽样:将样本较多的一类samp ...

  7. Docker安装及卸载小白教程(附基本使用命令)

    第一种:宝塔面板 安装最新版宝塔面板,左侧docker进去安装,等着完成就好 第二种:命令安装 在终端root用户下,依次输入下方指令安装 1.yum包更新到最新 yum update 2.安装需要的 ...

  8. 洛谷P11380 [GESP202412 八级] 排队 题解

    数据太可恶了,竟然有重边!!! 题目传送门. 显然一道简单图论题. 把 \(a_i\) 和 \(b_i\) 的关系想象成一条有向边,于是可以得出:如果 \(x\) 的出度大于 \(1\) 或者 \(x ...

  9. vivo 大规模容器集群运维平台实践

    作者:来自 vivo 互联网服务器团队- Zhou Qi .Kong Manyu 容器平台已经成为支持应用运维和部署的重要基础设施,当前 vivo 内部容器平台共有20+生产集群,管理数万物理机节点, ...

  10. 【刚度矩阵推导】2d frame 单元

    2d frame 单元是x-y平面上的单元,每个节点上有2个平移自由度的和一个转动自由度.局部坐标系下,单元位移向量为: \( u=[ u_1 ,u_2 ,u_3, u_4, u_5, u_6]^{T ...