Vue的computed(計算屬性)使用實例之TodoList

lk20150415 發布于2019-08-20 18:34 / 2109人閱讀

摘要：最近倒騰了一會，有點迷惑其中與這兩個屬性的區別所以試著寫了這個，好土掩面逃類似中組件的方法，不同的是采用的與綁定事件。簡而言之，是一次性計算沒有緩存，是有緩存的計算。

最近倒騰了一會vue，有點迷惑其中methods與computed這兩個屬性的區別,所以試著寫了TodoList這個demo，(好土掩面逃~）;

1. methods

methods類似react中組件的方法，不同的是vue采用的與html綁定事件。
給個例子

  /*html*/
  

  /*js*/
  var app = new Vue({
        el:"#app",
        methods:{
            handlClick:function(){
                alert("succeed!");
            },
        }
    })

通過在input標簽中的vue命令 v-on命令綁定handlClick事件，而handlClick事件是寫在methods屬性里的

2. computed

/*html*/
{{even}}
/*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"=的簡寫




    
    todos
    
    


    
        
        
        
            
                {{item.text}}
                完成

云服務器 GPU云服務器 vue的計算屬性 vue實例屬性 vue.js 屬性修改實例屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84703.html

Vue的computed(計算屬性)使用實例之TodoList

摘要：最近倒騰了一會，有點迷惑其中與這兩個屬性的區別所以試著寫了這個，好土掩面逃類似中組件的方法，不同的是采用的與綁定事件。簡而言之，是一次性計算沒有緩存，是有緩存的計算。最近倒騰了一會vue，有點迷惑其中methods與computed這兩個屬性的區別,所以試著寫了TodoList這個demo，(好土掩面逃~）; 1. methods methods類似react中組件的方法，不同的是v...

waruqi 2019-08-01 17:22 評論0 收藏0
Vue_簡單項目todolist

摘要：強大的漸進式渲染引擎使得我們越來越不需要手動控制數據的變化，那么下面我們來看一看。上面所有的依賴在下面引入就可以了。 Vue強大的漸進式渲染引擎使得我們越來越不需要手動控制數據的變化，那么下面我們來看一看。如何用Vue寫一個todolist。開始首先，創建一個文件夾，用命令行初始化npm init -y然后安裝需要的插件npm i -S underscore vue todomvc...

Richard_Gao 2019-08-21 17:35 評論0 收藏0
todolist--初學者練習使用vuejs方法

摘要：我們都知道，現在的前端開發的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用寫的一個的整個過程。我們都知道，現在Vuejs的前端開發的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用vue寫的一個todolist的整個過程。 1.新建一個文件夾，配置環境變量安裝的命令行有： npm init -y npm i -S tod...

NSFish 2019-08-21 17:37 評論0 收藏0
Vue中如何使用方法、計算屬性或觀察者

摘要：如何實現一個查看在線在中我們放置了一些事件處理方法，我們可以在事件綁定中直接應用，不會依賴于任何的屬性。例如計算屬性依賴于屬性，只要屬性發生變化，我們的也會發生變化，從而篩選出我們需要的數據。熟悉 Vue 的都知道方法methods、計算屬性computed、觀察者watcher 在 Vue 中有著非常重要的作用，有些時候我們實現一個功能的時候可以使用它們中任何一個都是可以的，但是...

zhaot 2019-08-23 12:37 評論0 收藏0