vue3基础知识 - 技术栈

网站

安装

Node.js

下载直接安装，自动包含 npm。

检查是否安装成功
node -v
node
nmp -v

名词解释：

vue

前端 JavaScript 框架简介 | Vue.js

Vue 的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

优势

渐进式框架： Vue 提供了逐步采用的能力，开发者可以根据项目需求选择性地使用其核心库、路由库（Vue Router）、状态管理库（Vuex）等组件，无需从一开始就引入复杂的体系结构。这种渐进式特性使得 Vue 可以轻松集成到现有项目中，或是从小型项目逐渐扩展到大型单页应用。
组件化开发： Vue 鼓励使用组件化的方式来组织代码，每个组件都是独立、可复用的视图单元，具有自己的视图模板、逻辑和样式。组件间通过 props 接口进行数据传递，通过事件进行通信，这种模式有利于提高代码复用性、降低复杂度，并促进团队协作。
高效的虚拟 DOM： Vue 采用了虚拟 DOM 技术，能够智能地计算出最小化的 DOM 更新操作，从而实现高效渲染和更新。当数据发生变化时，Vue 只会对实际需要更新的部分进行重新渲染，避免了不必要的 DOM 操作，提升了应用性能。
响应式系统： Vue 实现了一套响应式的数据绑定系统。通过 v-model、指令（如 v-bind、v-on）和计算属性等特性，Vue 能够自动追踪数据变化，并同步更新视图。这种声明式的数据绑定方式极大地简化了视图与数据之间的交互逻辑。
强大的生态系统：
- 插件与库：如 Axios（HTTP 请求库）、Vue-i18n（国际化）、Vue-Router（路由管理）、Vuex（状态管理）等，提供了开箱即用的解决方案。
- UI 组件库：如 Element UI、Vuetify、Quasar、Ant Design Vue 等，提供了一系列风格统一、功能完备的 UI 组件，加速界面开发。
- 开发工具：如 Vue DevTools 浏览器插件，提供了强大的调试和性能分析工具。
- 构建工具与服务：如 Vue CLI（命令行工具）、Vite（现代构建工具）、Netlify、Vercel 等，简化项目初始化、开发、部署流程。
灵活性与兼容性： Vue 可以与其他库或现有项目很好地集成，既可以作为小型库用于简单的交互，也可以驱动复杂的单页应用。Vue 对于老旧浏览器也有一定的兼容性支持，同时可以通过 Vue CLI 配置 Babel 和 Polyfill 以适应更多浏览器环境。

路由：

Vue 中的路由指的是对应用程序内部不同页面或视图之间的导航和管理机制。在 Vue.js 构建的单页应用（SPA, Single-Page Application）中，路由扮演着至关重要的角色，主要体现在以下几个方面：

URL 与视图映射 ：路由的核心功能是根据用户在浏览器中输入的 URL 或者点击页面上的链接时触发的 URL 变化，动态地呈现相应的视图（Vue 组件）。这意味着每个不同的 URL 路径（如 /home、/about、/products/:id 等）都对应着一个特定的 Vue 组件。当 URL 发生变化时，Vue Router 能够解析这个 URL，然后加载并渲染相应的组件，而无需整个页面进行重新加载。
组件切换 ：路由器负责在不同 Vue 组件之间进行无缝切换。这种切换通常是平滑的、无刷新的，提升了用户体验。通过定义路由规则，开发者可以指定哪些组件应该在哪个 URL 下显示，以及如何响应路由变化（例如使用 <router-view> 标签作为占位符，动态插入匹配到的组件）。
导航管理： Vue Router 提供了丰富的导航功能，包括但不限于：
- 编程式导航 ：通过 router.push()、router.replace()、router.go() 等方法，可以在代码中控制路由的跳转，实现页面间的逻辑导航。
- 路由守卫 （Route Guards）：允许在路由切换的生命周期钩子中添加验证逻辑，如权限检查、数据预取、保留滚动位置等操作。常见的守卫类型有 beforeEach、beforeRouteEnter、beforeRouteLeave 等。
- 动态路由与参数 ：支持在路径中使用动态 segments（如 :id），用于捕获 URL 中的特定部分作为参数传递给目标组件。组件可以通过 this.$route.params 访问这些参数。
- 嵌套路由：支持定义多层嵌套的路由结构，以模拟应用中的层级关系，如侧边栏导航、多级菜单等。嵌套路由对应的组件结构通常也具有嵌套关系。
路由状态与路由对象 ： Vue Router 创建了一个全局的 router 对象，它包含了当前路由的状态信息（如 router.currentRoute），以及各种导航方法和辅助工具。开发人员可以访问这个对象来获取当前激活的路由、查询参数、hash 等信息，也可以订阅路由变化事件以作出相应反应。
与 Vue.js 深度集成： Vue Router 作为官方推荐的路由解决方案，与 Vue.js 的核心库设计风格一致，易于集成和使用。它支持 Vue 的组件系统、依赖注入、过渡动画等特性，使得路由管理能够无缝融入 Vue 应用的整体开发流程中。

