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 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
js创建对象的方法汇总
Jan 07 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
动态添加js事件实现代码
2009/03/12 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Java的五个基础面试题
2016/02/26 面试题
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
单位委托书范本(3篇)
2014/09/18 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2015年重阳节主持词
2015/07/04 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Java 关于String字符串原理上的问题
2022/04/07 Java/Android