Vue3新的script setup語法糖

開始使用

/*

不使用script-setup語法糖
*/​/*
使用script-setup語法糖
*/

引用元件的變更

/*

原先*/​/*
用語法糖後
*/元件的引入使用已不再需要components註冊才能使用了，直接引入就可以在tamplate使用了，u1s1，這個更改讓**看起來更舒服簡介了一些

變數使用的變更

/*

原先*/
count:}
num:}
text:}點選​
​/*用語法糖後
*/count:}
num:}
/*這裡沒有使用torefs展開變數，所以需要state.text
*/text:}點選​
使用script setup語法糖後變數和方法已不再需要return出去才能被template使用了，減少了**量，看起來更加的美觀

props使用的變更

/*

原先*/
/*子元件*/}
​/*父元件*/​/*
用語法糖後
*//*
子元件*/}/*
父元件*/
通過 defineprops 指定當前props型別的同時，獲得上下文的props物件
在script中需要props[key]引用，而template中可直接呼叫key
用法上差異不大…

emit使用的變更

/*

原先*/點選​
/*用語法糖後
*/點選

slots、attrs使用的變更

ref &torefs的用法

import  from 'vue'

const props =defineprops()

const count = ref(1)

const obj = ref()
console.log(count.value)
console.log(obj.value.count)

const  = torefs(props);

盡量不要混著用，reactive 和 ref 選一種，toref 和 torefs 選一種，不然**會很亂。

推薦 ref 和 torefs 一把梭。

ref

vue3新特性學習小結

組合式api，主要目的就是為了解決以前那些邏輯較為複雜的大元件，各個邏輯點 相互分散，需要來來回回 跳轉 檢視，這種極不方便的操作。1.以前寫在data computed watch provide inject等標籤中的 都可以提取到乙個setup標籤中來使用，使該邏輯 相關的變數 函式處理 監聽...

vue3的新特性及api

1.響應式原理 vue2的響應式原理是利用object.defineproperty而vue3則是利用proxy。proxy的效能和功能比object.defineproperty強很多 這裡的強是指api支援更好原始碼層次 可以看一下這邊文章proxy 與object.defineproperty...

vue3帶來的新特性 亮點

vue3在效能方面比vue2快了2倍。vue3中的核心api都支援了tree shaking，這些api都是通過包引入的方式而不是直接在例項化時就注入，只會對使用到的功能或特性進行打包 按需打包 這意味著更多的功能和更小的體積。vue2中，我們一般會採用mixin來復用邏輯 用倒是挺好用的，不過也存...