详解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 相关文章推荐
angularJS中router的使用指南
Feb 09 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
详解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
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php session劫持和防范的方法
2013/11/12 PHP
php中执行系统命令的方法
2015/03/21 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
python实现红包裂变算法
2016/02/16 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
夫妻双方自愿离婚协议书
2014/10/24 职场文书
优秀班组申报材料
2014/12/25 职场文书
市场营销计划书范文
2015/01/16 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL