作者:WahFung
轉發連結:https://juejin.im/post/5e8a9b1ae51d45470720bdfa
路由參數解耦
一般在組件內使用路由參數,大多數人會這樣做:
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
複製代碼
在組件中使用 $route 會使之與其對應路由形成高度耦合,從而使組件只能在某些特定的 URL 上使用,限制了其靈活性。
正確的做法是通過 props 解耦
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: true
}]
})
複製代碼
將路由的 props 屬性設置為 true 後,組件內可通過 props 接收到 params 參數
export default {
props: ['id'],
methods: {
getParamsId() {
return this.id
}
}
}
複製代碼
另外你還可以通過函數模式來返回 props
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
複製代碼
文檔:https://router.vuejs.org/zh/guide/essentials/passing-props.html
函數式組件
函數式組件是無狀態,它無法實例化,沒有任何的生命周期和方法。創建函數式組件也很簡單,只需要在模板添加 functional 聲明即可。一般適合只依賴於外部數據的變化而變化的組件,因其輕量,渲染性能也會有所提高。
組件需要的一切都是通過 context 參數傳遞。它是一個上下文對象,具體屬性查看文檔。這裡 props 是一個包含所有綁定屬性的對象。
函數式組件
<template functional>
<div class="list">
<div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
<p>{{item.title}}</p>
<p>{{item.content}}</p>
</div>
</div>
</template>
複製代碼
父組件使用
<template>
<div>
<List :list="list" :itemClick="item => (currentItem = item)" />
</div>
</template>
複製代碼
import List from '@/components/List.vue'
export default {
components: {
List
},
data() {
return {
list: [{
title: 'title',
content: 'content'
}],
currentItem: ''
}
}
}
複製代碼
文檔:https://cn.vuejs.org/v2/guide/render-function.html
樣式穿透
在開發中修改第三方組件樣式是很常見,但由於 scoped 屬性的樣式隔離,可能需要去除 scoped 或是另起一個 style 。這些做法都會帶來副作用(組件樣式污染、不夠優雅),樣式穿透在css預處理器中使用才生效。
我們可以使用 >>> 或 /deep/ 解決這一問題:
<style scoped>
外層 >>> .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
複製代碼
<style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
複製代碼
watch高階使用
立即執行
watch 是在監聽屬性改變時才會觸發,有些時候,我們希望在組件創建後 watch 能夠立即執行
可能想到的的方法就是在 create 生命周期中調用一次,但這樣的寫法不優雅,或許我們可以使用這樣的方法
export default {
data() {
return {
name: 'Joe'
}
},
watch: {
name: {
handler: 'sayName',
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}
複製代碼
深度監聽
在監聽對象時,對象內部的屬性被改變時無法觸發 watch ,我們可以為其設置深度監聽
export default {
data: {
studen: {
name: 'Joe',
skill: {
run: {
speed: 'fast'
}
}
}
},
watch: {
studen: {
handler: 'sayName',
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}
複製代碼
觸發監聽執行多個方法
使用數組可以設置多項,形式包括字符串、函數、對象
export default {
data: {
name: 'Joe'
},
watch: {
name: [
'sayName1',
function(newVal, oldVal) {
this.sayName2()
},
{
handler: 'sayName3',
immaediate: true
}
]
},
methods: {
sayName1() {
console.log('sayName1==>', this.name)
},
sayName2() {
console.log('sayName2==>', this.name)
},
sayName3() {
console.log('sayName3==>', this.name)
}
}
}
複製代碼
文檔:https://cn.vuejs.org/v2/api/#watch
watch監聽多個變量
watch本身無法監聽多個變量。但我們可以將需要監聽的多個變量通過計算屬性返回對象,再監聽這個對象來實現「監聽多個變量」
export default {
data() {
return {
msg1: 'apple',
msg2: 'banana'
}
},
compouted: {
msgObj() {
const { msg1, msg2 } = this
return {
msg1,
msg2
}
}
},
watch: {
msgObj: {
handler(newVal, oldVal) {
if (newVal.msg1 != oldVal.msg1) {
console.log('msg1 is change')
}
if (newVal.msg2 != oldVal.msg2) {
console.log('msg2 is change')
}
},
deep: true
}
}
}
複製代碼
事件參數$event
$event 是事件對象的特殊變量,在一些場景能給我們實現複雜功能提供更多可用的參數
原生事件
在原生事件中表現和默認的事件對象相同
<template>
<div>
<input type="text" @input="inputHandler('hello', $event)" />
</div>
</template>
複製代碼
export default {
methods: {
inputHandler(msg, e) {
console.log(e.target.value)
}
}
}
複製代碼
自定義事件
在自定義事件中表現為捕獲從子組件拋出的值
my-item.vue :
export default {
methods: {
customEvent() {
this.$emit('custom-event', 'some value')
}
}
}
複製代碼
App.vue
<template>
<div>
<my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
</my-list>
</div>
</template>
複製代碼
export default {
methods: {
customEvent(index, e) {
console.log(e) // 'some value'
}
}
}
複製代碼
文檔:https://cn.vuejs.org/v2/guide/events.html
https://cn.vuejs.org/v2/guide/components.html
自定義組件雙向綁定
組件 model 選項:
允許一個自定義組件在使用 v-model 時定製 prop 和 event。默認情況下,一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event,但是一些輸入類型比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。
input 默認作為雙向綁定的更新事件,通過 $emit 可以更新綁定的值
<my-switch v-model="val"></my-switch>
複製代碼
export default {
props: {
value: {
type: Boolean,
default: false
}
},
methods: {
switchChange(val) {
this.$emit('input', val)
}
}
}
複製代碼
修改組件的 model 選項,自定義綁定的變量和事件
<my-switch v-model="num" value="some value"></my-switch>
複製代碼
export default {
model: {
prop: 'num',
event: 'update'
},
props: {
value: {
type: String,
default: ''
},
num: {
type: Number,
default: 0
}
},
methods: {
numChange() {
this.$emit('update', this.num++)
}
}
}
複製代碼
文檔:https://cn.vuejs.org/v2/api/#model
監聽組件生命周期
通常我們監聽組件生命周期會使用 $emit ,父組件接收事件來進行通知
子組件
export default {
mounted() {
this.$emit('listenMounted')
}
}
複製代碼
父組件
<template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>
複製代碼
其實還有一種簡潔的方法,使用 @hook 即可監聽組件生命周期,組件內無需做任何改變。同樣的, created 、 updated 等也可以使用此方法。
<template>
<List @hook:mounted="listenMounted" />
</template>
複製代碼
程序化的事件偵聽器
比如,在頁面掛載時定義計時器,需要在頁面銷毀時清除定時器。這看起來沒什麼問題。但仔細一看 this.timer 唯一的作用只是為了能夠在 beforeDestroy 內取到計時器序號,除此之外沒有任何用處。
export default {
mounted() {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
複製代碼
如果可以的話最好只有生命周期鉤子可以訪問到它。這並不算嚴重的問題,但是它可以被視為雜物。
我們可以通過 $on 或 $once 監聽頁面生命周期銷毀來解決這個問題:
export default {
mounted() {
this.creatInterval('hello')
this.creatInterval('world')
},
creatInterval(msg) {
let timer = setInterval(() => {
console.log(msg)
}, 1000)
this.$once('hook:beforeDestroy', function() {
clearInterval(timer)
})
}
}
複製代碼
使用這個方法後,即使我們同時創建多個計時器,也不影響效果。因為它們會在頁面銷毀後程序化的自主清除。
文檔:https://cn.vuejs.org/v2/guide/components-edge-cases.html
手動掛載組件
在一些需求中,手動掛載組件能夠讓我們實現起來更加優雅。比如一個彈窗組件,最理想的用法是通過命令式調用,就像 elementUI 的 this.$message 。而不是在模板中通過狀態切換,這種實現真的很糟糕。
先來個最簡單的例子:
import Vue from 'vue'
import Message from './Message.vue'
// 構造子類
let MessageConstructor = Vue.extend(Message)
// 實例化組件
let messageInstance = new MessageConstructor()
// $mount可以傳入選擇器字符串,表示掛載到該選擇器
// 如果不傳入選擇器,將渲染為文檔之外的的元素,你可以想像成 document.createElement()在內存中生成dom
messageInstance.$mount()
// messageInstance.$el獲取的是dom元素
document.body.appendChild(messageInstance.$el)
複製代碼
下面實現一個簡易的 message 彈窗組件
Message/index.vue
<template>
<div class="wrap">
<div class="message" :class="item.type" v-for="item in notices" :key="item._name">
<div class="content">{{item.content}}</div>
</div>
</div>
</template>
複製代碼
// 默認選項
const DefaultOptions = {
duration: 1500,
type: 'info',
content: '這是一條提示信息!',
}
let mid = 0
export default {
data() {
return {
notices: []
}
},
methods: {
add(notice = {}) {
// name標識 用於移除彈窗
let _name = this.getName()
// 合併選項
notice = Object.assign({
_name
}, DefaultOptions, notice)
this.notices.push(notice)
setTimeout(() => {
this.removeNotice(_name)
}, notice.duration)
},
getName() {
return 'msg_' + (mid++)
},
removeNotice(_name) {
let index = this.notices.findIndex(item => item._name === _name)
this.notices.splice(index, 1)
}
}
}
複製代碼
.wrap {
position: fixed;
top: 50px;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(-50%);
}
.message {
--borderWidth: 3px;
min-width: 240px;
max-width: 500px;
margin-bottom: 10px;
border-radius: 3px;
box-shadow: 0 0 8px #ddd;
overflow: hidden;
}
.content {
padding: 8px;
line-height: 1.3;
}
.message.info {
border-left: var(--borderWidth) solid #909399;
background: #F4F4F5;
}
.message.success {
border-left: var(--borderWidth) solid #67C23A;
background: #F0F9EB;
}
.message.error {
border-left: var(--borderWidth) solid #F56C6C;
background: #FEF0F0;
}
.message.warning {
border-left: var(--borderWidth) solid #E6A23C;
background: #FDF6EC;
}
複製代碼
Message/index.js
import Vue from 'vue'
import Index from './index.vue'
let messageInstance = null
let MessageConstructor = Vue.extend(Index)
let init = () => {
messageInstance = new MessageConstructor()
messageInstance.$mount()
document.body.appendChild(messageInstance.$el)
}
let caller = (options) => {
if (!messageInstance) {
init(options)
}
messageInstance.add(options)
}
export default {
// 返回 install 函數 用於 Vue.use 註冊
install(vue) {
vue.prototype.$message = caller
}
}
複製代碼
main.js
import Message from '@/components/Message/index.js'
Vue.use(Message)
複製代碼
使用
this.$message({
type: 'success',
content: '成功信息提示',
duration: 3000
})
複製代碼
文檔:https://cn.vuejs.org/v2/api/#vm-mount
推薦Vue學習資料文章:
《是什麼導致尤大大選擇放棄Webpack?【vite 原理解析】》
《帶你了解 vue-next(Vue 3.0)之 小試牛刀【實踐】》
《帶你了解 vue-next(Vue 3.0)之 初入茅廬【實踐】》
《實踐Vue 3.0做JSX(TSX)風格的組件開發》
《一篇文章教你並列比較React.js和Vue.js的語法【實踐】》
《手拉手帶你開啟Vue3世界的鬼斧神工【實踐】》
《深入淺出通過vue-cli3構建一個SSR應用程式【實踐】》
《怎樣為你的 Vue.js 單頁應用提速》
《聊聊昨晚尤雨溪現場針對Vue3.0 Beta版本新特性知識點匯總》
《【新消息】Vue 3.0 Beta 版本發布,你還學的動麼?》
《Vue真是太好了 壹萬多字的Vue知識點 超詳細!》
《Vue + Koa從零打造一個H5頁面可視化編輯器——Quark-h5》
《深入淺出Vue3 跟著尤雨溪學 TypeScript 之 Ref 【實踐】》
《手把手教你深入淺出vue-cli3升級vue-cli4的方法》
《Vue 3.0 Beta 和React 開發者分別槓上了》
《手把手教你用vue drag chart 實現一個可以拖動 / 縮放的圖表組件》
《Vue3 嘗鮮》
《總結Vue組件的通信》
《手把手讓你成為更好的Vue.js開發人員的12個技巧和竅門【實踐】》
《Vue 開源項目 TOP45》
《2020 年,Vue 受歡迎程度是否會超過 React?》
《尤雨溪:Vue 3.0的設計原則》
《使用vue實現HTML頁面生成圖片》
《實現全棧收銀系統(Node+Vue)(上)》
《實現全棧收銀系統(Node+Vue)(下)》
《vue引入原生高德地圖》
《Vue合理配置WebSocket並實現群聊》
《多年vue項目實戰經驗匯總》
《vue之將echart封裝為組件》
《基於 Vue 的兩層吸頂踩坑總結》
《Vue插件總結【前端開發必備】》
《Vue 開發必須知道的 36 個技巧【近1W字】》
《構建大型 Vue.js 項目的10條建議》
《深入理解vue中的slot與slot-scope》
《手把手教你Vue解析pdf(base64)轉圖片【實踐】》
《使用vue+node搭建前端異常監控系統》
《推薦 8 個漂亮的 vue.js 進度條組件》
《基於Vue實現拖拽升級(九宮格拖拽)》
《手摸手,帶你用vue擼後台 系列二(登錄權限篇)》
《手摸手,帶你用vue擼後台 系列三(實戰篇)》
《前端框架用vue還是react?清晰對比兩者差異》
《Vue組件間通信幾種方式,你用哪種?【實踐】》
《淺析 React / Vue 跨端渲染原理與實現》
《10個Vue開發技巧助力成為更好的工程師》
《手把手教你Vue之父子組件間通信實踐講解【props、$ref 、$emit】》
《1W字長文+多圖,帶你了解vue的雙向數據綁定源碼實現》
《深入淺出Vue3 的響應式和以前的區別到底在哪裡?【實踐】》
《乾貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》
《基於Vue/VueRouter/Vuex/Axios登錄路由和接口級攔截原理與實現》
《手把手教你D3.js 實現數據可視化極速上手到Vue應用》
《吃透 Vue 項目開發實踐|16個方面深入前端工程化開發技巧【上】》
《吃透 Vue 項目開發實踐|16個方面深入前端工程化開發技巧【中】》
《吃透 Vue 項目開發實踐|16個方面深入前端工程化開發技巧【下】》
《Vue3.0權限管理實現流程【實踐】》
《後台管理系統,前端Vue根據角色動態設置菜單欄和路由》
作者:WahFung
轉發連結:https://juejin.im/post/5e8a9b1ae51d45470720bdfa