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

一、基本類型數據用ref包，引用類型用reactive包。使用ref和reactive包的數據具有響應式

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

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

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

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

ref原理

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

reactive原理

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