Vue3新特性——Vue3的新特性新功能一览

最新推荐文章于 2024-08-22 22:00:10 发布

诸葛韩信

最新推荐文章于 2024-08-22 22:00:10 发布

阅读量827

点赞数

分类专栏： vue3

本文链接：https://blog.csdn.net/qq_31968791/article/details/118092724

版权

vue

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue3已经更新到了第三个大版本。感谢尤大大及其团队的开发，让我们体验到了一个很优秀的mvvm框架。如果是之前有用过vue的话，那么对vue的双向绑定一定不会陌生的，那种只需要关注数据，不用过多盯住视图就可以开发出更好交互体验视觉美感的前端项目，实在是过瘾。vue3已经正式上线，vue2还是仍旧可以正常使用。vue3更新了，肯定是更快，更小，更简单使用的了。那么vue3到底有什么新的东西呢？下面我们来具体瞧瞧吧！（一览而过，不会深入）

Comparing the Options API and Composition API

composition api是vue3中比较重磅的功能。对于一个页面复杂度比较高的项目来说，这就起到了页面内再分级模块的助攻。可以将页面上methods分类放进setup中，起到容易识别，容易维护的目的。可以概括两大优势：

Composition API 是根据逻辑相关性组织代码的，提高可读性和可维护性
基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）

以下是两种API，其中Options

我们知道，Options API就是我们之前在vue上构建的内容，如下：

在这里插入图片描述

而composition API 是可以将不同方法分开的：

在这里插入图片描述

自然看起来就是舒适了啊。如何使用呢？简单如下：

首先

你需要

import {reactive} from 'vue'

之后

你需要通过reactive定义参数，这个参数就是reactive类参数

const state = reactive({ count: 0 })

生命周期

这里需要注意，调用或者修改这参数，需要用到生命周期，和options API差不多的，这里用到生命周期函数的话，必须严格按照格式进行，得是在setup中。

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('component is mounted.')
    })
  }
}

Improving TypeScript Support

对TypeScript的支持更加友好。即便是用户使用像Visual Studio code这样的IDE, TypeScript的定义也会受益。这就使代码更加的规范化，相对来说，开发后更容易维护，统一化代码的规范。

Improving Rendering Speeds

这个也就是将vue3更加智能化，知道需要渲染什么，页面更改后，怎么样在diff下更少计算等。

Improving Mounting and Patching

用了ES 6的新方法Proxy代替了ES 5的Object.defineProperty。都是数据劫持，方式不一样。

我们知道，Object.defineProperty有一些缺陷。我们如果是要监测一个对象，自然我们就有可能对这个对象“动手动脚”，但是Object.defineProperty不让啊，只能看管自己知道的属性，不能够监看新增的属性，同时也不能自己把不需要的属性给剔除。Proxy 劫持数据真正的对对象本身进行劫持，特色如下：