Vue基本知识

前言

本文讲述vue的一些进阶操作

一 CLI

1.1 概述

目前，vue官方提供两个版本的cli脚手架工具，一个是@vue/cli，另外一个是Create vue，两者目前均为可用状态。

1.2 区别

  • @vue/cli

    Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

    vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。

  • create vue

    使用vite构建工程，打包使用rollup，官方最新文档已经看不到 vue-cli 的身影了，只有 create-vue 的使用方式，所以大家可以放心食用。

总之我们更加推荐使用基于vite的 create vue 构建工程目录。

二 vue核心技术

2.1 响应式

首先要有一个基础认知，前端页面是基于数据的，是数据改变页面，而不是页面改变数据，永远都应该是数据驱动页面，这便是vue的理念引发之一，基于此理念，vue通过为数据设定get和set方法，实现对数据的双向绑定，即数据改变引起界面改变，界面可以更新数据。

此处不应该和数据驱动页面的理念混淆，驱动页面的数据来自于后端，而由界面引发的数据改变在提交到服务器之前，都是储存在客户端本地的。

当然，使用这种方法必然会有一定弊端，例如性能开销大，无法手动控制时机等。

2.2 模板语法

vue根据模板构建对应对应的渲染函数，其过程为：

  1. 解析模板： 首先，Vue 会将模板解析成 AST（抽象语法树）。AST 是一种树形结构，它反映了模板中的各种语法结构，比如标签、属性、文本等。

  2. 优化 AST： 接着，Vue 会对 AST 进行优化，以提高渲染性能。优化的方式包括静态节点提升、标记和移除静态节点、标记和缓存静态根节点等。

  3. 生成渲染函数： 最后，Vue 会根据优化后的 AST 生成渲染函数。渲染函数是一个函数，它接受数据作为参数，并返回一个 VNode（虚拟节点）树。

    VNode 是一个轻量级的 JavaScript 对象，它描述了一个 DOM 节点的各种属性，比如标签名、属性、子节点等。

2.3 渲染

vue通过解析模板后，生成渲染函数，之后便是渲染过程，首先vue会解析模板，处理模板中的各种关系，例如组件的导入、引用，生成更加完整的dom结构，此时dom仍然不是真正的html代码，Vue会用纯JavaScript来描述上述结构，它记录了模板中各个dom之间的关系，以及各个标签的属性等内容，如果有数据绑定，它还会描述模板与数据的绑定关系。接下来只需要调用原生的DOM方法依次创建这里的每一个节点，然后将它们挂载成一棵DOM子树，并插入页面，就可以得到真正的HTML。我们一般把这个树状JavaScript对象称为虚拟DOM树。

通过模板可以得到真实HTML的JavaScript对象表示，然后调用原生的DOM方法，借助这个JavaScript对象去生成真实的HTML。不仅如此，在这个过程中，Vue还注入了响应式系统，可以根据数据变化自动更新视图，以及根据视图自动更新数据，

三 vue部分组件

3.1 状态管理

3.1.1 什么是状态管理

状态：在Vue中，状态是指：驱动整个应用的数据源。

对于VUE，状态用于描述各个页面或者，状态管理是为了解决一下问题：

  • 多个视图依赖于同一状态。

  • 来自不同视图的行为需要变更同一状态。

img

3.1.1 VueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.

3.1.2 Pinia

3.1.1.1 简介

Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起，我们就倾向于同时支持 Vue 2 和 Vue 3，并且不强制要求开发者使用组合式 API.

3.1.1.2特性

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：

  • Devtools 支持

    • 追踪 actions、mutations 的时间线
    • 在组件中展示它们所用到的 Store
    • 让调试更容易的 Time travel

  • 热更新

    • 不必重载页面即可修改 Store
    • 开发时可保持当前的 State

  • 插件：可通过插件扩展 Pinia 功能

  • 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。

  • 支持服务端渲染

3.2 路由（router）

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射

  • 动态路由选择

  • 模块化、基于组件的路由配置

  • 路由参数、查询、通配符

  • 展示由 Vue.js 的过渡系统提供的过渡效果

  • 细致的导航控制

  • 自动激活 CSS 类的链接

  • HTML5 history 模式或 hash 模式

  • 可定制的滚动行为

  • URL 的正确编码