1.初識(shí)Vue3
(1) 導(dǎo)入vue3
<script src="https://unpkg.com/vue@next"></script>
(2) 創(chuàng)建vue實(shí)例
(2.1) vue2創(chuàng)建一個(gè)vue實(shí)例：
// 在vue2里面的Vue是一個(gè)構(gòu)造函數(shù)，通過該構(gòu)造函數(shù)創(chuàng)建一個(gè)Vue實(shí)例
new Vue({
el:'#app',
data:{
name:'Vue2',
age:'6'
}
}).$mount('#app') */
// vue2可以通過el選項(xiàng)指定一個(gè)掛載的容器，也可以通過$mount()方法指定掛載的容器
(2.2) vue3創(chuàng)建一個(gè)vue實(shí)例：
// 在vue3里面Vue是一個(gè)對(duì)象，通過該對(duì)象的createApp()方法，創(chuàng)建一個(gè)Vue實(shí)例
Vue.createApp({
// 注意：vue3中，取消了el選項(xiàng)
// 注意：vue3中，無論是組件還是vue實(shí)例，data選項(xiàng)都必須是一個(gè)方法，由方法返回對(duì)象。
data() {
return {
ame:'Vue3',
age:2
}
},
}).mount('#app')
3.頁(yè)面中使用
<div id="app">
<div>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</div>
</div>
2.Vue2和Vue3的響應(yīng)式
(1) vue2的響應(yīng)式
<div id="app" v-cloak>
<div>學(xué)生信息：{{student}}</div>
<button @click="student.name+='!'">修改學(xué)生姓名</button>
<button @click="student.age++">修改學(xué)生年齡</button>
<button @click="addSex">添加性別</button>
<button @click="delName">刪除姓名</button>
<hr>
<div>食物：{{foods}}</div>
<button @click="addFood">添加食物</button>
<button @click="delFood">刪除帝王蟹</button>
</div>
new Vue({
el:'#app',
data:{
student:{
name:'張三',
age:20
},
foods:['魚翅','魚子醬','松茸','帝王蟹']
},
methods: {
addSex(){
// 后添加的屬性是非響應(yīng)式的
// 可以通過這個(gè)方法this.$forceUpdate()強(qiáng)制頁(yè)面更新一次
// this.student.sex='男'
// this.$forceUpdate()
// 推薦使用$set()方法給對(duì)象添加新的屬性，確保新添加的屬性同樣具備響應(yīng)式
this.$set(this.student,'sex','男')
console.log(this.student);
},
delName(){
// 直接使用delete方法刪除對(duì)象的屬性后，不具備響應(yīng)式
// delete this.student.name
// 使用$delete，具備響應(yīng)式
this.$delete(this.student,'name')
},
addFood(){
// 操作數(shù)組后同時(shí)要具有響應(yīng)式，必須要使用下面的方法：
// push pop unshift shift sort reserve splice
// this.foods.push('佛跳墻')
// this.foods[4] = '佛跳墻'
// this.$forceUpdate()
// 推薦使用$set()方法根據(jù)下標(biāo)添加數(shù)組元素，確保新添加的元素同樣具備響應(yīng)式
this.$set(this.foods,4,'佛跳墻')
},
delFood(){
// this.foods.splice(3,1)
// 直接根據(jù)下標(biāo)刪除數(shù)組元素，不具備響應(yīng)式
// this.foods[3] = null
// 使用$delete,具備響應(yīng)式
this.$delete(this.foods,3)
}
},
})
(2) vue3的響應(yīng)式
vue3修復(fù)了vue2中響應(yīng)式的所有缺陷。
在vue3中，直接給對(duì)象添加屬性、直接刪除對(duì)象的屬性、根據(jù)下標(biāo)操作數(shù)組，都依然具備響應(yīng)式。
Vue.createApp({
data() {
return {
student: {
name: '張三',
age: 20
},
foods: ['魚翅', '魚子醬', '松茸', '帝王蟹']
}
},
methods: {
addSex(){
this.student.sex='男'
},
delName(){
delete this.student.name
},
addFood(){
this.foods[4] ='佛跳墻'
},
delFood(){
this.foods[3] = null
}
},
}).mount('#app')
3.引出Vue3新推出的組合式API
(1) vue2中只能這樣寫代碼，vue3也可以這樣寫
<div id="app">
<div>
<p>{{carName}}--{{carPrice}}</p>
<button @click="updateCar">修改汽車信息</button>
</div>
<div>
<p>{{planeName}}--{{planePrice}}</p>
<button @click="updatePlane">修改飛機(jī)信息</button>
</div>
<div>
<p>{{watchName}}--{{watchPrice}}</p>
<button @click="updateWatch">修改手表信息</button>
</div>
<div>
<p>{{phoneName}}--{{phonePrice}}</p>
<button @click="updatePhone">修改手機(jī)信息</button>
</div>
</div>
Vue.createApp({
data() {
return {
carName:'保時(shí)捷',
carPrice:'100w',
planeName:'播音747',
planePrice:'10y',
watchName:'勞力士',
watchPrice:'10w',
phoneName:'iphone13',
phonePrice:'5999'
}
},
methods: {
updateCar(){
this.carName = '布加迪威龍'
this.carPrice = '200w'
},
updatePlane(){
this.planeName = 'B52轟炸機(jī)'
this.planePrice = '30y'
},
updateWatch(){
this.watchName = '歐米茄'
this.watchPrice = '4w'
},
updatePhone(){
this.phoneName = '華為'
this.phonePrice = '6999'
}
},
}).mount('#app')
(2) vue3引入了全新的功能，組合式API，所有的組合式API都要在setup里面使用
Vue3中，無論是Vue實(shí)例，還是組件，data選項(xiàng)都必須是一個(gè)方法。
我們之前習(xí)慣將所有的數(shù)據(jù)放在data選項(xiàng)中定義，所有的方法放在methods選項(xiàng)中定義，所有的計(jì)算屬性放在computed選項(xiàng)中定義，所有的偵聽器放在watch選項(xiàng)中定義。這樣就會(huì)導(dǎo)致一個(gè)業(yè)務(wù)的代碼會(huì)拆分到多個(gè)結(jié)構(gòu)中去寫，如果一個(gè)頁(yè)面中要操作很多個(gè)業(yè)務(wù)，代碼后期維護(hù)成本會(huì)很高。
所以，Vue3引入了組合式API，簡(jiǎn)化之前繁瑣的過程，將相同業(yè)務(wù)的代碼靠在一起寫。
組合式api的作用是：將原來分散開來定義的數(shù)據(jù)、方法、計(jì)算屬性、監(jiān)聽器等，組合起來定義一個(gè)完整的業(yè)務(wù)。
組合式API(Composition API)：Vue推出的一些新的方法，這個(gè)方法在setup中使用。
ref對(duì)象：在setup中，直接定義的數(shù)據(jù)是不具備響應(yīng)式的。ref用于定義響應(yīng)式數(shù)據(jù)，使用ref組合式API對(duì)數(shù)據(jù)進(jìn)行包裝，包裝后返回的是ref對(duì)象。ref對(duì)象的value屬性保存的是值。
<div id="app">
<div>
<p>{{carName}}--{{carPrice}}</p>
<button @click="updateCar">修改汽車信息</button>
</div>
<div>
<p>{{planeName}}--{{planePrice}}</p>
<button @click="updatePlane">修改飛機(jī)信息</button>
</div>
<div>
<p>{{watchName}}--{{watchPrice}}</p>
<button @click="updateWatch">修改手表信息</button>
</div>
<div>
<p>{{phoneName}}--{{phonePrice}}</p>
<button @click="updatePhone">修改手機(jī)信息</button>
</div>
</div>
// ref用于定義響應(yīng)式數(shù)據(jù)
let { ref } = Vue
Vue.createApp({
// setup是組合式API的舞臺(tái)，所有的組合式API都要在setup里面使用
setup() {
// 定義汽車相關(guān)數(shù)據(jù)
// 使用ref()方法，定義一個(gè)響應(yīng)式對(duì)象
let carName = ref('保時(shí)捷')
let carPrice = ref('100w')
// 定義汽車相關(guān)方法
function updateCar() {
// 修改對(duì)象的值，要通過value屬性
carName.value = '布加迪威龍'
carPrice.value = '200w'
console.log(carName,carPrice);
}
// 定義飛機(jī)相關(guān)數(shù)據(jù)
let planeName = ref('播音747')
let planePrice = ref('10y')
function updatePlane() {
planeName.value = 'B52轟炸機(jī)'
planePrice.value = '30y'
}
// 手表
let watchName = ref('勞力士')
let watchPrice =ref( '10w')
function updateWatch() {
watchName.value = '歐米茄'
watchPrice.value = '4w'
}
// 手機(jī)
let phoneName = ref('iphone13')
let phonePrice =ref( '5999')
function updatePhone() {
phoneName.value = '華為'
phonePrice.value= '6999'
}
return {
// 返回汽車相關(guān)數(shù)據(jù)
carName,
carPrice,
updateCar,
// 返回飛機(jī)相關(guān)數(shù)據(jù)
planeName,
planePrice,
updatePlane,
// 返回手表相關(guān)數(shù)據(jù)
watchName,
watchPrice,
updateWatch,
// 返回手機(jī)相關(guān)數(shù)據(jù)
phoneName,
phonePrice,
updatePhone
}
}
}).mount('#app')
4.ref( )和reactive( )
所有的組合式API，要在setup方法里面使用；setup方法，返回出去的對(duì)象里面的成員，可以在模板中使用。
ref 和 reactive 用于定義響應(yīng)式數(shù)據(jù)。
通常情況下，基本類型的數(shù)據(jù)，選擇用ref定義；引用類型的數(shù)據(jù)，選擇用reactive定義。
ref方法：返回的是ref對(duì)象，ref對(duì)象的value屬性是一個(gè)代理對(duì)象(Proxy)。使用ref既可以定義基本類型數(shù)據(jù)，也可以定義引用類型數(shù)據(jù)。注意：修改值時(shí)，必須要先 點(diǎn)value再 點(diǎn)具體的屬性 = 值
reactive方法：直接返回一個(gè)代理對(duì)象(Proxy)。reactive只能定義引用類型數(shù)據(jù)。
<div id="app">
<ul>
<li>姓名：{{name}}</li>
<li><button @click="updateName">修改姓名</button></li>
</ul>
<ul>
<li>車名：{{car.name}}</li>
<li>車價(jià)：{{car.price}}</li>
<li><button @click="updateCar">修改汽車</button></li>
</ul>
<ul>
<li>飛機(jī)名：{{plane.name}}</li>
<li>飛機(jī)價(jià)：{{plane.price}}</li>
<li><button @click="updatePlane">修改飛機(jī)</button></li>
</ul>
</div>
let { ref, reactive } = Vue
Vue.createApp({
setup() {
// 使用ref定義基本類型數(shù)據(jù)
let name = ref('張三')
let updateName = () => {
// 修改值時(shí)，必須要先 點(diǎn)value
name.value = '李四'
}
// 使用ref定義引用類型數(shù)據(jù)
let car = ref({
name: '奔馳',
price: 30
})
let updateCar = () => {
// 修改值時(shí)，必須要先 點(diǎn)value
car.value.name = '奧迪'
car.value.price = 40
}
// 使用reactive定義引用類型數(shù)據(jù)
// 注意：reactive只能定義引用類型數(shù)據(jù)
// 定義引用類型優(yōu)先選擇reactive，定義值類型選擇ref
let plane = reactive({
name: '長(zhǎng)城',
price: 300
})
let updatePlane = () => {
plane.name = '東風(fēng)'
plane.price = 400
}
console.log(car);
console.log(plane);
return {
name,
updateName,
car,
updateCar,
plane,
updatePlane
}
}
}).mount('#app')
