博客地址：https://ainyi.com/95
本人玩了 Vue 兩年多，在此總結一下開發時的一些技巧和方法
自定義組件 v-model
v-model 是 Vue 提供的一個語法糖，它本質上是由 value 屬性 + input 事件組成的（都是原生的默認屬性）
自定義組件中，可以通過傳遞 value 屬性並監聽 input 事件來實現數據的雙向綁定
自定義組件
<template>
<div>
<input :value="value" @input="$_handleInput" />
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {}
},
methods: {
$_handleInput(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
父組件調用
<template>
<div class="home">
<krry-input v-model="say"></krry-input>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
KrryInput: () => import('@/components/KrryInput')
},
data() {
return {
say: 'haha'
}
}
}
</script>
函數式組件
簡單說一下函數式組件
函數式組件就是函數是組件。使用過 React 的同學，應該不會對函數式組件感到陌生
函數式組件，我們可以理解為沒有內部狀態，沒有生命周期鈎子函數，沒有 this(不需要實例化的組件)
由於它像函數一樣輕巧，沒有實例引用，所以渲染性能提高了不少
在日常開發中，經常會開發一些純展示性的業務組件，比如一些詳情頁面，列表界面等，它們有一個共同的特點是只需要將外部傳入的數據進行展現，不需要有內部狀態，不需要在生命周期鈎子函數里面做處理，這時候你就可以考慮使用函數式組件
export default {
// 通過配置 functional 屬性指定組件為函數式組件
functional: true,
// 組件接收的外部屬性，也可無需顯式聲明 props
props: {
avatar: {
type: String
}
},
/**
* 渲染函數
* @param {*} h
* @param {*} context 函數式組件沒有 this, props, slots 等，都在 context 上面掛着
*/
render(h, context) {
const { props } = context
if (props.avatar) {
return <img src={props.avatar}></img>
}
return <img src="default-avatar.png"></img>
}
}
使用函數式組件的原因：
- 最主要最關鍵的原因是函數式組件不需要實例化，無狀態，沒有生命周期，所以渲染性能要好於普通組件
- 函數式組件結構比較簡單，代碼結構更清晰
函數式組件與普通組件的區別
- 函數式組件需要在組件上聲明functional
- 函數式組件不需要實例化，所以沒有 this，this通過render函數的第二個參數來代替
- 函數式組件沒有生命周期鈎子函數，不能使用計算屬性、watch 等等
- 函數式組件不能通過 $emit 對外暴露事件，調用事件只能通過context.listeners.click的方式調用外部傳入的事件
- 因為函數式組件是沒有實例化的，所以在外部通過ref去引用組件時，實際引用的是 HTMLElement
- 函數式組件的props可以不用顯式聲明，所以沒有在props里面聲明的屬性都會被自動隱式解析為 prop，而普通組件所有未聲明的屬性都被解析到 $attrs 里面，並自動掛載到組件根元素上面(可以通過 inheritAttrs 屬性禁止)
模板語法聲明函數式組件
在 Vue2.5 之前，使用函數式組件只能通過 JSX 的方式，在之后可以通過模板語法來聲明函數式組件
<!-- 在 template 上面添加 functional 屬性 -->
<template functional>
<img :src="props.avatar" />
</template>
<!-- 上面第 6 點，可不用顯示聲明 props -->
事件參數 $event
$event 是事件對象的一個特殊變量。它在某些場景下為復雜的功能提供了更多的可選參數
<template>
<img src="text.jpg" @click="handleClick($event)" />
</template>
<script>
export default {
methods: {
handleClick (e) {
console.log(e)
}
}
}
</script>
EventBus
聲明一個全局 Vue 實例變量 EventBus，把所有的通信數據、事件監聽都存儲到這個變量上
類似於 Vuex，但這種方式一般適用於小的項目
原理就是利用 on、emit 並實例化一個全局 vue 實現數據共享
可以實現平級、嵌套組件傳值；但是對應的事件名 eventTarget 必須是全局唯一的
// 在 main.js
Vue.prototype.$eventBus = new Vue()
// 傳值組件
this.$eventBus.$emit('eventTarget','這是eventTarget傳過來的值')
// 接收組件
this.$eventBus.$on('eventTarget', v => {
console.log('eventTarget', v)
})
也可以新建一個 bus.js 文件
import Vue from 'vue'
export default new Vue()
在要通信的組件導入此文件，進行監聽或發送
import Bus from '@/bus'
// 組件1
Bus.$emit('operateMusic', id)
// 組件2
Bus.$on('operateMusic', id => {})
Mixin 混入
一般在 src 定義一個 mixins 文件夾，里面存放每個 mixin，用 index.js 文件匯總導出
index.js
import serviceMixinsModule from './service-mixins'
import tableListMixinsModule from './tableList-mixins'
export const serviceMixins = serviceMixinsModule
export const tableListMixins = tableListMixinsModule
// 組件中使用
// import { serviceMixins, tableListMixins } from '@/mixins'
// export default {
// mixins: [serviceMixins, tableListMixins],
// }
主要說說沖突問題
當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合並”
比如，數據對象在內部會進行遞歸合並，並在發生沖突時以組件數據優先
let mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
同名鈎子函數將合並為一個數組，因此都將被調用。另外，混入對象的鈎子將在組件自身鈎子之前調用
let mixin = {
created: function () {
console.log('混入對象的鈎子被調用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('組件鈎子被調用')
}
})
// => "混入對象的鈎子被調用"
// => "組件鈎子被調用"
值為對象的選項，例如 methods、components 和 directives，將被合並為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對
let mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
let vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
注意：Vue.extend() 也使用同樣的策略進行合並
路由參數解耦
相信這是大多數人處理組件中路由參數的方式：
export default {
computed: {
paramsId() {
return this.$route.params.id
}
}
}
在組件內部使用 $route 會對某個URL產生強耦合，這限制了組件的靈活性
正確的解決方案是向路由器添加 props
const router = new VueRouter({
routes: [{
path: '/:id',
component: Component,
props: true
}]
})
這樣，組件可以直接從 props 獲取 params
export default {
props: ['id'],
computed: {
paramsId() {
return this.id
}
}
}
此外，你還可以傳入函數以返回自定義 props
const router = new VueRouter({
routes: [{
path: '/:id',
component: Component,
props: router => ({ id: route.query.id })
}]
})
hook 妙用
如果在頁面掛載時增加一個定時器，但銷毀時需要清除定時器
一般想法是在 beforeDestroy 中使用 clearInterval(this.timer) 來清除
export default {
data () {
return {
timer: null
}
},
mounted () {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy () {
clearInterval(this.timer)
}
}
還有種更方便的方法，使用 $once 監聽 hook 函數
export default {
mounted () {
let timer = null
timer = setInterval(() => {
console.log(Date.now())
}, 1000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
}
}
監聽子組件生命周期 Hook
通常，可以像這樣監聽子組件的生命周期（例如 mounted）
<!-- Child -->
<script>
export default {
mounted () {
this.$emit('onMounted')
}
}
</script>
<!-- Parent -->
<template>
<Child @onMounted="handleOnMounted" />
</template>
還有另一種簡單的解決方案，可以改用 @hook:mounted 在父組件直接監聽
<!-- Parent -->
<template>
<Child @hook:mounted="handleOnMounted" />
</template>
掛載全局變量
Vue.prototype.$lang = Lang
// 可以在任何一個組件使用 this.$lang
Watcher 技巧
watch 的深度監聽deep: true 和 立即觸發immediate: true 就不多說了
需要注意的是深度監聽deep: true 只能監聽原有屬性的變化，不能監聽新增、刪除的屬性
還有一個有趣的特性，隨時監聽，隨時取消，$watch
const unwatch = this.$watch('say', curVal => {
console.log('數據發生了變化', curVal)
}, {
deep: true,
immediate: true // 是否第一次觸發
})
setTimeout(() => {
unwatch()
}, 3000)
this.$watch 的返回值 unwatch 是個方法，執行后就可以取消監聽
傳送門
關於 Vue 不能 watch 數組 和 對象變化的解決方案
博客地址：https://ainyi.com/95