Vue3的新特性

文章列表

Vue3的新特性

Vue3
为什么要使用 Vue3

1 . 更好的逻辑复用与代码组织 ( composition 组合式 api )

    Vue3 之前使用的是 optionsAPI(选项式API)
    Vue3 使用的是 compositionAPI（组合式API）
    优点 : 代码组织更方便了, 逻辑复用更方便了非常利于维护!!

2 . 更好的检测类型 ( 类型推导 Typescript 支持 )

类型推导 : 就是在没有明确指出类型的变量，TypeScript 编译器会自动推测变量的类型。
Vue3 源码用 TypeScript 写的 ( TypeScript 可以让代码更加稳定, 更好的检测类型! )

Vue3 新特性

1 . 数据响应式原理重新实现 ( ES6 的 proxy 替代了 ES5 的 Object.defineProperty)

解决了对象、数组更新后的检测, 大大优化了响应式监听的性能
原来检测对象属性的变化, 需要一个个对属性递归监听, proxy 可以直接对整个对象劫持

2 . 虚拟 DOM - 新算法 (更快更小)

3 . 提供了 composition api, 可以更好的逻辑复用

4 . template 模板可以有多个根元素

5 . 源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

小结： vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便
Composition API
options API

vue2 采用的就是 optionsAPI

优点 : 易于学习和使用, 每个代码有着明确的位置

例如 : 数据放 data 中, 方法放 methods 中

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

注意 : 虽然 optionsAPI 可以通过 mixins 提取相同的逻辑, 但是并不好维护
Composition API

vue3 新增的就是 compositionAPI

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

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

大大的提升了代码可读性和可维护性

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

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

setup 函数

composition 的使用, 需要配置一个 setup 函数

setup 函数特点

    setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
    从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行
    在 template 模版中需要使用的数据和函数，需要在 setup 返回

使用:

<script>
export default {setup () {console.log('setup执行了')console.log(this) // undefined// 定义数据和函数const msg = 'hi vue3'const say = () => {console.log(msg)}return { msg , say}},beforeCreate() {console.log('beforeCreate执行了')console.log(this)}
}
</script>

在 template 中使用：

<template><div><h1 @click="say()">{{msg}}</h1></div>
</template>

注意： setup 中不能使用 this, this 指向 undefined

Vue3的新特性

使用:

相关问题

公告