vue3.0和vue2.0的区别对比

一个不知名的南墙

已于 2022-04-27 09:49:55 修改

阅读量1.2w

点赞数 6

文章标签： vue.js

于 2022-04-26 14:50:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49354517/article/details/124426126

版权

本文对比了Vue2.0和Vue3.0在响应式系统、模板语法、生命周期函数、setup函数、v-model使用方式以及开发模式上的区别。Vue3通过Proxy提升了响应式性能，生命周期函数有新的命名，setup函数成为核心，v-model的使用也有所变化，同时引入组合式API以增强代码可读性和逻辑复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue2的响应式 vs vue3的响应式 (性能提升)

响应式系统升级

vue2 中的 object.defineProperty(响应式系统的核心)

初始化的时候，会遍历data中的所有成员，使用defineProperty把对象的属性转换成get和set，如果该成员中的属性还是对象的话，需要递归处理每一个子对象的属性。这些都是在初始化的时候进行的。即使你没有使用到这个属性，那么也是会将该属性进行响应式处理。
复制代码

vue3 proxy

proxy的性能本身就比defineProperty要好， 另外，代理对象可以拦截属性的访问、赋值、删除等操作，不需要初始化时遍历所有的属性。另外，如果有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。使用proxy默认就可以监听到动态新增的属性，可以监听到删除的属性。可以监听数组的索引和length属性。
复制代码

总结： vue3使用的proxy对象提升了响应式系统的性能和功能

2、模板语法

打开App.vue文件，唯一和Vue2不同的是：Template不再强调一定要有根标签了。

3、生命周期函数对比

1）首先需要了解生命周期是什么？

Vue实例从创建到销毁的过程，就是Vue实例的生命周期。

这个过程包括数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

2）具体函数对比

3）具体含义和实际项目中的意义：

vue3中各个生命周期函数的意义

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

vue2中各个生命周期函数的意义

beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。

create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。

beforeMount():已经完成了模板的编译，还没有挂载到页面中。

mounted()：将编译好的模板挂载到页面指定的容器中显示。

beforeUpdate():状态更新之前执行函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为还没有开始重新渲染DOM节点。

updated():此时data中的状态值和界面上显示的数据都已经完成了跟新，界面已经被重新渲染好了！

beforeDestroy():实例被销毁之前。

destroyed():实例销毁后调用，Vue实例指示的所有东西都会解绑，所有的事件监听器都会被移除,所有的子实例也都会被销毁。组件已经被完全销毁，此时组建中所有data、methods、以及过滤器，指令等，都已经不可用了。

4)具体使用方法

总结起来就是：Vue3相比原有的生命周期，基本都是存在的，Vue3只不过有了新的命名：beforeDestroy变成了onbeforeUnmount；destroy变成了onUnmounted，名字变了但是原理还是没变的；

4、重要的setup函数

在vue2中我们js部分是data、methods、computed等等，但是在vue3中都是在setup上,setup函数可以说是Vue3的属性和方法入口。如下图

setup函数中有以下几个特点：

1）.setup(props,context):接收两个参数

(1) props ：接收来自父组件传来的参数

(2) context ：上下文，主要包含3个使用参数：attrs,emits,slots，相当于Vue2中this的 
attrs,emits,slots
复制代码

props:['msg'],
emits:['eventOne']
// Vue3中，使用了emits需要像props一样，在页面中声明调用了函数,否则则会警告(虽然还是能用)
复制代码

2）.有返回值，返回值可以是两种：

(1) 返回 对象 ，返回的对象中的属性方法，可在模板中直接使用；

(2) 返回 渲染函数 ，可以自定义渲染的内容；
复制代码

3）.函数内部没有this；

4）.当内部有异步函数，需要使用到await的时候，可以直接使用，不需要在setup前面加async；

//最基础的写法
import { h } from 'vue'
setup() {
    let name = '连颜少';
    let age = 18;

    function sayhello() {
      alert(`我叫${name},我每年都${age}.你好`)
    }
    function changeInfo() {
      name = 'new 连颜少';
      age = 28;
      console.log(name,age);
    }
    // 1.返回对象
    return {
      name,age,sayhello,changeInfo
    }
    // 2.返回渲染函数
    // return ()=> h('h1',name)
  }

5）如果想要实现双向数据绑定原理，需要通过ref定义变量来实现