追求卓越一諾千金

藍藍設計-_|武汉的小吃,2011年成立|--365彩票还能买吗,主創清華團隊|-106在线彩票平台108,專注軟件和互聯網ui設計開發|_5320手机软件下载。擅長企業信息化管理-_|腋自清、監控|_盈彩彩票是不是黑网、大數據軟件UIUE谘詢和設計開發服務__5iwwe。立足UI--哑巴新娘小说,好好學習-_赢彩彩票苹果版,天天進步--_群主被砍死!


7個有用的Vue開發技巧

2019-7-5 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容_-霸气行会名字,每天自動發到您的郵箱中蕙兰凝胶, 請點這裏

1 狀態共享

隨著組件的細化_|ca4353航班,就會遇到多組件狀態共享的情況|_|整理英文,Vuex當然可以解決這類問題_|深圳公牛通讯,不過就像Vuex官方文檔所說的||淘宝网上开店,如果應用不夠大--_衡水热线专业聊天室,為避免代碼繁瑣冗餘-_复婚进行时,最好不要使用它|黑鸭子图片,今天我們介紹的是vue.js 2.6新增加的Observable API -读书阁,通過使用這個api我們可以應對一些簡單的跨組件數據狀態共享的情況_欢乐谷死人。


如下這個例子_|全球鹰熊猫怎么样,我們將在組件外創建一個store_|意林少年版在线阅读,然後在App.vue組件裏麵使用store.js提供的store和mutation方法_--掌上足球世界杯版,同理其它組件也可以這樣使用--众盈彩票的骗局揭秘,從而實現多個組件共享數據狀態|__cctv6直播。


首先創建一個store.js-||九纵新一团,包含一個store和一個mutations--乐乐滋,分別用來指向數據和處理方法|-惊爆游戏h。



import Vue from "vue";

export const store = Vue.observable({ count: 0 });

export const mutations = {

setCount(count) {

store.count = count;

}

};

複製代碼

然後在App.vue裏麵引入這個store.js|-|姜培琳 刘军,在組件裏麵使用引入的數據和方法



<template>

<div id="app">

<img width="25%" src="./assets/logo.png">

<p>count:{{count}}</p>

<button @click="setCount(count+1)">+1</button>

<button @click="setCount(count-1)">-1</button>

</div>

</template>

<script>

import { store, mutations } from "./store";

export default {

name: "App",

computed: {

count() {

return store.count;

}

},

methods: {

setCount: mutations.setCount

}

};

</script>

<style>

複製代碼

你可以點擊在線DEMO查看最終效果


2 長列表性能優化

我們應該都知道vue會通過object.defineProperty對數據進行劫持||-叶彤倩,來實現視圖響應數據的變化-288彩票平台,然而有些時候我們的組件就是純粹的數據展示-__铁路调度系统,不會有任何改變-|365彩票平台官方网站,我們就不需要vue來劫持我們的數據|优彩娱乐正规的吗,在大量數據展示的情況下||构橘,這能夠很明顯的減少組件初始化的時間|-盈盈彩票网首页,那如何禁止vue劫持我們的數據呢|__倚天2龙驹私服?可以通過object.freeze方法來凍結一個對象|-_cctv13在线直播下载,一旦被凍結的對象就再也不能被修改了_|-优选彩票是真的吗。



export default {

data: () => ({

users: {}

}),

async created() {

const users = await axios.get("/api/users");

this.users = Object.freeze(users);

}

};

複製代碼

另外需要說明的是|_|7369电影下载,這裏隻是凍結了users的值__江民杀毒离线升级包,引用不會被凍結__|有线电视接收器,當我們需要reactive數據的時候_|-邵长老在哪,我們可以重新給users賦值_||1980平台登录。



export default {

data: () => ({

users: []

}),

async created() {

const users = await axios.get("/api/users");

this.users = Object.freeze(users);

},

methods:{

// 改變值不會觸發視圖響應

this.users[0] = newValue

// 改變引用依然會觸發視圖響應

this.users = newArray

}

};

複製代碼

3 去除多餘的樣式

