详解Vue的computed(计算属性)使用实例之TodoList


Posted in Javascript onAugust 07, 2017

最近倒腾了一会vue,有点迷惑其中methodscomputed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~);

1. methods

methods类似react中组件的方法,不同的是vue采用的与html绑定事件。

给个例子

/*html*/
 <input type="button" value="点击" v-on:click='handlClick' id="app">
/*js*/
 var app = new Vue({
    el:'#app',
    methods:{
      handlClick:function(){
        alert('succeed!');
      },
    }
  })

通过在input标签中的vue命令 v-on命令绑定handlClick事件,而handlClick事件是写在methods属性里的

2. computed

/*html*/
<div id="app2">{{even}}</div>
/*js*/
var app2 = new Vue({
  el:'#app2',
  data:{
    message:[1,2,3,4,5,6]
  },
  computed:{
    even:function(){ //筛选偶数
      return this.message.filter(function(item){
        return item%2 === 0;
      });
    },
  },
});

可以看到筛选出来了message中的偶数,现在在控制台打印出message看看

详解Vue的computed(计算属性)使用实例之TodoList

可以看到,message并没有变,还是原来的message,然后在控制台中修改message试试,

详解Vue的computed(计算属性)使用实例之TodoList

修改后我并没有人为的触发任何函数,左边的显示就变成了新的数组的偶数选集

3. 区别

methods是一种交互方法,通常是把用户的交互动作写在methods中;而computed是一种数据变化时mvc中的module 到 view 的数据转化映射。

简单点讲就是methods是需要去人为触发的,而computed是在检测到data数据变化时自动触发的,还有一点就是,性能消耗的区别,这个好解释。

首先,methods是方式,方法计算后垃圾回收机制就把变量回收,所以下次在要求解筛选偶数时它会再次的去求值。而computed会是依赖数据的,就像闭包一样,数据占用内存是不会被垃圾回收掉的,所以再次访问筛选偶数集,不会去再次计算而是返回上次计算的值,当data中的数据改变时才会重新计算。简而言之,methods是一次性计算没有缓存,computed是有缓存的计算。

4. TodoList例子

看了一下Vue官网的todo例子,好像没有筛选功能,所以就写了有个筛选功能的例子,下面代码中,@click的意思是v-on='click'的简写,:class=的意思是v-bind:'class'=的简写

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>todos</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <style>
    .wrap{
      width: 400px;
      background-color: #ccc;
      margin: 0 auto;
    }
    i{
      color: #f00;
      font-size: 12px;
      margin-left: 20px;
      cursor: pointer;
    }
    i:hover{
      font-weight: 700;
    }
    ol{
      /*white-space: nowrap;*/
      word-wrap:break-word;
    }
    .done{
      text-decoration: line-through;
    }
    .not{

    }
  </style>
</head>
<body>
  <div class="wrap" id="todos">
    <input type="text" v-model='nextItem' @keyup.enter='append'>
    <button id="append" @click='append'>添加</button>
    <ol>
      <li v-for='(item,index) of comp' 
      :key=item.id
      :class='item.state ? "not" : "done"'>
        {{item.text}}
        <i @click='remove(index)'>完成</i>
      </li>
    </ol>
    <button @click='all'>全部</button>
    <button @click='done'>已完成</button>
    <button @click='todos'>待完成</button>
  </div>
</body>
<script>
  var todos = new Vue({
    el:'#todos',
    data:{
      nextItem: '',
      nextID: 1,
      list: [],
      type: null,
    },
    computed:{
      comp:function(){
        if( this.type === 0 ){
          return this.list;
        }
        else if(this.type === 1){ //show all
          return this.list.filter(function(item){
            return true;
          })
        }
        else if(this.type === 2){ //done
          return this.list.filter(function(item){
            return item.state ? false : true;
          })
        }
        else if(this.type === 3){ //todos
          return this.list.filter(function(item){
            return item.state ? true : false;
          })
        }
      }
    },
    methods:{
      append:function(){//添加到todo
        this.list.push({
          id:this.nextID++,
          text:this.nextItem,
          state: true,
        });
        this.nextItem = '';
        this.type = 0;
      },
      remove:function(index){ //添加到donelist
        this.list[index].state = !this.list[index].state;
      },
      all:function(){
        this.type = 1;
      },
      done:function(){
        this.type = 2;
      },
      todos:function(){
        this.type = 3;
      }
    }
  });
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
详解express与koa中间件模式对比
Aug 07 #Javascript
JS实现简单短信验证码界面
Aug 07 #Javascript
ReactNative Image组件使用详解
Aug 07 #Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 #Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 #Javascript
JS判断微信扫码的方法
Aug 07 #Javascript
AngularJs每天学习之总体介绍
Aug 07 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php header函数的常用http头设置
2015/06/25 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
利用Python破解验证码实例详解
2016/12/08 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python设置表格边框的具体方法
2020/07/17 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
小学中秋节活动方案
2014/02/06 职场文书
党建目标管理责任书
2014/07/25 职场文书
新闻学专业求职信
2014/07/28 职场文书
盲山观后感
2015/06/11 职场文书
创业计划书之花店
2019/09/20 职场文书