vue3的学习（二）

承接上文，继续记录vue3的新特性

上文：

vue3的学习（一）

Composition （由很多apl组成的vue3代码）

vue3与vue2在代码使用上有了很大的区别，更加趋向于原生js的格式，使用composition可以将界面中重复的部分连同其功能一起提取为可重用的代码段，从而提高应用的可维护性和灵活性

1、setup函数

setup函数是vue3与vue2的一个重要的不同，setup函数在组件被创建之前，props之后进行解析执行，解析完成后，props就作为了组合式apl的入口。

setup函数的调用发生在data、computed和methods等属性之前，这些属性无法在setup中被获取使用，因此setup函数的优先级比这些函数更高，在setup函数被解析暴露之前，其中的数据与外界相互独立

在代码开始执行后，setup函数会返回一个对象，这个对象中有着setup中的数据，我们将这个对象中的内容全部暴露给外界的vue核心属性（data，methods，watch……）以及组件模板来完成一整套代码执行的流程

语法：

export default {

    // setup函数里面可以放数据  方法  计算属性  侦听器

    setup(){

       //要执行的代码

        return {

         //数据需要return出去才能使用

            }
        }

    },

}

在使用setup函数时，可以发现一个问题，就是数据无法实现实时响应式更新，因此我们需要一些方法来帮助我们解决这个问题，这时就要用到三个属性，ref，reactive，toRefs

2、ref属性

描述：返回一个较为复杂的对象，其中的value值为需要实现响应式的数据，此方法主要用于实现基础数据的响应式

语法：

setup() {

    
    	// 字符串实现响应式：
        //原方式：
        // let title2="vue3的形式" //无法实现响应式
        
        // 数字实现响应式
        // let  num=0
        let  num=ref(0)

        return {
            num
            //本质上它其实是
            //num:value值为num的对象，这个对象可以实现页面实时响应
        }

    },

3、reactive属性

描述：返回一个较为简单的对象，其中的value值为需要实现响应式的数据，此方法主要用于实现复杂数据的响应式

语法：

let data = reactive({
    num: 1,
    str: "abc",
})


return {
    data
}

4、toRefs

描述：数值被解构后会因为被解构的值不是对象，而是原数值的原因无法被解析，因此使用此方法让被解构后的响应式数值仍然可以实现页面实时响应

语法：

setup() {     

        //toRefs 可以让解构过的值仍然是一个响应式的数据
        
        let {num,str} = toRefs(reactive({
            num: 1,
            str: "abc",
        }))

        return {
            num,
            str
        }
    }

本篇注意点：

1、其实ref也可以实现复杂数据的响应式处理，因为它与reactive都是返回一个对象，它们最大的区别在于后续的侦听器和toRefs的使用

2、toRefs其实就是把解构出来的值进行再次循环处理，由于只有复杂数据类型会用到解构，因此toRefs一般与且只能与reactive进行搭配一起使用，因为ref的返回值是一个较为复杂的对象，而reactive已经够用，因此vue官方并没有把增加ref和toRefs搭配语法的打算