最近在研究vue3.0，這里給大家分享下找到的介紹，
以下內容轉載于：https://blog.csdn.net/baidu_31108777/article/details/114880810?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163575360816780262549483%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163575360816780262549483&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-114880810.pc_search_es_clickV2&utm_term=vue3.0&spm=1018.2226.3001.4187
一、vue3.0六大亮點
1. 編譯性能比vue2.x快1.2~2倍， 2. 按需編譯，體積比vue2.x更小， 3. 支持組合API(類似與React hook). 4. 更好的TS支持， 5. 暴露了自定義渲染API， 6. 使用更先進的組件，
二、vue3.0如何變快的？
1. diff演算法優化：
vue2.0中的虛擬DOM是進行全量的對比，
vue3.0中新增了靜態標記（PatchFlag），在與上次虛擬節點進行對比的時候，只對比有靜態標記的節點，并且可以通過flag的資訊得知當前節點要對比的具體內容，
例如：_createVNode('p',null,_toDisplyString(_ctx.msg) +'}',1)
patchFlags 靜態標記列舉類，
Text=1,//動態文本節點，
Text=2,//動態class，
Text=4,//動態Style，
Text=8,// 動態屬性，
2. hoist Static靜態提升
vue2中無論元素是否參與更新，每次都會重新創建，再渲染，
vue3中對于不參與更新的元素，會做靜態提升，只會創建一次，在渲染時直接復用，
3. cacheHandlers事件偵聽器快取
默認情況下onClick會被視為動態系結，所以每次都會追蹤它的變化，但是因為是同一個函式，所以沒有追蹤變化，直接快取起來復用即可，
三、怎么按需編譯，體積更小
1. 創建vue3的3種方式 vue-cli webpack vite 2. 什么是vite? vite是vue作者開發的一款意圖取代webpack的工具 其實作原理是黎永ES6的import會發送請求去加載檔案的特性，攔截這些請求，做一些預編譯，省去webpack冗長的打包時間， 安裝vite npm install -g create-vite-app 利用vite創建vue3專案 create-vite-app projectName 安裝依賴運行專案 cd projiectName npm install npm run dev
四、組合API
setup()函式 ①、setup執行時機 setup beforeCreate 表示組件剛剛被創建出來，組件的data和methods還沒有初始化好 created 表示組件剛剛被創建出來，組件的data和methods已經初始化好 ②、setup注意點 -由于在執行setup函式的時候，還沒有執行created生命周期方法，所以在setup函式中，是無法使用data和methods， -由于我們不能在setup函式中使用data和methods，所以vue3.0為了避免我們錯誤的使用，它直接將setup函式中的this修改為undefined， -setup函式只能是同步的不能是異步的，
reative ①什么是reative reactive是vue3中提供的實作回應式資料的方法， vue2中回應式資料是通過defineProperty來實作的，而在vue3中回應式資料是通過ES6的proxy來實作的， ②reative注意點： -reative引數必須是物件（json/array）; -如果給reactive傳遞了其他物件 默認情況下修改物件，界面不會自動更新 如果想更新，可以通過重新賦值的方式
ref ①什么是ref？ -ref和reactive一樣，也是用來實作回應式資料的方法， -由于reactive必須傳遞一個物件，所以導致在企業開發中如果我們只想讓某個變數實作回應式的時候會非常麻煩，所以vue3就給我們提供了ref方法，實作對簡單值的監聽， ②ref的本質 -ref底層的本質其實還是reactive，系統會自動根據我們給ref傳入的值將它轉換成ref(xx) -》reactive({value:xx}). ③ref注意點： -在vue（template）中使用ref的值不用通過value獲取 -在TS中使用ref的值必須通過value獲取 ref和reactive的區別 如果在template里使用的是ref型別的資料，那么vue會自動幫我們添加.value,如果在templatel里使用的是reactive型別的資料，那么vue不會自動幫我們添加.value， vue是如何決定是否需要自動添加.value的？ vue在決議資料之前，會自動判斷這個資料是否是ref型別的，如果是就自動添加.value，如果不是就不自動添加.value， vue是如何判斷當前資料是否是ref型別的？ 通過當前資料_ _v_ref來判斷的，如果有這個私有屬性，并且取值為true,那么就代表是一個ref型別的資料， 用戶判斷某個資料是什么型別的方法 isRef()、isReactive() 遞回監聽 默認情況下，無論是通過ref還是reactive都是遞回監聽 遞回監聽存在的問題：如果資料量比較大，非常消耗性能 非遞回監聽 呼叫方法 shallowRef/shallowReactive 如何觸發非遞回監聽屬性更新界面？ 如果是shallowRef型別資料，可以通過triggerRef來觸發， 應用場景 一般情況下我們使用Ref和reactive即可，只有在監聽的資料量比較大的時候，我們才使用shallowRef/shallowReactive， shallowRef的本質是shallowReactive shallowRef(10) => shallowReactive({value:10}) 所以如果是通過shallowRef創建的資料，它監聽的是.value的變化，因為底層本質上value是第一層， toRaw Ref/Reactive資料型別的特點：每次修改都會被追蹤，都會更新UI界面，那么這個時候，我們可以通過toRow方法拿到它的原始資料，對原始資料修改就不會被追蹤，這樣就不會更新UI界面，這樣性能就好了， 注意：如果想通過toRaw拿到ref型別的原始資料（創建時傳入的那個資料）那么就必須明確的告訴toRaw方法，要獲取的是.value的值，因為經過Vue的處理之后，.value中保存的才是當初創建時傳入的那個原始資料， markRow 經過markRow方法定義的物件被Ref/Reactive參考后無效，參考更改后不會被追蹤，不會重繪UI界面，
toRef ref和toRef的區別： ref->復制，修改回應式資料不會影響以前的資料 toRef->參考，修改回應式資料會影響以前的資料 ref->資料發生改變，界面會自動更新 toRef->資料發生改變，界面不會自動更新 toRef應用場景： 如果想讓回應式資料和以前的資料關聯起來，并且更新回應式資料之后還不想更新UI，那么就可以使用Ref，
toRefs toRef是將一個物件的某個屬性轉化為回應式資料，toRefs是將整個物件的所有屬性都轉化為回應式資料， customRef 回傳一個Ref物件，可以顯式地控制依賴和觸發回應 在組合API中使用生命周期函式，直接從vue中引入 import {onMounted} from Vue readonly、shallowReadonly、isReadonly readOnly:用于創建一個只讀的資料，并且是遞回只讀 shallowReadOnly：用于創建一個只讀的資料，但不是遞回只讀的 isReadOnly：判斷資料型別是否是只讀資料型別 const和readOnly的區別 const:賦值保護，不能給變數重新賦值 readOnly：屬性保護，不能給屬性重新賦值 vue3回應式資料本質 -在Vue2.x中通過defineProperty來實作回應式資料的 -在Vue3.x中是通過Proxy來實作回應式資料的
我也弄了個demo，代碼如下
cdn地址：https://www.bootcdn.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<style>
*{
margin:0;
padding:0;
border:none;
}
img{
width:100%;
height: auto;
}
</style>
<body>
<div >
<div id="app">
<div id="chart_example" style="width:600px;height: 600px;"></div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
const { onMounted,createApp, reactive, toRefs } = Vue;
const data = https://www.cnblogs.com/smileZAZ/archive/2021/11/01/reactive({
state: 12
})
const app = createApp({
setup() {
const gaugeData = [
{
value: 20,
name:'紅色預警',
itemStyle: {
color: 'rgba(249, 80, 62, 1)'
},
title: {
offsetCenter: ['0%', '-45%'],
color: 'rgba(249, 80, 62, 1)'
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '-30%']
}
},
{
value: 40,
name: '黃色預警',
itemStyle: {
color: 'rgba(249, 208, 0, 1)'
},
title: {
offsetCenter: ['0%', '-10%'],
color: 'rgba(249, 208, 0, 1)'
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '5%']
}
},
{
value: 60,
name: '白色預警',
itemStyle: {
color: 'rgba(255, 255, 255, 1)'
},
title: {
offsetCenter: ['0%', '25%'],
color: 'rgba(255, 255, 255, 1)'
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '40%']
}
}
];
const option = {
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: false,
clip: false,
itemStyle: {
borderWidth: 0
}
},
axisLine: {
lineStyle: {
width: 60
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: gaugeData,
title: {
fontSize: 14,
height:24
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'auto',
borderColor: 'auto',
borderWidth: 1,
formatter: '{value}%'
}
}
],
backgroundColor: 'rgba(9,70,161,0.9)'
};
const echartInit = () => {
const myChart = echarts.init(document.getElementById('chart_example'));
// 使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
}
onMounted(()=>{
echartInit()
})
return {
echartInit,
...toRefs(data),
option
}
},
mounted(){
console.log(this.option)
}
});
app.mount("#app");
</script>
</html>
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/344001.html
標籤：其他