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,{
})
