沐鳴平台網站_總結vue實用技巧
vue 作為目前前端三大框架之一,對於前端開發者可以說是必備技能。那麼怎麼系統地學習和掌握 vue 呢?為此,我做了簡單的知識體系體系總結,不足之處請各位大佬多多包涵和指正,如果喜歡的可以點個小贊!本文主要講述一些vue開發中的實用技巧。
監聽組件的生命周期
比如有父組件 Parent 和子組件 Child,如果父組件監聽到子組件掛載 mounted 就做一些邏輯處理,常規的寫法可能如下:
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
此外,還有一種特別簡單的方式,子組件不需要任何處理,只需要在父組件引用的時候通過@hook 來監聽即可,代碼如下:
<Child @hook:mounted="doSomething" />
<Child @hook:updated="doSomething" />
當然這裏不僅僅是可以監聽 mounted,其它的生命周期事件,例如:created,updated 等都可以。
watch 的初始立即執行
觀察和響應 vue 實例上的數據變動。類似於某些數據的監聽回調 ,每當監聽的數據變化時都會執行回調進行後續操作。
但是當 watch 一個變量的時候,初始化時並不會執行,如下面的例子,你需要在 created 的時候手動調用一次。
created() {
this.getList();
},
watch: {
keyWord: 'getList',
}
上面這樣的做法可以使用,但很麻煩,我們可以添加 immediate 屬性,這樣初始化的時候就會自動觸發(不用再寫 created 去調用了),然後上面的代碼就能簡化為:
watch: {
keyWord: {
handler: 'getList',
immediate: true
}
}
watch 有三個參數
- handler:其值是一個回調函數。即監聽到變化時應該執行的函數
- deep:其值是 true 或 false;確認是否深入監聽。
- immediate:其值是 true 或 false,確認是否以當前的初始值執行 handler 的函數
路由參數變化組件不更新
同一path的頁面跳轉時路由參數變化,但是組件沒有對應的更新。
原因:主要是因為獲取參數寫在了created或者mounted路由鈎子函數中,路由參數變化的時候,這個生命周期不會重新執行。
解決方案1:watch監聽路由
watch: {
// 方法1 //監聽路由是否變化
'$route' (to, from) {
if(to.query.id !== from.query.id){
this.id = to.query.id;
this.init();//重新加載數據
}
}
}
//方法 2 設置路徑變化時的處理函數
watch: {
'$route': {
handler: 'init',
immediate: true
}
}
解決方案2 :為了實現這樣的效果可以給router-view添加一個不同的key,這樣即使是公用組件,只要url變化了,就一定會重新創建這個組件。
<router-view :key="$route.fullpath"></router-view>
路由懶加載
vue 項目中實現路由按需加載(路由懶加載)的 3 中方式:
// 1、vue異步組件技術:
{
path: '/home',
name: 'Home',
component: resolve => reqire(['path路徑'], resolve)
}
// 2、es6提案的import()
const Home = () => import('path路徑')
// 3、webpack提供的require.ensure()
{
path: '/home',
name: 'Home',
component: r => require.ensure([],() => r(require('path路徑')), 'demo')
}
require.context()
require.context(directory,useSubdirectories,regExp)
- directory:說明需要檢索的目錄
- useSubdirectories:是否檢索子目錄
- regExp: 匹配文件的正則表達式,一般是文件名
場景:如頁面需要導入多個組件,原始寫法:
import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components: {
titleCom, bannerCom, cellCom
}
這樣就寫了大量重複的代碼,利用 require.context 可以寫成
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})
components: modules
遞歸組件
- 遞歸組件: 組件在它的模板內可以遞歸的調用自己,只要給組件設置 name 組件就可以了。
- 不過需要注意的是,必須給一個條件來限制數量,否則會拋出錯誤: max stack size exceeded
- 組件遞歸用來開發一些具體有未知層級關係的獨立組件。比如:聯級選擇器和樹形控件
<template>
<div v-for="(item,index) in treeArr"> {{index}} <br/>
<tree :item="item.arr" v-if="item.flag"></tree>
</div>
</template>
<script>
export default {
// 必須定義name,組件內部才能遞歸調用
name: 'tree',
data(){
return {}
},
// 接收外部傳入的值
props: {
item: {
type:Array,
default: ()=>[]
}
}
}
</script>
清除定時器或者事件監聽
由於項目中有些頁面難免會碰到需要定時器或者事件監聽。但是在離開當前頁面的時候,定時器如果不及時合理地清除,會造成業務邏輯混亂甚至應用卡死的情況,這個時就需要清除定時器事件監聽,即在頁面卸載(關閉)的生命周期函數里,清除定時器。
methods:{
resizeFun () {
this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
},
setTimer() {
this.timer = setInterval(() => { })
},
clearTimer() {//清除定時器
clearInterval(this.timer)
this.timer = null
}
},
mounted() {
this.setTimer()
window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeFun)
this.clearTimer()
}
自定義路徑別名
我們也可以在基礎配置文件中添加自己的路徑別名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': resolve('src/assets')
}
}
然後我們導入組件的時候就可以這樣寫:
// import YourComponent from '/src/assets/YourComponent'
import YourComponent from 'assets/YourComponent'
這樣既解決了路徑過長的麻煩,又解決了相對路徑的煩惱。
動態給修改dom的樣式
原因:因為我們在寫.vue文件中的樣式都會追加scoped。這樣針對模板dom中的樣式就可以生效,但其生效后的最終樣式並不是我們寫的樣式名,而是編碼后的。比如:
<template>
<div class="box">dom</div>
</template>
<style lang="scss" scoped>
.box {
background: red;
}
</style>
vue 將代碼轉譯成如下,所以我們在js中拼接上的dom結構樣式並不會生效。
.box[data-v-11c6864c]{ background:red; }
<template>
<div class="box" data-v-11c6864c>dom</div>
</template>
解決方法:將要改變的樣式寫在非scoped樣式標籤中。
長列表性能優化
我們應該都知道 vue 會通過 object.defineProperty 對數據進行劫持,來實現視圖響應數據的變化,然而有些時候我們的組件就是純粹的數據展示,不會有任何改變,我們就不需要 vue 來劫持我們的數據,在大量數據展示的情況下,這能夠很明顯的減少組件初始化的時間。
所以,我們可以通過 object.freeze 方法來凍結一個對象,這個對象一旦被凍結,vue就不會對數據進行劫持了。
export default {
data: () => ({
list: []
}),
async created() {
const list = await axios.get('xxxx')
this.list = Object.freeze(list)
},
methods: {
// 此處做的操作都不能改變list的值
}
}
另外需要說明的是,這裏只是凍結了 list 的值,引用不會被凍結,當我們需要 reactive 數據的時候,我們可以重新給 list 賦值。
內容分發(slot)
插槽 slot,也是組件的一塊 html 模板,這一塊模板显示不显示、以及怎樣显示由父組件來決定。實際上,一個 slot 最核心的兩個問題在這裏就點出來了,是显示不显示和怎樣显示。
默認插槽
又名單個插槽、匿名插槽,這類插槽沒有具體名字,一個組件只能有一個該類插槽。
<!-- 父組件 parent.vue -->
<template>
<div class="parent">
<h1>父容器</h1>
<child>
<div class="tmpl">
<span>菜單1</span>
</div>
</child>
</div>
</template>
<!-- 子組件 child.vue -->
<template>
<div class="child">
<h1>子組件</h1>
<slot></slot>
</div>
</template>
具名插槽
匿名插槽沒有 name 屬性,所以叫匿名插槽。那麼,插槽加了 name 屬性,就變成了具名插槽。具名插槽可以在一個組件中出現 N 次,出現在不同的位置,只需要使用不同的 name 屬性區分即可。
<!-- 父組件 parent.vue -->
<template>
<div class="parent">
<h1>父容器</h1>
<child>
<div class="tmpl" slot="up">
<span>菜單up-1</span>
</div>
<div class="tmpl" slot="down">
<span>菜單down-1</span>
</div>
<div class="tmpl">
<span>菜單->1</span>
</div>
</child>
</div>
</template>
<!-- 子組件 child.vue -->
<template>
<div class="child">
<!-- 具名插槽 -->
<slot name="up"></slot>
<h3>這裡是子組件</h3>
<!-- 具名插槽 -->
<slot name="down"></slot>
<!-- 匿名插槽 -->
<slot></slot>
</div>
</template>
作用域插槽
作用域插槽可以是默認插槽,也可以是具名插槽,不一樣的地方是,作用域插槽可以為 slot 標籤綁定數據,讓其父組件可以獲取到子組件的數據。
<!-- parent.vue -->
<template>
<div class="parent">
<h1>這是父組件</h1>
<child
>>
<template slot="default" slot-scope="slotProps">
{{ slotProps.user.name }}
</template> </child
>>
</div>
</template>
<!-- 子組件 child.vue -->
<template>
<div class="child">
<h1>這是子組件</h1>
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '小趙'
}
}
}
}
</script>
原文:https://segmentfault.com/a/1190000021908786
站長推薦
1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲
2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入
鏈接: http://www.fly63.com/article/detial/8094