隨著項目越來越大|_bt核电站,書寫的不注意--_csol防沉迷系统,不自然的就會產生一些多餘的css-_灵宝党政公众网,小項目還好-||湖南移动梦网,一旦項目大了以後|金丝蓉,多餘的css會越來越多|||永盛娱乐是什么平台,導致包越來越大_||王恒升,從而影響項目運行性能|-|掌上彩票官网登录,所以有必要在正式環境去除掉這些多餘的css_||优乐彩赢了可以提现吗,這裏推薦一個庫purgecss_监察特使,支持CLI_|突袭宝库、JavascriptApi-_365彩票平台官方网站、Webpack等多種方式使用||3号彩票的软件神器,通過這個庫||红米手机td版是什么意思,我們可以很容易的去除掉多餘的css-腾讯包钢股份。


我做了一個測試_云联惠2018年最新消息,在線DEMO



<h1>Hello Vanilla!</h1>

<div>

We use Parcel to bundle this sandbox, you can find more info about Parcel

<a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.

</div>

複製代碼


body {

font-family: sans-serif;

}

a {

color: red;

}

ul {

li {

list-style: none;

}

} import Purgecss from "purgecss";

const purgecss = new Purgecss({

content: ["**/*.html"],

css: ["**/*.css"]

});

const purgecssResult = purgecss.purge();


終產生的purgecssResult結果如下--|爱聊网,可以看到多餘的a和ul標簽的樣式都沒了


4 作用域插槽

利用好作用域插槽可以做一些很有意思的事情||_青橙青云1,比如定義一個基礎布局組件A-|htcg11报价,隻負責布局||_长寿益民网,不管數據邏輯-|_云顶国际能提现吗,然後另外定義一個組件B負責數據處理__易网彩票安装,布局組件A需要數據的時候就去B裏麵去取-图文日志。假設_花溪花溪,某一天我們的布局變了___盐城招标,我們隻需要去修改組件A就行|谁能百里挑一20130511,而不用去修改組件B_-恩典在线系统查经,從而就能充分複用組件B的數據處理邏輯_-_2019世界杯猜球彩票,關於這塊我之前寫過一篇實際案例|365彩票快3,可以點擊這裏查看__沈阳网通宽带测速。


這裏涉及到的一個最重要的點就是父組件要去獲取子組件裏麵的數據||102彩票app,之前是利用slot-scope||盈盈彩平台,自vue 2.6.0起-_订造,提供了更好的支持 slot和 slot-scope 特性的 API 替代方案__运鸿宾馆。


比如-105彩票登录,我們定一個名為current-user的組件_--家门的荣光百度影音:



<span>

<slot>{{ user.lastName }}</slot>

</span>

複製代碼

父組件引用current-user的組件_||万能上分器,但想用名替代姓(老外名字第一個單詞是名_-铜皮规格,後一個單詞是姓)-|刘一冰:



<current-user>

{{ user.firstName }}

</current-user>

複製代碼

這種方式不會生效_||众途汽车行业软件,因為user對象是子組件的數據__八马赛珍珠5800价格,在父組件裏麵我們獲取不到|_辽宁财政企业服务网,這個時候我們就可以通過v-slot 來實現|lame exe。


首先在子組件裏麵-369彩票官网,將user作為一個<slot>元素的特性綁定上去-|-网络知识学习:



<span>

<slot v-bind:user="user">

{{ user.lastName }}

</slot>

</span>

複製代碼

之後__-性价比笔记本电脑,我們就可以在父組件引用的時候-||衣尚网,給v-slot帶一個值來定義我們提供的插槽 prop 的名字|_金华艾克医院院长孙尚见:



<current-user>

<template v-slot:default="slotProps">

{{ slotProps.user.firstName }}

</template>

</current-user>

複製代碼

這種方式還有縮寫語法281彩票,可以查看獨占默認插槽的縮寫語法|__雯雅婷漫画全集,最終我們引用的方式如下--_094彩票:



<current-user v-slot="slotProps">

{{ slotProps.user.firstName }}

</current-user>

複製代碼

相比之前slot-scope代碼更清晰__36选7好彩3奖金多少,更好理解--永盛线路。


5 屬性事件傳遞

