一、Vue2和Vue3的區(qū)別
1橘原、創(chuàng)建方式的不同：
（1）斯够、vue2:是一個構(gòu)造函數(shù)疤估，通過該構(gòu)造函數(shù)創(chuàng)建一個Vue實例
new Vue({})
（2）、Vue3:是一個對象。并通過該對象的createApp()方法，創(chuàng)建一個vue實例。
Vue.createApp({})
2嫁赏、掛載容器的不同。
（1）油挥、Vue2：可以通過el選項和$mount()方法來掛載容器潦蝇。
new Vue({
el:'容器名字 '
})
new Vue({
}).$mount('容器名字')
（2）、Vue3:只能通過mount()方法來掛載容器
Vue.createApp({
}).mount('容器名字')
3深寥、data選項的不同
（1）攘乒、Vue2:data選項可以是一個對象，也可以是一個方法（由方法返回一個對象）惋鹅。
new Vue({
el:'容器名字 ',
data:{
}
//或者
new Vue({
el:'容器名字 ',
data(){
return{
}
}
})
})
（2）则酝、Vue3:data選項只能是一個方法，由方法返回一個對象闰集。
Vue.createApp({
data(){
return{}
}
}).mount('容器名字')
3沽讹、響應式的不同
（1）、Vue2:后添加的屬性不具備響應式武鲁。要想實現(xiàn)響應式只有兩種方法爽雄。
(1)、set（）方法給對象添加新的屬性乘盖，確保新添加的屬性同樣具備響應式焰檩。
(3)、操作數(shù)組后同時要具有響應式侧漓，必須要使用下面的方法：push（在數(shù)組的最后面添加數(shù)據(jù)）锅尘、pop（刪除數(shù)組的最后一個數(shù)據(jù)）监氢、unshift(在數(shù)組前面添加內(nèi)容)布蔗、shift(刪除數(shù)組最前面的數(shù)據(jù))、sort(排序)浪腐、reverse（反轉(zhuǎn)）纵揍、splice（截取刪除）
示例：
new Vue({
el:'容器名字 '，
data：{
star:{
name:"李易峰",
age:34
}
}
})议街，
methods:{
//頁面中直接調(diào)用這個方法就好了泽谨。
addSex(){
//this.star.sex='男'
//this.$forceUpdate()
this.$set(this.star,'sex','男')
}
}
（2）、Vue3:vue3是自動實現(xiàn)數(shù)據(jù)響應式特漩。
Vue.createApp({
data() {
return {
star: {
name: '李易峰',
age: 34
},
foods: ['火鍋', '串串', '小土豆', '烤榴蓮', '螺螄粉']
}
},
methods: {
//添加性別
addSex(){
this.star.sex="男"
},
delName(){
delete this.star.name
},
// 添加食物
addFoods(){
this.foods.push('西瓜')
},
// 刪除食物
deleteFoods(){
this.foods.splice(0,1)
}
},
}).mount('#app')
4吧雹、Vue3新推出的組合式API
（1）、Vue2：定義方法的時候需要寫在methods里面
在Vue2中涂身，后添加的屬性是非響應式的雄卷。頁面不更新。需要用get()和set()方法.
（2）蛤售、Vue3：組合式API的作用是將原來分散開來定義的數(shù)據(jù)丁鹉、方法、計算屬性悴能、監(jiān)聽器揣钦、組合起來定義一個完整的業(yè)務。
ref:用來定義響應式數(shù)據(jù)
let { ref } = Vue
Vue.createApp({
setup() {
// 使用ref()方法漠酿，定義一個響應式對象
let carName = ref('瑪莎拉蒂')
let carPrice = ref('100W')
//需要寫一個函數(shù)冯凹，這個里面有一個value值
function updateCar() {
//修改信息的時候，需要.value值來修改炒嘲。這樣的話才能實現(xiàn)數(shù)據(jù)的響應式原理
carName.value = "奔馳",
carPrice.value='30W'
}
//定義的數(shù)據(jù)需要在return里面返回才能在頁面中使用
return{
carName,
carPrice,
updateCar
}
}
}).mount('#app')
頁面中：
<div id="app">
<div>{{carName}}</div>
<div>{{carPrice}}</div>
<button @click="updateCar">修改信息</button>
</div>
