vue3
Vue3 Composition API用法介紹、基礎入門
2021/10/11 23:33:19
1
9918
Vue3.0的一些新特性
- Vue3是向下相容，Vue3 支援大多數 Vue2 的特性。拿 Vue2 的語法開發 Vue3，也是沒有任何問題的。
- 效能的提升，打包大小減少 41%，初次渲染快 55%，更新快 133%，記憶體使用減少 54%。
- 新推出的Composition API ，在 Vue2 中遇到的問題就是複雜元件的程式碼變的非常麻煩，甚至不可維護。Composition API一推出，立馬解. 決了這個問題，它是一系列 API 的合集。
- 其他新特性：Teleport(瞬移元件)、Suspense(解決非同步載入元件問題)和全域性 API 的修改和優化。
- 更好TypeScript支援
Vue3 基礎格式
<div id="app"></div>
<script>
const App = {
//1.先創建一個APP的Object
setup(){
//3. setup函式
return{
//4.將setup資料return回模板
}
}
};
Vue.createApp(App).mount("#app");
//2.vue的createApp把創建的APP放進來，mount目前畫面上面這個#app的進入點
</script>
Vue.3 實體化頁面渲染
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const { ref } = Vue;
//4. 使用解構的方式從Vue裡面法ref方法取出來(做雙向綁定)
const App = {
// 2. 先宣告一個叫App的Object，放到createApp(),裡面
setup(){
// 3. setup函式，是接下來所有在操作跟vuejs相關的內容都會在這裡面
const msg = ref('Hello Vue!');
//5. 利用ref雙向綁定語法將內容塞進msg裡面，就可以直接操作msg的data
return{
//6. 當做完 ref動作時，必須要將資料返回到模板語法裡面
msg,
}
}
};
Vue.createApp(App).mount("#app")
// 1.先將Vue3實體準備好，並塞入實體好了的Object，直接mount到模板的div(#app)
</script>
</body>
</html>
setup( )函數 起手式
<script>
const App ={
//1. 物件裡放的Vue3操作、內容...
setup(){
//3. 跟vue操作有關都會寫在這裡面
return{
//4. 需要放到HTML上的資料，需要return出來
}
}
};
Vue.createApp(App).mounted("#app")
//2.global環境下Vue物件，創造一個應用程式本身(createApp)， 再把物件放進來(App)，接著再掛載(mounted)到DOM上面(#app)
</script>
如何在Vue3裡定義需要的資料 ref
<body>
<div id="app">
<h1>{{text}}</h1>
<!-- 3.利用雙向綁定{{}}將要顯示的資料放進去 -->
</div>
<script src="./js/vue.js"></script>
<script>
const App = {
setup() {
const text = Vue.ref("Hello vue")
//1.宣告變數資料並用ref來包裝內容
setTimeout(()=>{
text.value = "Bruce"
},1000)
//4. 1秒後text改變value值
return {
text
//2. 將需要掛載到HTML的資料return出去
};
},
};
Vue.createApp(App).mount("#app");
</script>
</body>Vue.ref把資料起來的時候，會回傳一個物件，物件裡有value的屬性。
透過value屬性修改、抓取資料
如何在Vue3裡定義需要的資料 reactive
定義資料的方法，reactive只接受物件{ }、陣列 [ ]型態的值
※ref可以接受任何型別的資料
<body>
<div id="app">
<h1>{{message.text}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
const { reactive } = Vue
const App = {
setup() {
const message = reactive({text: "Bruce"})
return {
message
};
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
選擇ref?還是reactive?
ref( )
⇒ 可以接受任何型態的資料，但是不會對物件或陣列內部的屬性變動作監聽
reactive( )
⇒只能接受物件或陣列，可以做深層的監聽，以及訪問資料不需要.value
vue3.x的生命週期和鉤子函式
<body>
<div id="app">
<h1>{{idx}}</h1>
{{computedFun}}
</div>
<script src="./js/vue.js"></script>
<script>
const { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, computed } = Vue;
const App = {
setup() {
console.log("當Vue掛載到app上面後執行");
const computedFun = computed(()=>{
console.log("computedFun")
return "computed Fn"
})
const idx = ref(0);
setTimeout(() => {
idx.value = 1;
console.log(idx.value);
}, 3000);
onBeforeMount(() => {
// DOM 渲染前
console.log("DOM 渲染前");
});
onMounted(() => {
// DOM 渲染完成後
console.log("DOM 渲染完成後");
});
onBeforeUpdate(() => {
// 在資料更改導致virtual DOM重新渲染前調用
console.log("資料更改前");
});
onUpdated(() => {
// 在資料更改導致virtual DOM重新渲染後調用
console.log("資料更改後");
});
return {
idx,computedFun
};
},
};
Vue.createApp(App).mount("#app");
</script>
</body>
執行結果：
當Vue掛載到app上面後執行
DOM 渲染前
computedFun
DOM 渲染完成後
1
資料更改前
資料更改後
以上流程可得知，template會先解析成AST語法樹，AST(Abstract Syntax Tree)即抽象語法樹，再轉換成render function，透過render function產生出virtual DOM，然後產出的vue會再透過Patch function 將 virtual DOM放到real DOM下，在render UI的同時，watcher會把component的相依數據蒐集，並在這些相依資料更新時重新render，達到自動化更新的效果。
相關文章
