In the previous article, Xiaobian and everyone learned the basic syntax and concepts of Vue, including components, data mixing and slots. Starting today, Xiaobian will learn the new features in Vue3, that is, the overwhelming composition API fried online, to see what the magic is. The code we wrote through Vue is basically like this

Vue.createApp({
    data(){
        return {
            name:"" // Bind basic data type data
            items:[1,2,3,4] // Binding reference data type
        }
    },
    methods:{
        handleClick(){ // Click function of binding button
            this.name = 'lilei'
            this.items.push(5)
        }
    },
    template:`
        <div>
            <input v-model="name" />
            <button @click="handleClick">increase</button>
            <ul>
                <li v-for="(item,index) of items" :key="index">{{item}}</li> 
            </ul>
        </div>
        `
}).mount('#root')

The same code is transformed into the form of setup function, that's it

Vue.createApp({
    template: `<div>
            <input v-model="name" />
            <button @click="handleClick">increase</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')

At this time, we found that not only the button click event is not easy to use, but also a warning will appear on the console. The handleClick method has not been registered. In fact, these are the three points that Xiaobian wants to share with you

1, The warning appears on the console because the corresponding function is not returned in the setup function. The variables and functions used in the page can only be used in the return object. As for other pain points mentioned on the Internet, such as how to obtain this and the transfer of values between components, the editor will be updated in the next content. In order to fix the console error, we can improve the code like this

Vue.createApp({
    template: `<div>
            <input v-model="name" />
            <button @click="handleClick">increase</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')

After the above changes, we find that the console error is missing, but the button still doesn't respond. At this time, we need to introduce the binding method for basic data types and reference data types in the setup function

2, Basic data type responsive reference - ref

Vue.createApp({
    template: `<div>
            <input v-model="name" />
            <button @click="handleClick">increase</button>
            <ul>
                <li v-for="(item,index) of items" :key="index">{{item}}</li> 
            </ul>
        </div>`,
    setup(){
        // Introduced by data deconstruction ref
        let { ref } = Vue 
        // ref Processing base type data
        // proxy 'lilei'become proxy({value:'lilei'})Such a responsive reference
        let name=ref("")
        let items = [1,2,3,4]
        const handleClick = () => {
          // name = 'lilei'
          name.value = 'lilei' // introduce ref After that, the data format changes, and the content should be adjusted accordingly
          items.push(5)
        }
        return {
          name,
          items,
          handleClick
        }
    }
}).mount('#root')

3, Reference data type: reactive

Vue.createApp({
    template: `<div>
            <input v-model="name" />
            <button @click="handleClick">increase</button>
            <ul>
                <li v-for="(item,index) of items" :key="index">{{item}}</li> 
            </ul>
        </div>`,
    setup(){
        // Introduced by data deconstruction reactive
        let { ref,reactive } = Vue 
        // reactive Dealing with non basic types of data, common are Array and Object type
        // proxy [1,2,3,4]become proxy([1,2,3,4])Such a responsive reference
        let name=ref("")
        let items = reactive([1,2,3,4])
        const handleClick = () => {
          // name = 'lilei'
          name.value = 'lilei' // introduce ref After that, the data format changes, and the content should be adjusted accordingly
          items.push(5)
        }
        return {
          name,
          items,
          handleClick
        }
    }
}).mount('#root')

So far, we have changed from the "traditional" Vue writing method to the composition API writing method in Vue3. There are still some pain points in the code. This small series will be continuously updated in subsequent articles.

You can also scan the two-dimensional code, pay attention to my WeChat official account, snail stack.