Vue3引入了全新的功能牵触，組合式api
組合式api的作用是：將原來分散開來定義的數(shù)據(jù)，方法陪踩，計算屬性杖们，監(jiān)聽器，組合起來定義一個完整的業(yè)務
setup是組合式api的舞臺肩狂，所有的組合式都要在setup里面使用
ref用于定義響應式數(shù)據(jù)let {ref}=Vue
使用ref()方法摘完，定義一個響應式對象。直接定義的數(shù)據(jù)不具備響應式傻谁，想要有響應式就要使用組合式api里的ref方法包裹一下
修改ref對象的值要通過value屬性
所有的組合式api要在setup方法里面使用,最后記得要return出去孝治，這一點很棒，vue3的打包體積是vue2的一半(用組合式api的方式寫).不是所有的數(shù)據(jù)在頁面中顯示和調(diào)用(方法調(diào)方法)审磁。之前定義是整體暴露√胳現(xiàn)在是按需導出。
一态蒂、基本類型數(shù)據(jù)用ref包杭措，引用類型用reactive包。使用ref和reactive包的數(shù)據(jù)具有響應式
<li>車名:{{car.name}}</li> 在模本中使用不用點vaule钾恢，在setup中使用需要點value
<li>車價：{{car.price}}</li>
// 組合式api的作用是：將原來分散開來定義的數(shù)據(jù)手素，方法，計算屬性赘那，監(jiān)聽器刑桑，組合起來定義一個完成的業(yè)務
// vue2中方式寫代碼，vue3中也可以這樣寫代碼(可以用Vue3開發(fā)募舟，但不用vue3的語法)
// vue3中引入了全新的功能，組合式API
// ref用于定義響應式數(shù)據(jù)
// 以前定義數(shù)據(jù)需要包data函數(shù)闻察，現(xiàn)在不需要了可以在setup中定義數(shù)據(jù)
let {ref}=Vue
Vue.createApp({
// setup是組合式api的舞臺拱礁，所有的組合式api都要在setup里面使用
setup() {
// 好處可以分開寫數(shù)據(jù)，分組相關的數(shù)據(jù)
let carName=ref('保時捷')
// 直接定義的數(shù)據(jù)沒有響應式辕漂，需要想要具有響應式就要用ref()包裹一下
// 可以把ref當成響應式對象
let carPrice=ref('100W')
// 模塊中的數(shù)據(jù)想要使用一定要返回出去呢灶，
// 組合式api方式寫會大大節(jié)約打包體積
function updateCar(){ //函數(shù)申明式
// 通過ref對象綁定的數(shù)據(jù)，修改對象的值钉嘹，要通過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"
}
// 模塊需要幾個暴露幾個，在頁面中執(zhí)行就要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既可以定義基本數(shù)據(jù)類型跋涣，又可以定義引用類型數(shù)據(jù)（用ref定義的不管是基本類型數(shù)據(jù)或引用類型的數(shù)據(jù)都需要點value）
Vue3又退出了組合式api ——reactive專門用來定義引用類型數(shù)據(jù)
使用方法在對象上用reactive包一下缨睡，修改時不需要再通過value同步數(shù)據(jù)鸟悴，寫法上操作更簡單(注意：reactive不能定義基本數(shù)據(jù)類型)
// ref和reactive用于定義響應式數(shù)據(jù)
let {ref,reactive}=Vue
Vue.createApp({
// 所有的組合式api要在setup方法里面使用
setup() {
// 使用ref定義基本類型數(shù)據(jù)
let name=ref('張三')
let updateName=()=>{ //字面量或表達式
// 修改值時要點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:'長城',
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,{
})
