在之前的文章中，小編和大家一起學習了關於Vue的基本語法和概念，包括元件、資料混入和插槽等。從今天開始，小編和大家一起學習Vue3中的新特性，也就是網上炒的鋪天蓋地的Composition-API，看看到底有什麼神奇之處，我們之前通過Vue寫的程式碼，基本都是這樣

Vue.createApp({
    data(){
        return {
            name:"" // 繫結基本資料型別資料
            items:[1,2,3,4] // 繫結引用資料型別
        }
    },
    methods:{
        handleClick(){ 
 
// 繫結按鈕的點選函式
            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函式的形式，就是這樣

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')

這個時候我們發現，不僅按鈕點選事件不好用了，甚至控制檯也會出現警告，handleClick方法沒有被註冊，實際上這正是小編要和大家分享的三個點

一、控制檯出現的警告是因為在setup函式中沒有返回對應的函式，在頁面中使用的變數和函式，都需要在return的物件中，才能使用，至於網上說的其他的痛點，比如如何獲取this還有元件之間傳值，小編會在接下來的內容中相繼更新。為了修復控制檯的錯誤，我們可以把程式碼完善成這樣

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')

經過上面的改動，我們發現控制檯的錯誤是不見了，但是點選按鈕依然沒有反應，這個時候我們需要引入setup函式中對於基本資料型別和引用資料型別的繫結方式

二、基礎資料型別響應式引用——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(){
        // 通過資料解構的方式引入ref
        let { ref } = Vue 
        // ref 處理基礎型別的資料
        // proxy 'lilei'變成 proxy({value:'lilei'})這樣的一個響應式引用
        let name=ref("")
        let items = [1,2,3,4]
        const handleClick = () => {
          // name = 'lilei'
          name.value = 'lilei' // 引入ref之後，資料格式發生改變，修改內容的時候，也要相應的調整
          items.push(5)
        }
        return {
          name,
          items,
          handleClick
        }
    }
}).mount('#root')

三、引用資料型別響應式引用——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(){
        // 通過資料解構的方式引入reactive
        let { ref,reactive } = Vue 
        // reactive 處理非基礎型別的資料，常見的有Array和Object型別
        // proxy [1,2,3,4]變成 proxy([1,2,3,4])這樣的一個響應式引用
        let name=ref("")
        let items = reactive([1,2,3,4])
        const handleClick = () => {
          // name = 'lilei'
          name.value = 'lilei' // 引入ref之後，資料格式發生改變，修改內容的時候，也要相應的調整
          items.push(5)
        }
        return {
          name,
          items,
          handleClick
        }
    }
}).mount('#root')

至此，我們完成了一個從“傳統”Vue寫法，轉向了Vue3中Composition-API的寫法，在程式碼中還是有一些痛點，這個小編會在後續的文章中持續更新。

大家還可以掃描二維碼，關注我的微信公眾號，蝸牛全棧。