国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList

lk20150415 / 2114人閱讀

摘要：最近倒騰了一會(huì)，有點(diǎn)迷惑其中與這兩個(gè)屬性的區(qū)別所以試著寫(xiě)了這個(gè)，好土掩面逃類(lèi)似中組件的方法，不同的是采用的與綁定事件。簡(jiǎn)而言之，是一次性計(jì)算沒(méi)有緩存，是有緩存的計(jì)算。

最近倒騰了一會(huì)vue，有點(diǎn)迷惑其中methods與computed這兩個(gè)屬性的區(qū)別,所以試著寫(xiě)了TodoList這個(gè)demo，(好土掩面逃~）;
1. methods

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

  /*html*/
  

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

通過(guò)在input標(biāo)簽中的vue命令 v-on命令綁定handlClick事件，而handlClick事件是寫(xiě)在methods屬性里的

2. computed 
/*html*/

{{even}}

/*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;
            });
        },
    },
});

可以看到篩選出來(lái)了message中的偶數(shù)，現(xiàn)在在控制臺(tái)打印出message看看


可以看到，message并沒(méi)有變，還是原來(lái)的message，然后在控制臺(tái)中修改message試試，

修改后我并沒(méi)有人為的觸發(fā)任何函數(shù)，左邊的顯示就變成了新的數(shù)組的偶數(shù)選集

3. 區(qū)別

methods是一種交互方法，通常是把用戶的交互動(dòng)作寫(xiě)在methods中；而computed是一種數(shù)據(jù)變化時(shí)mvc中的module 到 view 的數(shù)據(jù)轉(zhuǎn)化映射。
簡(jiǎn)單點(diǎn)講就是methods是需要去人為觸發(fā)的，而computed是在檢測(cè)到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ì)被垃圾回收掉的，所以再次訪問(wèn)篩選偶數(shù)集，不會(huì)去再次計(jì)算而是返回上次計(jì)算的值，當(dāng)data中的數(shù)據(jù)改變時(shí)才會(huì)重新計(jì)算。簡(jiǎn)而言之，methods是一次性計(jì)算沒(méi)有緩存，computed是有緩存的計(jì)算。

4. TodoList例子

看了一下Vue官網(wǎng)的todo例子，好像沒(méi)有篩選功能，所以就寫(xiě)了有個(gè)篩選功能的例子，
下面代碼中，@click的意思是v-on="click"的簡(jiǎn)寫(xiě)，:class=的意思是v-bind:"class"=的簡(jiǎn)寫(xiě)




    
    todos
    
    


    

        
        
        
    
            
  1. 
                {{item.text}}
                完成
            
    2.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84703.html

相關(guān)文章

  • Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList

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

    waruqi 評(píng)論0 收藏0

  • Vue_簡(jiǎn)單項(xiàng)目todolist

    摘要：強(qiáng)大的漸進(jìn)式渲染引擎使得我們?cè)絹?lái)越不需要手動(dòng)控制數(shù)據(jù)的變化，那么下面我們來(lái)看一看。上面所有的依賴在下面引入就可以了。 Vue強(qiáng)大的漸進(jìn)式渲染引擎使得我們?cè)絹?lái)越不需要手動(dòng)控制數(shù)據(jù)的變化，那么下面我們來(lái)看一看。如何用Vue寫(xiě)一個(gè)todolist。 開(kāi)始 首先，創(chuàng)建一個(gè)文件夾，用命令行初始化npm init -y然后安裝需要的插件npm i -S underscore vue todomvc...

    Richard_Gao 評(píng)論0 收藏0

  • todolist--初學(xué)者練習(xí)使用vuejs方法

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

    NSFish 評(píng)論0 收藏0

  • Vue中如何使用方法、計(jì)算屬性或觀察者

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

    zhaot 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<