最近在研究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 class="body">
<div class="main-body" 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 = 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>
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
