详解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 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 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
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
Python交互式图形编程的实现
2019/07/25 Python
python绘制汉诺塔
2021/03/01 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
工厂会计员职责
2014/02/06 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
部门年终奖分配方案
2014/05/07 职场文书
毕业生求职信范文
2014/06/29 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
思品教学工作总结
2015/08/10 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
python 网络编程要点总结
2021/06/18 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS