Vue学习笔记之计算属性与侦听器用法


Posted in Javascript onDecember 07, 2019

本文实例讲述了Vue计算属性与侦听器用法。分享给大家供大家参考,具体如下:

vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染。同时,还得益于计算属性的使用:

1、计算属性

像绑定普通属性一样在模板中绑定计算属性。例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新。

利用函数方法也可以实现类似的效果,不同的是计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 firstName 还没有发生改变,再次访问 reversedName 计算属性会立即返回之前的计算结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数.

为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性 B 依赖于 A 。如果使用函数,每获得一次B就要调用一次函数进行计算,造成很大开销!

计算属性默认为get方法,也可以设定set方法,接收传入处理数据。例如传入originalName,set方法对其进行拆解并复制给firstName与lastName,并引起firstName与lastName改变,调用get()方法。

<div id="app">
    <p>{{originalName}}</p>
    <p>{{reverseName}}</p>
    <button @click="deal()">反转名字</button>
</div>
let vue=new Vue({
    el:'#app',
    data:{
      firstName:'',
      lastName:'',
      originalName:"super tory"
    },
    methods:{
      deal(){
        this.reverseName=this.originalName;
      }
    },
    computed:{            //计算属性钩子
      reverseName:{
        set(string){  //通过set方法对传入参数this.originalName进行操作
          let name=string.split(' ');
          this.firstName=name[1];
          this.lastName=name[0];
        },
        get(){      //通过get方法返回值
          return this.firstName+' '+this.lastName;
        }
      }
    }
});

2、侦听器watch

在Vue中提供一个钩子,侦听data中的某个变量是否改变,如果改变则执行响应函数。

<div id="app2">
  <input v-model="listen">
</div>
let vue2=new Vue({
  el:'#app2',
  data:{
    listen:''
  },
  watch:{      //定义侦听器钩子
    listen:function () {  //定义函数侦听listen的变化
      console.log("input内容发生改变");
    }
  }
});

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 #Javascript
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 #Javascript
js实现图片粘贴到网页
Dec 06 #Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 #Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 #Javascript
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python list格式数据excel导出方法
2018/10/31 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
python实现淘宝购物系统
2019/10/25 Python
flask框架中的cookie和session使用
2021/01/31 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
医学生自荐信范文
2013/12/03 职场文书
先进个人事迹材料
2014/01/25 职场文书
总会计师岗位职责
2014/02/19 职场文书
大学生就业意向书范文
2014/04/01 职场文书
营销与策划实训报告
2014/11/05 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
工厂无线对讲系统解决方案
2022/02/18 无线电
Docker官方工具docker-registry案例演示
2022/04/13 Servers
使用python绘制分组对比柱状图
2022/04/21 Python