詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
最近倒騰了一會(huì)vue,有點(diǎn)迷惑其中methods
與computed
這兩個(gè)屬性的區(qū)別,所以試著寫了TodoList這個(gè)demo,(好土掩面逃~);
1. methods
methods類似react中組件的方法,不同的是vue采用的與html綁定事件。
給個(gè)例子
/*html*/ <input type="button" value="點(diǎn)擊" v-on:click='handlClick' id="app">
/*js*/ var app = new Vue({ el:'#app', methods:{ handlClick:function(){ alert('succeed!'); }, } })
通過在input標(biāo)簽中的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(){ //篩選偶數(shù) return this.message.filter(function(item){ return item%2 === 0; }); }, }, });
可以看到篩選出來了message中的偶數(shù),現(xiàn)在在控制臺(tái)打印出message看看
可以看到,message并沒有變,還是原來的message,然后在控制臺(tái)中修改message試試,
修改后我并沒有人為的觸發(fā)任何函數(shù),左邊的顯示就變成了新的數(shù)組的偶數(shù)選集
3. 區(qū)別
methods是一種交互方法,通常是把用戶的交互動(dòng)作寫在methods中;而computed是一種數(shù)據(jù)變化時(shí)mvc中的module 到 view 的數(shù)據(jù)轉(zhuǎn)化映射。
簡單點(diǎn)講就是methods是需要去人為觸發(fā)的,而computed是在檢測到data數(shù)據(jù)變化時(shí)自動(dòng)觸發(fā)的,還有一點(diǎn)就是,性能消耗的區(qū)別,這個(gè)好解釋。
首先,methods是方式,方法計(jì)算后垃圾回收機(jī)制就把變量回收,所以下次在要求解篩選偶數(shù)時(shí)它會(huì)再次的去求值。而computed會(huì)是依賴數(shù)據(jù)的,就像閉包一樣,數(shù)據(jù)占用內(nèi)存是不會(huì)被垃圾回收掉的,所以再次訪問篩選偶數(shù)集,不會(huì)去再次計(jì)算而是返回上次計(jì)算的值,當(dāng)data中的數(shù)據(jù)改變時(shí)才會(huì)重新計(jì)算。簡而言之,methods是一次性計(jì)算沒有緩存,computed是有緩存的計(jì)算。
4. TodoList例子
看了一下Vue官網(wǎng)的todo例子,好像沒有篩選功能,所以就寫了有個(gè)篩選功能的例子,下面代碼中,@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>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue3實(shí)現(xiàn)一個(gè)todo-list
- vue組件編寫之todolist組件實(shí)例詳解
- 使用Vue完成一個(gè)簡單的todolist的方法
- vue實(shí)現(xiàn)留言板todolist功能
- Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
- 基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
- vue實(shí)現(xiàn)todolist單頁面應(yīng)用
- vue實(shí)現(xiàn)ToDoList簡單實(shí)例
- vue3組合式API實(shí)現(xiàn)todo列表效果
相關(guān)文章
vue-seamless-scroll無縫滾動(dòng)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue-seamless-scroll無縫滾動(dòng)組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue實(shí)現(xiàn)Excel文件的上傳與下載功能的兩種方式
這篇文章主要介紹了vue實(shí)現(xiàn)Excel文件的上傳與下載功能,本文通過兩種方式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07Vue-cli3項(xiàng)目引入Typescript的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-cli3項(xiàng)目引入Typescript的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vuex中mutations和actions的區(qū)別及說明
這篇文章主要介紹了Vuex中mutations和actions的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12Vue實(shí)現(xiàn)動(dòng)態(tài)添加或者刪除對(duì)象和對(duì)象數(shù)組的操作方法
這篇文章主要介紹了在Vue項(xiàng)目中實(shí)現(xiàn)動(dòng)態(tài)添加或者刪除對(duì)象和對(duì)象數(shù)組的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09