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

相关文章
|
1天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
8 0
|
1天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
9 3
|
4天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
14 0
|
4天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
4天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
15 0
|
4天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
20 0
|
4天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
26 0
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
8 1
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
10 0
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
8 0