综上所述，Vue 里的路由是一种用于管理单页应用内部页面流转、视图切换以及与 URL 交互的机制，它通过 Vue Router 这个官方库实现，极大地简化了复杂前端应用的架构设计与开发工作。

DOM

Vue 主要通过虚拟 DOM（Virtual DOM）技术来实现高效、灵活的视图更新，这里的"DOM"指代的是 Document Object Model（文档对象模型）。DOM 是一种标准的编程接口，用于表示和操作 HTML、XML 或 SVG 文档。在 Vue.js 应用程序的上下文中，DOM 主要涉及以下几个方面：

HTML 页面结构： DOM 表示的是浏览器加载 HTML 页面后，在内存中构建起来的树状结构，这个结构反映了页面的元素、属性、文本节点等所有内容。每个节点在 DOM 中都是一个对象，可以通过 JavaScript 来访问和操作。
数据绑定与更新： Vue.js 使用声明式的数据绑定语法（如 v-bind、v-if、v-for 等指令）来关联数据与 DOM 元素。当 Vue.js 的响应式数据发生变化时，它会触发虚拟 DOM 的重新计算和对比，进而对实际 DOM 进行最小化更新，确保用户界面与数据状态保持一致。尽管开发者通常不直接操作 DOM，但这些更新最终会反映在真实的 DOM 结构上，影响用户可见的页面内容。
事件处理： Vue.js 提供了 v-on 指令（简写为 @）来处理 DOM 事件，如用户点击、表单提交、键盘输入等。当这些事件发生时，Vue 会在组件实例中调用相应的事件处理函数，开发者可以在这些函数中编写业务逻辑，对数据进行修改或触发其他操作。
组件化视图： 在 Vue.js 中，组件是构成用户界面的基本单元，每个组件都有自己的模板（template），即一段描述组件结构的 HTML 片段。当组件被渲染时，Vue 会将这些模板转换成实际的 DOM 元素插入到页面中。组件内部可以包含子组件，形成嵌套的 DOM 结构。通过操作组件状态或传递 props，可以间接地影响组件及其子组件对应的 DOM 内容。
与原生 DOM API 的交互： 尽管 Vue.js 鼓励通过数据驱动的方式来更新视图，但在某些特定场景下，开发者可能需要直接操作 DOM。Vue 提供了 ref 属性来获取对 DOM 元素或子组件实例的直接引用，从而能够使用原生 DOM API（如 querySelector、addEventListener、style 属性等）进行精细控制。不过，这种做法应谨慎使用，以免破坏 Vue 的响应式机制和组件化原则。

npm

npm（Node Package Manager）与 Node.js 一同安装，并用于管理项目中的依赖包。

1. 依赖管理： 包管理器，用于安装、更新、卸载和管理项目中使用的各种软件包。在 Vue.js 项目中，npm 用于安装 Vue.js 本身、Vue CLI（用于快速构建项目）、Vue Router（路由管理库）、Vuex（状态管理库）、以及其他第三方库（如 Axios 用于 HTTP 请求、Element UI 或 Vuetify 作为 UI 组件库等）。

