一、Vue2和Vue3的區別

1、創建方式的不同：

（1）、vue2:是一個構造函數，通過該構造函數創建一個Vue實例

new Vue({})

（2）、Vue3:是一個對象。并通過該對象的createApp()方法，創建一個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:后添加的屬性不具備響應式。要想實現響應式只有兩種方法。
(1)、set（）方法給對象添加新的屬性，確保新添加的屬性同樣具備響應式。
(3)、操作數組后同時要具有響應式，必須要使用下面的方法：push（在數組的最后面添加數據）、pop（刪除數組的最后一個數據）、unshift(在數組前面添加內容)、shift(刪除數組最前面的數據)、sort(排序)、reverse（反轉）、splice（截取刪除）
示例：

new Vue({
el:'容器名字 '，
data：{
star:{
name:"李易峰",
age:34
       }
          }
            })，
methods:{
//頁面中直接調用這個方法就好了。
addSex(){
//this.star.sex='男'
//this.$forceUpdate()
this.$set(this.star,'sex','男')
}
}

（2）、Vue3:vue3是自動實現數據響應式。

    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的作用是將原來分散開來定義的數據、方法、計算屬性、監聽器、組合起來定義一個完整的業務。
ref:用來定義響應式數據

let { ref } = Vue

    Vue.createApp({
            setup() {
                //  使用ref()方法，定義一個響應式對象
                let carName = ref('瑪莎拉蒂')
                let carPrice = ref('100W')
               //需要寫一個函數，這個里面有一個value值
                function updateCar() {
               //修改信息的時候，需要.value值來修改。這樣的話才能實現數據的響應式原理
                    carName.value = "奔馳",
                    carPrice.value='30W'
                }
            //定義的數據需要在return里面返回才能在頁面中使用
                return{
                    carName,
                    carPrice,
                    updateCar
                }
            }
        }).mount('#app')

頁面中：

    <div id="app">
<div>{{carName}}</div>
<div>{{carPrice}}</div>
<button @click="updateCar">修改信息</button>
    </div>