Vue3——组合式api中的ref&reactive

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包的数据具有响应式

    
车名:{{car.name}}
   在模本中使用不用点vaule，在setup中使用需要点value
    
车价：{{car.price}}
        // 组合式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,{
        })