這里分享幾個我使用到的vue開發小技巧
一、狀態共享
使用Vue進行開發時，隨著專案的復雜化，組件個數也逐漸增加，此時我們就面臨著一個問題——多組件狀態共享，當然有人會說使用Vuex來解決啊，但是如果此時我們的專案沒有那么大那么復雜，在使用Vuex會導致繁瑣冗余
那該怎么辦？其實我們還可以通過vue.js2.6版本新增的Observable API來解決這個問題，
示例
a) 創建一個 store.js，包含一個store和一個mutations，分別用來指向資料和處理方法，
import Vue fomr 'vue'
export const Vue.observable( obj: {count: 0 })
export const mutations = {
steCount(count){
store.count = count
}
}
b) 在 App.vue里面引入這個 store.js，使用引入的資料和方法，
<template>
<div id="app">
<p>count:{{count}}</p>
<div @click="steCount(count+1)">+1</div>
<div @click="steCount(count-1)">-1</div>
</div>
<template>
<script>
import { store, mutations } from '/store/store';
export default {
name: "App",
computed: {
count（）{
return store.count;
}
},
methods:{
steCount:mutations.setCount
}
}
<script>
二、長串列性能優化
Vue會通過劫持我們的資料，進而實作視圖回應資料的變化，但有時候我們的資料不需要發生變化，只是純粹的資料展示，此時Vue再進行資料劫持會大大增加組件初始化時間，此時我們可以使用object.freeze方法來阻止vue劫持資料，進而減少組件初始化時間，
示例
export default {
data() {
users:{}
},
async created(){
const users = await axios.get("/api/users");
this.users = Object.freeze(users)
},
methods: {
// 改變值不會觸發視圖回應
this.data.urses[0] = nweValue
// 改變參考依然回觸發視圖回應
this.data.users = newArray
}
}
三、作用域插槽
所謂的作用域插槽，就是父組件在呼叫子組件時給子組件傳輸一個插槽，且該插槽必須放在template標簽里邊，同時宣告從子組件接收的資料放在一個自定義屬性內，并定義該資料的渲染方式，
那作用域插槽有什么用處呢？
比如專案中有一個A組件只負責布局不管資料邏輯，另一個B組件負責資料處理，A組件需要資料的時候就去B組件中取，那當開發程序中我們的布局發生變化時，我們只需要修改A組件即可，而不需要修改B組件，這樣就能充分復用B組件的資料邏輯處理，
示例
a) 創建一個user.vue組件，將user資料系結在元素上
<span>
<slot v-bind:user="user">
{{ user.lastName}}
</slot>
</span>
b) 在父組件中參考 user組件，展示user資料的firstName資料，此時給 v-slot帶一個值來定義我們提供的插槽 prop 的名字：
<v-user v-slot:default="slotProps">
{{slotProps.user.firstName}}
</v-user>
四、web worker
JS 是單執行緒的, 那么到底能不能同時做兩個事情呢，利用web worker是可以的
web worker 就給我提供了一個多執行緒環境
可以在主執行緒環境下, 開啟一個 worker 環境執行緒我們可以將一些比較費時間的任務交給 worker 執行緒來做
我們的主執行緒還是繼續做主執行緒的事情
這樣, 就可以達到兩個事情同時開始
通常, 我們都會在 worker 執行緒里面進行一些計算量比較大的任務
在主執行緒里面進行頁面互動行為, 這樣不會被阻塞或者拖慢
示例
console.time('test for')
console.time('test timeout')
for (var i = 0; i < 1000000000; i++) { }
console.timeEnd('test for')
setTimeout(() => {
console.log('定時器')
console.timeEnd('test timeout')
},2000)
利用 poseMessage 和 onMessage 來實作在 worker.js 里面發出結果
// worker.js
console.time('test for')
var sum = 0
for (var i = 0; i < 1000000000; i++) {
sum += i
}
postMessage(sum)
console.timeEnd('test for')
在主執行緒接受結果
<script>
console.time('test timeout')
var w = new Worker('./worker.js')
w.onmessage = function (e) {
console.log(e.data)
}
setTimeout(() => {
console.log('定時器')
console.timeEnd('test timeout')
}, 2000)
</script>
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/423591.html
標籤：其他
上一篇：【JavaScript】筆記（5）--- DOM（續）（復選框的全選和取消全選；獲取下拉串列選中項的value；網頁時鐘；內置支持類Array）
下一篇：前端之CSS初始