Vue3引入了全新的功能，組合式api
組合式api的作用是：將原來分散開來定義的數(shù)據(jù)，方法，計(jì)算屬性，監(jiān)聽器，組合起來定義一個(gè)完整的業(yè)務(wù)
setup是組合式api的舞臺(tái)，所有的組合式都要在setup里面使用
ref用于定義響應(yīng)式數(shù)據(jù)let {ref}=Vue
使用ref()方法，定義一個(gè)響應(yīng)式對(duì)象。直接定義的數(shù)據(jù)不具備響應(yīng)式，想要有響應(yīng)式就要使用組合式api里的ref方法包裹一下
修改ref對(duì)象的值要通過value屬性
所有的組合式api要在setup方法里面使用,最后記得要return出去，這一點(diǎn)很棒，vue3的打包體積是vue2的一半(用組合式api的方式寫).不是所有的數(shù)據(jù)在頁面中顯示和調(diào)用(方法調(diào)方法)。之前定義是整體暴露?，F(xiàn)在是按需導(dǎo)出。

一、基本類型數(shù)據(jù)用ref包，引用類型用reactive包。使用ref和reactive包的數(shù)據(jù)具有響應(yīng)式

    <li>車名:{{car.name}}</li>   在模本中使用不用點(diǎn)vaule，在setup中使用需要點(diǎn)value
    <li>車價(jià)：{{car.price}}</li>
        // 組合式api的作用是：將原來分散開來定義的數(shù)據(jù)，方法，計(jì)算屬性，監(jiān)聽器，組合起來定義一個(gè)完成的業(yè)務(wù) 
         // vue2中方式寫代碼，vue3中也可以這樣寫代碼(可以用Vue3開發(fā)，但不用vue3的語法)
        // vue3中引入了全新的功能，組合式API
        // ref用于定義響應(yīng)式數(shù)據(jù)
        // 以前定義數(shù)據(jù)需要包data函數(shù)，現(xiàn)在不需要了可以在setup中定義數(shù)據(jù)
        let {ref}=Vue
        Vue.createApp({
            // setup是組合式api的舞臺(tái)，所有的組合式api都要在setup里面使用
            setup() {
                // 好處可以分開寫數(shù)據(jù)，分組相關(guān)的數(shù)據(jù)
                    let carName=ref('保時(shí)捷')
                    // 直接定義的數(shù)據(jù)沒有響應(yīng)式，需要想要具有響應(yīng)式就要用ref()包裹一下
                    // 可以把ref當(dāng)成響應(yīng)式對(duì)象
                    let carPrice=ref('100W')
                    // 模塊中的數(shù)據(jù)想要使用一定要返回出去，
                    // 組合式api方式寫會(huì)大大節(jié)約打包體積
                  function updateCar(){  //函數(shù)申明式
                    //   通過ref對(duì)象綁定的數(shù)據(jù)，修改對(duì)象的值，要通過value屬性
                      console.log(carName);
                      carName.value="特斯拉"
                      carPrice.value="80W"
                  }
                //   所有模塊在一起，后期修改起來很方便
                    let planeName=ref('波音747')
                    let planePrice=ref('10y')
                    function updatePlane(){
                    phoneName.value="B52轟炸機(jī)"
                    phonePrice.value="30y"
                 }
             
                    // 模塊需要幾個(gè)暴露幾個(gè)，在頁面中執(zhí)行就要return出去
                    return{
                        carName,
                        carPrice,
                        planeName,
                        planePrice,
                        watchName,
                        watchPrice,
                        phoneName,
                        phonePrice,
                        updateCar,
                        updatePlane,
                        updateWatch,updatePhone
                    }
            },
vue2
            // data() {
            //     return {
            //         carName:'保時(shí)捷',
            //         carPrice:'100W',
            //     }
            // },
            // 這種方法寫是整體暴露
            // methods: {
            //     updateCar(){
            //         this.carName='特斯拉',
            //         this.carProce="80w"
            //     }
            // },
        }).mount('#app')

使用ref既可以定義基本數(shù)據(jù)類型，又可以定義引用類型數(shù)據(jù)（用ref定義的不管是基本類型數(shù)據(jù)或引用類型的數(shù)據(jù)都需要點(diǎn)value）
Vue3又退出了組合式api ——reactive專門用來定義引用類型數(shù)據(jù)
使用方法在對(duì)象上用reactive包一下，修改時(shí)不需要再通過value同步數(shù)據(jù)，寫法上操作更簡(jiǎn)單(注意：reactive不能定義基本數(shù)據(jù)類型)

    //  ref和reactive用于定義響應(yīng)式數(shù)據(jù)
         let {ref,reactive}=Vue
Vue.createApp({
    // 所有的組合式api要在setup方法里面使用
setup() {
    // 使用ref定義基本類型數(shù)據(jù)
    let name=ref('張三')
    let updateName=()=>{  //字面量或表達(dá)式
        // 修改值時(shí)要點(diǎn)value
        name.value='李四'
    }
    // 使用ref定義引用類型數(shù)據(jù)
    let car=ref({
    name:'奔馳',
    price:30
    })
    let updateCar=()=>{
  car.value.name="奧迪"
  car.value.price=40
    }
    // 使用reactive定義引用類型數(shù)據(jù)
    // 注意：reactive只能定義引用類型數(shù)據(jù)  值類型用ref
    let plane=reactive({
        name:'長(zhǎng)城',
        price:300

    })
    let updatePlane=()=>{
        plane.name="東風(fēng)",
        plane.price=400
    }
    console.log(car);
    // stup方法，放回出的對(duì)象里面的成員，可以在模板中使用，可以按需導(dǎo)出
    return{
        name,updateName,car,updateCar,plane,updatePlane
    }
}
}).mount('#app')

ref原理

        // 原生對(duì)象不具備響應(yīng)式，Vue3會(huì)對(duì)原生對(duì)象進(jìn)行處理，返回一個(gè)proxy
        let obj={
            name:'奔馳',
            price:30
        }
        let o=ref(obj)
        // 01.將源對(duì)象，生成一個(gè)對(duì)應(yīng)的代理對(duì)象
        let proxy=new Proxy({
            get(){},
            set(){},
            deleteProperty(){}
        })
        // 02.將代理對(duì)象給o對(duì)象的value屬性.只有點(diǎn)value才能獲取到代理對(duì)象
        o.value=proxy

reactive原理

        let obj={
            name:'奔馳',
            price:30
        }
        let o=reactive(obj)
        //直接返回一個(gè)對(duì)象，所以不需要點(diǎn)value
        o=new Proxy(obj,{
        })