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. 探索魔乐社区：GLM-4V-9B模型微调之旅

    人工智能的浪潮中,魔乐社区以其丰富的资源和开放的环境,逐渐成为了开发者们的新宠.今天,让我们一起走进魔乐社区,通过GLM-4V-9B模型微调的最佳实践,体验这个平台的独特魅力. 多模态的新星:GLM- ...

  2. 玩转云端 | AccessOne实用窍门之三步搞定门户网站防护与加速

    随着互联网的飞速发展,网站建设已成为企事业单位推广.提供服务的重要途径之一.在数字技术快速迭代的当下,如何在保障网站安全的前提下提供高效服务,是企事业单位需要着重考虑的内容. 网站安全防护是网站建设后 ...

  3. Jenkins插件：Git

    Jenkins插件:Git Jenkins,作为一款备受欢迎的持续集成和持续交付工具,在软件开发领域发挥着举足轻重的作用.它不仅能够与Git无缝集成,还能实现代码的自动化拉取.构建与部署,极大地提升了 ...

  4. tomcat配置用户名密码

    1.配置tomcat-user.xml<role rolename="manager-gui"/><role rolename="manager-scr ...

  5. FreeSql学习笔记——4.联表

    前言   上一章节是查询,记录了简单的查询,比较看好的是分块.Dto映射和分页,除了简单的单表查询,更多的时候要用到联表查询,毕竟设计数据库是按照范式设计,FreeSql的联表操作有导航属性.Join ...

  6. 用python做时间序列预测七：时间序列复杂度量化

    本文介绍一种方法,帮助我们了解一个时间序列是否可以预测,或者说了解可预测能力有多强. Sample Entropy (样本熵) Sample Entropy是Approximate Entropy(近 ...

  7. Django setting可以配置什么？

    Setting配置信息 注册子应用 # 注意:需要修改Django的全局配置文`settings.py`'''1. 创建子应用 1)在pycharm中创建 python manage.py start ...

  8. [BZOJ3600] 没有人的算术 题解

    妙不可言!妙绝人寰! 单点修,区间查,包是线段树的.考虑如何比较两节点大小. 考虑二叉搜索树,我们只要再给每个节点附一个权值,就可以比较了! 注意力相当惊人的注意到,假如给每个点一个区间 \([l_x ...

  9. Java8 stream 提取对象 List 中的某一字段生成新的 List

    //输出List StudentInfo.printStudents(studentList); //从对象列表中提取一列(以name为例) List<String> nameList = ...

  10. 音乐在线刮削容器部署（Music Tag Web）

    『音乐标签』Web版是一款可以编辑歌曲的标题,专辑,艺术家,歌词,封面等信息的音乐标签编辑器程序, 支持FLAC, APE, WAV, AIFF, WV, TTA, MP3, M4A, OGG, MP ...