Vue2和Vue3的区别&&Vue3的组合式API

一、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>

喜欢的朋友记得点赞、收藏、关注哦！！！