在之前的文章中，小編和大家一起學(xué)習(xí)了關(guān)于Vue的基本語法和概念阿迈，包括組件、數(shù)據(jù)混入和插槽等轧叽。從今天開始苗沧，小編和大家一起學(xué)習(xí)Vue3中的新特性，也就是網(wǎng)上炒的鋪天蓋地的Composition-API炭晒，看看到底有什么神奇之處待逞，我們之前通過Vue寫的代碼，基本都是這樣网严。大家還可以關(guān)注我的微信公眾號识樱，蝸牛全棧。
Vue.createApp({
data(){
return {
name:"" // 綁定基本數(shù)據(jù)類型數(shù)據(jù)
items:[1,2,3,4] // 綁定引用數(shù)據(jù)類型
}
},
methods:{
handleClick(){ // 綁定按鈕的點擊函數(shù)
this.name = 'lilei'
this.items.push(5)
}
},
template:`
<div>
<input v-model="name" />
<button @click="handleClick">增加</button>
<ul>
<li v-for="(item,index) of items" :key="index">{{item}}</li>
</ul>
</div>
`
}).mount('#root')
同樣的代碼震束，改造成setup函數(shù)的形式怜庸，就是這樣
Vue.createApp({
template: `<div>
<input v-model="name" />
<button @click="handleClick">增加</button>
<ul>
<li v-for="(item,index) of items" :key="index">{{item}}</li>
</ul>
</div>`,
setup(){
let name=""
let items = [1,2,3,4]
const handleClick = () => {
name = 'lilei'
items.push(5)
}
return {
name,
items
}
}
}).mount('#root')
這個時候我們發(fā)現(xiàn)，不僅按鈕點擊事件不好用了垢村，甚至控制臺也會出現(xiàn)警告割疾，handleClick方法沒有被注冊，實際上這正是小編要和大家分享的三個點
一嘉栓、控制臺出現(xiàn)的警告是因為在setup函數(shù)中沒有返回對應(yīng)的函數(shù)宏榕，在頁面中使用的變量和函數(shù)，都需要在return的對象中侵佃，才能使用麻昼，至于網(wǎng)上說的其他的痛點，比如如何獲取this還有組件之間傳值馋辈，小編會在接下來的內(nèi)容中相繼更新抚芦。為了修復(fù)控制臺的錯誤，我們可以把代碼完善成這樣
Vue.createApp({
template: `<div>
<input v-model="name" />
<button @click="handleClick">增加</button>
<ul>
<li v-for="(item,index) of items" :key="index">{{item}}</li>
</ul>
</div>`,
setup(){
let name=""
let items = [1,2,3,4]
const handleClick = () => {
name = 'lilei'
items.push(5)
}
return {
name,
items,
handleClick
}
}
}).mount('#root')
經(jīng)過上面的改動，我們發(fā)現(xiàn)控制臺的錯誤是不見了燕垃，但是點擊按鈕依然沒有反應(yīng)枢劝，這個時候我們需要引入setup函數(shù)中對于基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的綁定方式
二、基礎(chǔ)數(shù)據(jù)類型響應(yīng)式引用——ref
Vue.createApp({
template: `<div>
<input v-model="name" />
<button @click="handleClick">增加</button>
<ul>
<li v-for="(item,index) of items" :key="index">{{item}}</li>
</ul>
</div>`,
setup(){
// 通過數(shù)據(jù)解構(gòu)的方式引入ref
let { ref } = Vue
// ref 處理基礎(chǔ)類型的數(shù)據(jù)
// proxy 'lilei'變成 proxy({value:'lilei'})這樣的一個響應(yīng)式引用
let name=ref("")
let items = [1,2,3,4]
const handleClick = () => {
// name = 'lilei'
name.value = 'lilei' // 引入ref之后卜壕，數(shù)據(jù)格式發(fā)生改變您旁，修改內(nèi)容的時候，也要相應(yīng)的調(diào)整
items.push(5)
}
return {
name,
items,
handleClick
}
}
}).mount('#root')
三轴捎、引用數(shù)據(jù)類型響應(yīng)式引用——reactive
Vue.createApp({
template: `<div>
<input v-model="name" />
<button @click="handleClick">增加</button>
<ul>
<li v-for="(item,index) of items" :key="index">{{item}}</li>
</ul>
</div>`,
setup(){
// 通過數(shù)據(jù)解構(gòu)的方式引入reactive
let { ref,reactive } = Vue
// reactive 處理非基礎(chǔ)類型的數(shù)據(jù)鹤盒，常見的有Array和Object類型
// proxy [1,2,3,4]變成 proxy([1,2,3,4])這樣的一個響應(yīng)式引用
let name=ref("")
let items = reactive([1,2,3,4])
const handleClick = () => {
// name = 'lilei'
name.value = 'lilei' // 引入ref之后，數(shù)據(jù)格式發(fā)生改變侦副，修改內(nèi)容的時候侦锯，也要相應(yīng)的調(diào)整
items.push(5)
}
return {
name,
items,
handleClick
}
}
}).mount('#root')
至此，我們完成了一個從“傳統(tǒng)”Vue寫法秦驯，轉(zhuǎn)向了Vue3中Composition-API的寫法尺碰，在代碼中還是有一些痛點，這個小編會在后續(xù)的文章中持續(xù)更新译隘。
