Vue3

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它

组件的数据传递 在封装组件时我们需要考虑到的一个问题是，如何对组件进行数据的传递。通常我们使用自定义属性 props 及自定义事件 emit。 定义一个输入框组件 在使用组件时，我们通过给组件添加属性

非 Prop 的 Attribute 当我们传递给一个组件某个属性，但是该属性并没有定义对应的 props 或者 emits 时，就称之为 非 Prop 的 Attribute 常见的包括 class

插槽 插槽的基本使用 例：在组件 child.vue 中，使用 slot 标签来占位 在组件 father.vue 中，使用 child 组件 此时 child 标签里的内容会替换 child 组件里

动态组件 场景：在同一个页面中需要动态的显示不同的组件 方式一：可以通过 v-if 来判断，然后渲染不同的组件。 方式二：使用动态组件。 方式三：使用路由的方式。 动态组件的基本使用 Vue 内部封装

组件的 v-model 表单的 v-model 在开发中使用表单时，我们通常会使用 v-model 来进行数据的双向绑定。

自定义指令 在 Vue 的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model 等等，除了使用这些指令之外，Vue 也允许我们来自定义自己的指令。 通常在某些情况下，你需要对

setup 函数 在 Vue 中我们就是在 setup 函数中使用 Composition API 来编写代码。 setup 其实就是组件的另外一个选项，只不过这个选项强大到我们可以用它来替代之前所编

Reactive ：将对象或数组变成响应式的数据 在 Vue3 中，默认情况下定义的数据都不是响应式的，所以需要我们手动的去将它们添加到响应式中，所以提供了 Reactive、Ref 等 API 如下

数据存储案例 在 /hooks/useLocalStorage.js 文件中： 定义响应式数据 data 的目的是取值后可以直接响应式的修改

h() 函数：创建 vnode 使用 render 函数来创建 dom 时会用到 h 函数，h 函数会返回一个 vnode render 函数实现计数器案例 setup 函数实现计数器案例

Vuex 是什么 Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态。 Vuex 的核心就是 store（仓库），store 就是一个容

什么是 Module？ 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store 对象就有可能变得相当臃肿，为了解决以上问题，Vuex 允许我们将 store 分割

真实 DOM 渲染 书写 HTML 代码，浏览器转解析成真实的 DOM 虚拟 DOM 的优势 操作 vnode 要比直接操作真实的元素节点更简单。 vdom 更方便实现跨平台。

渲染系统 该模块主要包含三个功能： 功能一：h 函数，用于返回一个 VNode 对象； 功能二：mount 函数，用于将 VNode 挂载到 DOM 上； 功能三：patch 函数，用于对两个 VNo

响应式系统 什么是响应式系统？如下代码： doubleCounter 函数跟 powerCounter 函数都对 info.counter 有依赖，这时如果我们改变 info.counter 的值，对

路由的 hash 模式 锚点定位 锚点的作用及用法 通过 a 标签的 href 属性能够跳转到 某个指定的页面 或者 当前页面的指定位置，使用 锚点 就能够 跳转到当前页面中指定的位置，也能够 跳转到

vue-router 是基于路由和组件的。 vue-router 的使用 vue-router 的基本使用 创建组件； 配置组件与路径的映射关系（定义路由）； 创建路由实例对象，将映射关系挂载到路由实