追求卓越一諾千金

藍藍設計_||青田封门青,2011年成立-20l8跑狗新图,主創清華團隊_|_n85软件下载,專注軟件和互聯網ui設計開發--金丝蓉。擅長企業信息化管理_-家门的荣光国语版百度影音、監控-168彩怎么下载、大數據軟件UIUE谘詢和設計開發服務-能看cctv5的网络电视。立足UI|_-白洁在亲戚家被陈三日,好好學習--|优信彩票,天天進步|__张铁泉为何孤身一人!


7個有用的Vue開發技巧

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


如果您想訂閱本博客內容_-大运河开凿于,每天自動發到您的郵箱中|-_诛仙飞升, 請點這裏

1 狀態共享

隨著組件的細化|_-锐度绳艺,就會遇到多組件狀態共享的情況_-|1q币购物券怎么用,Vuex當然可以解決這類問題问道信,不過就像Vuex官方文檔所說的|_上海静安火灾,如果應用不夠大|_-福建保险网,為避免代碼繁瑣冗餘|||金盟减肥药,最好不要使用它--约彩彩票注册不了,今天我們介紹的是vue.js 2.6新增加的Observable API -_星际2人族大讲堂,通過使用這個api我們可以應對一些簡單的跨組件數據狀態共享的情況-|高清主题。


如下這個例子||-黄河电视台直播,我們將在組件外創建一個store__四川教育学院温江校区,然後在App.vue組件裏麵使用store.js提供的store和mutation方法|__刘胡兰电影,同理其它組件也可以這樣使用-_|纽埃岛,從而實現多個組件共享數據狀態-_|云南鼎通贵金属。


首先創建一個store.js||鱼精蛋白锌胰岛素,包含一個store和一個mutations|_盐城杀人案,分別用來指向數據和處理方法__荷兰朵奶粉价格。



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對數據進行劫持--|111彩票骗局,來實現視圖響應數據的變化||警车开道铃声,然而有些時候我們的組件就是純粹的數據展示__|艳艳乡村全文阅读,不會有任何改變__盈彩国际吧,我們就不需要vue來劫持我們的數據--东港宋老六,在大量數據展示的情況下--|聚美优品网站打不开,這能夠很明顯的減少組件初始化的時間|-_钢水脱氧,那如何禁止vue劫持我們的數據呢__陈丽华简历?可以通過object.freeze方法來凍結一個對象-|-诛仙漫画下载,一旦被凍結的對象就再也不能被修改了--雪弗莱乐驰。



export default {

data: () => ({

users: {}

}),

async created() {

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

this.users = Object.freeze(users);

}

};

複製代碼

另外需要說明的是___易富娱乐彩票,這裏隻是凍結了users的值__|芙蓉中路二手房,引用不會被凍結_|-靖州红网,當我們需要reactive數據的時候|咖啡恋人馆,我們可以重新給users賦值_|新沂style。



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 去除多餘的樣式

隨著項目越來越大_-|柏原崇 佟丽娅,書寫的不注意_-|门德尔松无词歌,不自然的就會產生一些多餘的css---银沙湾,小項目還好|-|诺基亚n79主题下载,一旦項目大了以後-_许家印专机,多餘的css會越來越多||-20018青蛙彩开奖直播,導致包越來越大|--无毒刷q币软件,從而影響項目運行性能||魅力研习社21期,所以有必要在正式環境去除掉這些多餘的css_-善淘网首页,這裏推薦一個庫purgecss__疥舒宁多少钱,支持CLI-1288彩票合法吗、JavascriptApi-门头沟歌华有线电话、Webpack等多種方式使用-_采菊苑业主论坛,通過這個庫_至尊争霸彩票是真的吗,我們可以很容易的去除掉多餘的css-|-殷世航一个月赚多少钱。


我做了一個測試|_qq2009手机版,在線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 作用域插槽

利用好作用域插槽可以做一些很有意思的事情||-解放军胸章,比如定義一個基礎布局組件A|-_幻想情侣演员表,隻負責布局-_中国达人秀张冯喜初赛,不管數據邏輯|_-张铁泉为何孤身一人,然後另外定義一個組件B負責數據處理_村姑图片,布局組件A需要數據的時候就去B裏麵去取-_永盛彩票开奖网站。假設|_优选彩票平台好不好,某一天我們的布局變了---作战场景布置,我們隻需要去修改組件A就行|__大旱之年,而不用去修改組件B移动3g网络覆盖查询,從而就能充分複用組件B的數據處理邏輯_山西考试招生网登录,關於這塊我之前寫過一篇實際案例||_苏州街长远天地,可以點擊這裏查看--38在线彩票。


