vue2与vue3区别

BUG引领者
215 阅读5分钟

一 composition API / options API.

vue2 采用的就是 optionsAPI

(1) 优点:**`易于学习和使用`**, 每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)

(2) 缺点: 相似的逻辑, 不容易复用, 在大项目中尤为明显

(3) 虽然 optionsAPI 可以通过mixins 提取相同的逻辑, 但是也并不是特别好维护

vue3 新增的就是 compositionAPI

(1) compositionAPI 是基于 **逻辑功能** 组织代码的, 一个功能 api 相关放到一起

(2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api

(3) 大大的提升了 `代码可读性` 和 `可维护性`

vue3 推荐使用 composition API, 也保留了options API

即就算不用composition API, 用 vue2 的写法也完全兼容!!

二.根节点

vue2：只能有一个根节点

vue3：Fragments 作为 vue3 的新特性之一，允许一个vue组件可以有多个根节点。

三.建立数据方式 vue2：数据放在date中 vue3:需要使用setup（）方法，该方法在组件初始化构造的时候触发。

四.生命周期钩子函数

vue3

image.png

vue2

image.png 五.传值方式

vue2:

父传子: 一.创建子组件

二.在子组件写好样式（用props）接收父组件传来的数据

三.在父组件中 引入 注册（components）并使用子组件。 单向数据流

在vue中需要遵循单向数据流原则： （从父到子的单向数据流动, 叫单向数据流）

  1. 父组件的数据变化了，会自动向下流动影响到子组件

  2. 子组件不能直接修改父组件传递过来的 props， props是只读的

子传父: 子组件可以通过 this.$emit('事件名', 参数1, 参数2, ...) 触发事件的同时传参的。

当父组件收到申请需要在子组件标签上设置监听并添加事件名。

vue3:

父传子

  1. 父组件提供数据
  2. 父组件将数据传递给子组件
  3. 子组件通过defineProps进行接收
  4. 子组件渲染父组件传递的数据
  5. 注意：如果使用defineProps接收数据，这个数据只能在模板中渲染，如果想要在script中也操作props属性，应该接收返回值。

子传父

  1. 子组件通过defineEmit获取emit对象（因为没有this)
  2. 子组件通过emit触发事件，并且传递数据
  3. 父组件提供方法
  4. 父组件通过自定义事件的方式给子组件注册事件

六.构建项目工具

vue2:

1、安装node和cnpm；2、安装vue-cli脚手架构建工具；3、用vu e-cli构建 项目；4、打开cmd命令窗口，使用cd命令进入到具体项目文件夹中；5、执行“cnpm install”命令即可安装依赖。

vue3: 使用vite.vite并不需要像vue-cli那样在使用前提前安装直接执行命令就可以通过vite创建项目，前提是当前的node版本不能低于16

六.vue3新增了Teleport瞬移组件。

七.双向数据绑定

vue2：利用ES5的API Object.defineProperty( )对数据惊醒劫持结合发布订阅模式的方式实现

  • 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
  • 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
  • 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

vue3：使用ES6的Proxy API对数据代理。

  • 因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

  • Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？

    • 判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
    • 监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

**- Proxy 与 Object.defineProperty 优劣对比 **

-   Proxy 的优势如下:  


    -   Proxy 可以直接监听对象而非属性；

-   Proxy 可以直接监听数组的变化；  


    -   Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
    -   Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
    -   Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

-   Object.defineProperty 的优势如下:  


    -   兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
avatar
文章
阅读
粉丝