Vue3快速上手简介

news/2024/7/24 6:30:51 标签: 前端, vue.js, vue3, Composition API, TypeScript

在这里插入图片描述

文章目录

  • Vue3快速上手简介
    • 1.Vue3简介
    • 2.Vue3带来了什么
      • 1.性能的提升
      • 2.源码的升级
      • 3.拥抱TypeScript
      • 4.新的特性

Vue3快速上手简介

1.Vue3简介

  • 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)
  • 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
  • github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0

2.Vue3带来了什么

1.性能的提升

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式

  • 重写虚拟DOM的实现和Tree-Shaking

TypeScript_29">3.拥抱TypeScript

4.新的特性

  1. Composition API(组合API)

    • setup配置
    • ref与reactive
    • watch与watchEffect
    • provide与inject
  2. 新的内置组件

    • Fragment
    • Teleport
    • Suspense
  3. 其他改变

    • 新的生命周期钩子
    • data 选项应始终被声明为一个函数
    • 移除keyCode支持作为 v-on 的修饰符

http://www.niftyadmin.cn/n/898099.html

相关文章

vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建

文章目录一、vue2、vue3、vue-cli版本、vue-router版本的关联关系1.说明2.不同版本的vue对应的vue-router版本和vuex版本二、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建一、vue2、vue3、vue-cli版本、vue-router版本的关联关系 1.说明 1. Vue CLI 4.5以下&#xff0…

《vue3第二章》常用组合式 Composition API,包括setup、ref函数、reactive函数、vue3.0中的响应式原理、计算属性与监听属性

文章目录二、常用 Composition API1.拉开序幕的setup2.ref函数3.reactive函数4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式5.reactive对比ref6.setup的两个注意点7.计算属性与监视属性1.computed函数案例:拼姓名字符串,同vue2计算属性案例类似完…

vue3知识点:setup

文章目录二、常用 Composition API1.拉开序幕的setupsetup的两个注意点本人其他相关文章链接二、常用 Composition API 问题:啥叫“组合式API”? 答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 1.拉…

vue3知识点:ref函数

文章目录二、常用 Composition API2.ref函数本人其他相关文章链接二、常用 Composition API 问题:啥叫“组合式API”? 答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 2.ref函数 作用: 定义一个响应…

vue3知识点:reactive函数

文章目录二、常用 Composition API3.reactive函数本人其他相关文章链接二、常用 Composition API 问题:啥叫“组合式API”? 答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 3.reactive函数 作用: 定…

vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式

文章目录二、常用 Composition API4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式本人其他相关文章链接二、常用 Composition API 问题:啥叫“组合式API”? 答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introd…

vue3知识点:reactive对比ref

文章目录二、常用 Composition API5.reactive对比ref本人其他相关文章链接二、常用 Composition API 问题:啥叫“组合式API”? 答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 5.reactive对比ref 从…

vue3知识点:计算属性与监视属性

文章目录二、常用 Composition API7.计算属性与监视属性1.computed函数案例:拼姓名字符串,同vue2计算属性案例类似完整代码2.watch函数案例:计算求和完整代码3.watchEffect函数本人其他相关文章链接二、常用 Composition API 问题&#xff1a…