這裏涉及到的一個最重要的點就是父組件要去獲取子組件裏麵的數據-|_万兽之国(h)人蛇,之前是利用slot-scope--|优乐彩票,自vue 2.6.0起-_|盐城一中,提供了更好的支持 slot和 slot-scope 特性的 API 替代方案|大冶热线。


比如_-sky浪翻云博客,我們定一個名為current-user的組件|_真崎航ed2k:



<span>

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

</span>

複製代碼

父組件引用current-user的組件__-cf迷茫,但想用名替代姓(老外名字第一個單詞是名___长微博工具,後一個單詞是姓)-|湖南移动梦网营业厅:



<current-user>

{{ user.firstName }}

</current-user>

複製代碼

這種方式不會生效|-_莱州教育科研网,因為user對象是子組件的數據--_艾达王h,在父組件裏麵我們獲取不到|__苏州作品版权登记,這個時候我們就可以通過v-slot 來實現__-苦参总碱。


首先在子組件裏麵__|2018政府打击云联惠,將user作為一個<slot>元素的特性綁定上去|__2018公安部对云联惠:



<span>

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

{{ user.lastName }}

</slot>

</span>

複製代碼

之後-|_31选7走势图福建省,我們就可以在父組件引用的時候||-168彩票能不能投注,給v-slot帶一個值來定義我們提供的插槽 prop 的名字_--成都到雅安多少公里:



<current-user>

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

{{ slotProps.user.firstName }}

</template>

</current-user>

複製代碼

這種方式還有縮寫語法-_-栾城贴吧,可以查看獨占默認插槽的縮寫語法-_-众购彩票娱乐,最終我們引用的方式如下|_|夫妻轩:



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

{{ slotProps.user.firstName }}

</current-user>

複製代碼

相比之前slot-scope代碼更清晰||演员表,更好理解|_-149期买马欲钱买。


5 屬性事件傳遞

寫過高階組件的童鞋可能都會碰到過將加工過的屬性向下傳遞的情況__|智胜软件彩票,如果碰到屬性較多時|-卡卓刀专卖,需要一個個去傳遞--_168彩票提不出款,非常不友好並且費時_--2018街拍偷拍下体走光,有沒有一次性傳遞的呢(比如react裏麵的{...this.props})_|美海军连发5视频?答案就是v-bind和v-on_--易彩网app。


舉個例子|306定投,假如有一個基礎組件BaseList亿贝平台app,隻有基礎的列表展示功能-|贺岁档电影,現在我們想在這基礎上增加排序功能_-注册有送彩金的彩票,這個時候我們就可以創建一個高階組件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 函數式組件

函數式組件||空军耳鼻喉科,即無狀態|-|食品生产经营人员多久必须进行健康检查,無法實例化--_吉全手机论坛,內部沒有任何生命周期處理方法_|nds好玩的游戏,非常輕量||晚托网,因而渲染性能高-|视界窗教育,特別適合用來隻依賴外部數據傳遞而變化的組件--|cf女角色h。


寫法如下--注册送30元彩金平台:


在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-__14场胜负彩最新预测,如果父組件監聽到子組件掛載mounted就做一些邏輯處理|鹰彩漆,常規的寫法可能如下__众益彩票合法吗:



// Parent.vue

<Child @mounted="doSomething"/>

// Child.vue

mounted() {

this.$emit("mounted");

}

複製代碼

這裏提供一種特別簡單的方式__|非常了得 陈星光,子組件不需要任何處理_|远博娱乐,隻需要在父組件引用的時候通過@hook來監聽即可--掌上彩票超级赛车,代碼重寫如下_苹果属于哪类水果:



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

複製代碼

當然這裏不僅僅是可以監聽mounted||盈彩网计划怎么样,其它的生命周期事件-__诺基亚3600s拆机,例如_-360全国彩票开奖公告查询:created||038彩票网信得过吗,updated等都可以诸神竞技场bug,是不是特別方便~


參考鏈接__|诺基亚翻盖手机大全:


vueTips

vuePost


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-2019年香港极准生肖诗,為期望卓越的國內外企業提供卓越的UI界麵設計|_2009版qq下载、BS界麵設計 -_-菏泽医专吧、 cs界麵設計 --12期富婆看图肖特、 ipad界麵設計 ||_辽宁电视台都市频道、 包裝設計 ---藤步阁、 圖標定製 --掌上足球竞彩、 用戶體驗 |天府新区总体规划、交互設計_掌上彩票客户端、 網站建設 ___01彩票是不是骗局、平麵設計服務|-|石家庄北站电话。


標簽: 7個有用的Vue開發技巧 « |學會版式的N個Tips|—線要怎樣用_|神州租车车型,才能讓你的設計更加分 | 頂部導航欄設計樣式彙總»


訂閱Rss