Vue3详细讲解

Vue 3 介绍

文章目录

• Vue 3 介绍
• • 为什么要学习 vue 3
  • Vue3 动机 和 新特性
• Vite 的使用
• • vite介绍
  • 为什么选 Vite ？
  • Vite 的基本使用
  • Vue3.0项目介绍
  • vscode插件说明
• 组合式API
• • composition API vs options API
  • 体验 composition API
  • setup 函数
  • reactive 函数
  • ref 函数
  • script setup语法(★)
  • 计算属性computed函数
  • 侦听器watch函数
  • 钩子函数的使用
  • 组件通讯-父传子
  • 组件通讯-子传父
  • 依赖注入 - provide 和 inject
  • 模板中 ref 的使用
  • vue3中废弃了过滤器
  • 补充-toRefs 函数
• vue-router4
• • 基本使用
  • 组件中使用route与router
• vuex4
• • 基本使用
  • 在组件中使用vuex

为什么要学习 vue 3

为什么要学vue3:

1. Vue是国内最火的前端框架
2. Vue 3 于 2022 年 2 月 7 日星期一成为新的默认版本!
   • 原文链接：https://blog.vuejs.org/posts/vue-3-as-the-new-default.html
   • 中文链接：https://zhuanlan.zhihu.com/p/460055155
3. Vue3性能更高，体积更小
4. Vue3.0在经过一年的迭代后，越来越好用

官方文档：

• vue3官方文档：https://vuejs.org/
• vue3中文文档：https://v3.cn.vuejs.org/

目前已支持 vue3 的UI组件库:

• element-plus

  https://element-plus.gitee.io/#/zh-CN (PC组件库)

  Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

• vant

  https://vant-contrib.gitee.io/vant/v3/#/zh-CN

  轻量、可靠的移动端 Vue 组件库。

  Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。

  目前 Vant 已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本

• ant-design-vue (PC组件库)

  https://antdv.com/docs/vue/introduce-cn/

  ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步

Vue3 动机 和 新特性

Vue3 设计理念 https://vue3js.cn/vue-composition/

动机与目的:

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

   optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!

2. 更好的类型推导 (typescript支持)

   vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )

vue3新特性：

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

   解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能

   (原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

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

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

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

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

   …

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

Vite 的使用

webpack => 实时打包(服务器) => 浏览器运行

vite => 直接编译输出 => 将一部分模块化依赖加载解析的功能 交给了浏览器

vite介绍

Vite 官方文档：https://cn.vitejs.dev/

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”)是一种新型前端构建工具

优势