寫過高階組件的童鞋可能都會碰到過將加工過的屬性向下傳遞的情況||44800,如果碰到屬性較多時-234天天彩票app下载,需要一個個去傳遞__22选5河南最新开奖,非常不友好並且費時_|雷霆咆哮打野出装,有沒有一次性傳遞的呢(比如react裏麵的{...this.props})-_钱塘老娘舅2013直播?答案就是v-bind和v-on|-芬兰语词典。


舉個例子|||全球通m值兑换话费,假如有一個基礎組件BaseList_|_11选5,隻有基礎的列表展示功能-|_陈丽华 前夫,現在我們想在這基礎上增加排序功能__画蛇添足文言文翻译,這個時候我們就可以創建一個高階組件SortList|_铲形币。



<!-- SortList  -->

<template>

<BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList>

</template>

<script>

import BaseList from "./BaseList";

// 包含了基礎的屬性定義

import BaseListMixin from "./BaseListMixin";

// 封裝了排序的邏輯

import sort from "./sort.js";

export default {

props: BaseListMixin.props,

components: {

BaseList

}

};

</script>

複製代碼

可以看到傳遞屬性和事件的方便性_-_阜新华博网,而不用一個個去傳遞


6 函數式組件

函數式組件|_盈彩在线平台是什么,即無狀態-_苏缇雅,無法實例化_|168下载最新下载,內部沒有任何生命周期處理方法-_111彩票cc手机APP,非常輕量_-|神雕之帝王再生,因而渲染性能高-|-空间爱情留言代码,特別適合用來隻依賴外部數據傳遞而變化的組件|-至尊彩网站12。


寫法如下|_清东陵地宫:


在template標簽裏麵標明functional

隻接受props值

不需要script標簽


<!-- App.vue -->

<template>

<div id="app">

<List

:items="['Wonderwoman', 'Ironman']"

:item-click="item => (clicked = item)"

/>

<p>Clicked hero: {{ clicked }}</p>

</div>

</template>

<script>

import List from "./List";

export default {

name: "App",

data: () => ({ clicked: "" }),

components: { List }

};

</script>

複製代碼


<!-- List.vue 函數式組件 -->

<template functional>

<div>

<p v-for="item in props.items" @click="props.itemClick(item);">

{{ item }}

</p>

</div>

</template>

複製代碼

7 監聽組件的生命周期

比如有父組件Parent和子組件Child_--嘉兴口碑网,如果父組件監聽到子組件掛載mounted就做一些邏輯處理|--2019海南七星彩规律图,常規的寫法可能如下-_上海静安火灾:



// Parent.vue

<Child @mounted="doSomething"/>

// Child.vue

mounted() {

this.$emit("mounted");

}

複製代碼

這裏提供一種特別簡單的方式-|_至尊时时彩票平台,子組件不需要任何處理|掌上纵横平台下载,隻需要在父組件引用的時候通過@hook來監聽即可|_qq空间克隆代码,代碼重寫如下__piaoxinhui:



<Child @hook:mounted="doSomething"/>

複製代碼

當然這裏不僅僅是可以監聽mounted-_|雪碧真我篮球六人行,其它的生命周期事件|-天描商场,例如--_太湖县花亭湖:created_|-掌上彩票官网登录,updated等都可以___镇江老兵事件最新进展,是不是特別方便~


參考鏈接|_淘宝网股票代码:


vueTips

vuePost


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-_|推百拉,為期望卓越的國內外企業提供卓越的UI界麵設計||保定天鹅小区、BS界麵設計 |__匪我思存 花颜、 cs界麵設計 ||花萝卜网、 ipad界麵設計 |__镀铬杆、 包裝設計 -|品堂色、 圖標定製 |_-四川电信综合调度网址、 用戶體驗 |_-亿彩彩票客服、交互設計__-009彩票靠谱吗、 網站建設 -|shsh是什么、平麵設計服務|-|众购彩票手机官网。


標簽: 7個有用的Vue開發技巧 « |學會版式的N個Tips|—線要怎樣用||_168彩票官网登录苹果,才能讓你的設計更加分 | 頂部導航欄設計樣式彙總»


訂閱Rss