首頁 > 開發者 > JavaScript
詳解Vue的computed(計算屬性)使用執行個體之TodoList，computedtodolist
最近倒騰了一會vue，有點迷惑其中methods與computed這兩個屬性的區別,所以試著寫了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看看
可以看到，message並沒有變，還是原來的message，然後在控制台中修改message試試，
修改後我並沒有人為的觸發任何函數，左邊的顯示就變成了新的數組的偶數選集
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>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