2. 依赖版本控制： npm 允许在 package.json 文件中精确指定依赖包的版本范围，确保项目使用兼容的库版本，并通过 package-lock.json 或 yarn.lock 文件锁定安装的具体版本，保证项目在不同机器或环境下的一致性。

3. 自动化任务： npm 支持定义和执行脚本命令，如 npm run serve、npm run build 等，这些命令通常封装了诸如启动开发服务器、构建生产环境代码、运行测试等自动化任务，简化了开发流程。

4. 社区生态： npm 拥有庞大的开源软件包生态系统，开发者可以便捷地搜索、发现并引入他人开发的高质量模块，极大地丰富了 Vue.js 项目的功能，同时降低了重复造轮子的成本。

用法

创建新项目： 使用 Vue CLI 创建新项目时，npm 自动被用来安装所需的依赖包。例如：

vue create my-project

添加依赖： 在项目中需要引入新的库时，使用 npm install 命令：

npm install <library-name>

管理依赖： 更新所有依赖到最新版本：

npm update

移除不再需要的依赖：

npm uninstall <library-name>

复制代码

运行项目脚本： 执行 package.json中定义的脚本命令，如启动开发服务器：

npm run serve

编译生产环境代码：

npm run build

函数

转自：

一文教你学会vue3常用语法！-腾讯云开发者社区-腾讯云

1.生命周期

Vue3 的生命周期函数主要有 7 个：

1.setup：开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。

2.onBeforeMount：DOM 挂载之前。

3.onMounted：DOM 挂载之后。

4.onBeforeUpdate：组件更新之前。

5.onUpdated：组件更新之后。

6.onBeforeUnmount：组件卸载之前。

7.onUnmounted：组件卸载之后。

在实际开发中经常用到的就是 onMounted，比如进入列表页面获取列表数据。

2.setup函数

setup 函数是 vue3 中很重要的组件，相当于生命的起点。Vue3 中其他组件或者函数必须被包含在 setup 函数中。

而且定义的变量或者函数、必须要通过 return暴露出来，不然在 template 中没法使用。

从这里你也看出痛点了：如果定义的变量和函数太多，return 起来比较麻烦。

<script >
  setup () {
    const message = '我是知否君'
    const num = ref(10)
    
    return { num,message }
  }
</script>

所以 Vue3.2 之后做了改变：

只用在 script 标签中添加 setup，不用写 setup 函数，不用 return，我们也能在 template 中使用。

3.ref函数

ref 函数用来将简单数据类型定义为响应式数据。

注意：vue 中的响应式指的是你在 script 标签中修改了变量的值，template 中该变量的值会立即改变，对应的页面上变量的值也会立即改变。

修改值: 变量.value

// ref函数，将简单数据类型定义为响应式数据，修改值的时候，需要.value
let poet = ref("李白");
const changePoet = () => {
  poet.value = "杜甫";
};

4.toRef函数

toRef 函数可以将对象中某个属性定义为单独的响应式数据

let user = reactive({
  name: "张无忌",
  age: 12,
});

// toRef 函数可以将对象中某个属性定义为单独的响应式数据
const name = toRef(user, "name");
const changeName = () => {
  name.value = "赵敏";
};

5.toRefs 函数

toRefs函数用来将对象中所有属性变为响应式数据

let user = reactive({
  name: "张无忌",
  age: 12,
});
// toRefs函数用来将对象中所有属性变为响应式数据
const refUser = toRefs(user);
const changeRefAge = () => {
  refUser.age.value = 18;
};

6.reactive函数

reactive 是一个函数，它可以将复杂数据类型变成响应式数据。

// reactive是一个函数，它可以将复杂数据类型变成响应式数据。
let user = reactive({
  name: "知否君",
  age: 23,
});

7.computed

computed 用来定义计算属性。

// computed 计算
const newPoet = computed(() => {
  return poet.value + ",白居易";
});

8.watch

watch 函数是监听器，用来监听变量的变化。

// watch 监听
watch(user, () => {
  console.log("user改变了");
});
watch(
  () => user.age,
  () => {
    console.log("age改变了");
  }
);