官术网_书友最值得收藏!

4.1.2 方法

methods:通過methods對(duì)象定義方法,并使用v-on指令來監(jiān)聽DOM事件。

    <button v-on:click="alert">alert</button>
    new Vue({
       el: '#app',
       data:{ a:1 },
       methods:{
         alert:function(){
         alert(this.a)
         }
       }
     })

自定義事件在初始化的時(shí)候傳入events對(duì)象,通過實(shí)例的$emit方法進(jìn)行觸發(fā)。而在Vue.js 2.0中則廢除了events選項(xiàng)屬性,不再支持事件廣播這類特性,所以直接使用Vue實(shí)例的全局方法$on/$emit(),或者使用插件Vuex來處理即可。

通過調(diào)用表達(dá)式中的methods也可以達(dá)到同樣的效果。代碼如下:

提示:不應(yīng)該使用箭頭函數(shù)來定義methods函數(shù)。

運(yùn)行的效果如圖4-3所示。

圖4-3 methods運(yùn)行效果圖(一)

從最終的結(jié)果來看,兩種方式確實(shí)是相同的。然而不同的是,計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這意味著,只要message還沒有發(fā)生改變,多次訪問reversedMessage計(jì)算屬性會(huì)立即返回以前的計(jì)算結(jié)果,而不必再次執(zhí)行函數(shù)。相比而言,只要發(fā)生重新渲染,methods調(diào)用總會(huì)執(zhí)行該函數(shù)。

代碼如下:

運(yùn)行的效果如圖4-4所示。

圖4-4 methods運(yùn)行效果圖(二)

提示:假設(shè)有一個(gè)性能開銷比較大的商城A,它需要遍歷一個(gè)極大的數(shù)組和做大量的計(jì)算,來獲取可能存在的其他商品(賴于A)。如果沒有緩存,將不可避免地多次執(zhí)行A的getter。如果不希望有緩存,則可以用methods替代。

主站蜘蛛池模板: 宣恩县| 德阳市| 会泽县| 桂林市| 邳州市| 南皮县| 泸西县| 治多县| 策勒县| 崇阳县| 清镇市| 南郑县| 乌兰察布市| 咸阳市| 绥棱县| 棋牌| 灵丘县| 石阡县| 凤城市| 平南县| 淳安县| 前郭尔| 奉节县| 奈曼旗| 黄龙县| 呼玛县| 明光市| 丽江市| 右玉县| 新化县| 丰城市| 庆元县| 田林县| 许昌县| 驻马店市| 青岛市| 漠河县| 哈巴河县| 常德市| 海林市| 西吉县|