成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

waruqi / 1204人閱讀

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

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

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

  /*html*/
  

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

通過在input標(biāo)簽中的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(){ //篩選偶數(shù)
            return this.message.filter(function(item){
                return item%2 === 0;
            });
        },
    },
});

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


可以看到，message并沒有變，還是原來的message，然后在控制臺中修改message試試，

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

3. 區(qū)別

methods是一種交互方法，通常是把用戶的交互動作寫在methods中；而computed是一種數(shù)據(jù)變化時(shí)mvc中的module 到 view 的數(shù)據(jù)轉(zhuǎn)化映射。
簡單點(diǎn)講就是methods是需要去人為觸發(fā)的，而computed是在檢測到data數(shù)據(jù)變化時(shí)自動觸發(fā)的，還有一點(diǎn)就是，性能消耗的區(qū)別，這個好解釋。
首先，methods是方式，方法計(jì)算后垃圾回收機(jī)制就把變量回收，所以下次在要求解篩選偶數(shù)時(shí)它會再次的去求值。而computed會是依賴數(shù)據(jù)的，就像閉包一樣，數(shù)據(jù)占用內(nèi)存是不會被垃圾回收掉的，所以再次訪問篩選偶數(shù)集，不會去再次計(jì)算而是返回上次計(jì)算的值，當(dāng)data中的數(shù)據(jù)改變時(shí)才會重新計(jì)算。簡而言之，methods是一次性計(jì)算沒有緩存，computed是有緩存的計(jì)算。

4. TodoList例子

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




    
    todos
    
    


    

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/51126.html

相關(guān)文章

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

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

    lk20150415 評論0 收藏0

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

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

    Richard_Gao 評論0 收藏0

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

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

    NSFish 評論0 收藏0

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

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

    zhaot 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<