Fanbin168的专栏

【代码】Vite Vue3+Element Plus框架布局。

NPM# Yarn# pnpm插件插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）使用此插件后，不需要手动编写这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。是由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。

Vue项目：List组件的引入。则需要我们手动添加组件导入。

Vue 3 项目，安装最新版。

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。Pinia 大小只有 1kb 左右，超轻量级，你甚至可能忘记它的存在！

案列。

Vuex数据默认是存储在内存中的，当然我们也可以将它存储在Local Storage，也可以指定某些数据存储在Local Storage 这样我们就用到了Vuex持久化插件vuex-persistedstate。安装vuex-persistedstate插件。

【代码】ES6的模块化导入导出。

计算属性:计算属性与方法函数的区别就是计算属性存在缓存，只要函数内变量变化, 会自动重新计算结果返回，不变化则从缓存中直接取值返回。

在 Vue 组件中，需要通过配置 props 属性来定义组件的 props。在组件中添加 props 属性之后，就可以使用 props 选项接收从父组件传递的数据。Props可以是数组形式进行滴定仪，在这里Props定义了一个数组，其中每个元素都是一个字符串类型的Prop名，表示父组件可以向子组件传递的数据项。

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

【代码】Vue3.0 声明式导航，编程式导航，路由，路由拦截案例。

Getters 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。Getters 用于对 Store 中的数据进行加工处理形成新的数据。Store 中数据发生变化，Getters 的数据也会跟着变化。/src/store/index.js状态管理器。main.js 注册状态状态管理器。

VCA中不支持辅助函数，因为辅助函数中是用this.$store，而VCA中没有绑定this的由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。这句话的意思是，如果把所有的状态都放在/src/store/index.js中，当项目变得越来越大的时候，Vuex会变得越来越难以维护分成模块化后，每个人负责自己的那个模块开发，然后在/src/store.index.js中将这些模块进行汇总，这样可以避免多人开发的协调问题。

这句话的意思是，如果把所有的状态都放在/src/store/index.js中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

Vuex中提供了四个个比较常用的辅助函数：目的是将vuex中对应的 state(),mutaiions{},actions{},getters{}中的数据，函数映射出去，让我们在组件中可以更加简单的使用这些数据与函数mapStatemapActionsmapGetters。

vuex的mutations与actions有什么区别，除了用法上mutation是同步，actions是异步，这里的同步与异步指的是commitordispatch?并不是，同步指mutations方的内部是同步的，而actions内部可以是异步的，并且修改数据只能在mutations中修改，在actions中异步的操作副作用是通过mutations来记录。

Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说，组件直接需要通信，我们传统的用(provide,inject),(props,$emit),（发布订阅）来做但是如果项目小的话也挺不错的，但是如果涉及的项目太大，成百上千的组件通信需要维护，这样就可以引入Vuex进行状态的集中管理。

【代码】Vue3.0路由拦截。

更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。性能 (减少语言服务器从代码中抽离类型的工作)。是在单文件组件(SFC)中使用。声明 props 和抛出事件。

provide 与 inject 是一种跨层级组件（祖孙）通信方式。当组件多层嵌套时，不需要将数据一层一层的向下传递，通过它俩可以实现跨层级组件通信。

1。

【代码】Vue3.0 watch和watchEffect监听器：VCA。

语法： const name = toRef(person, 'name')扩展： toRefs与toRef功能一致，但可以批量创建多个ref对象，作用： 创建一个ref对象，其value值指向另一个对象中的某个属性。应用： 要将响应式对象中的某个属性单独供应给外部使用时。语法：toRefs(person)

Vue3 最大的一个变动应该就是推出了 CompositionAPI，可以说它受ReactHook 启发而来；它我们编写逻辑更灵活，便于提取公共逻辑，代码的复用率得到了提高，也不用再使用 mixin 担心命名冲突的问题。

vue官方提供很多指令，如：v-model，v-show，v-if，v-if等，他们都以v-开头。当这些指令不能满足我们实际开发需求时，我们还可以自定义指令。自定义指令主要分为全局自定义指令和局部自定义指令。在main.js中写全局自定义指令。

子组件AChild.vue。父组件App.vue。

每个Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

1。

在传统的 Vue.js 开发中，组件是在应用程序启动时就立即加载的。这种方式虽然简单，但是会导致应用程序的初始加载时间变长，影响用户体验。为了提高应用程序的性能和加载速度，Vue.js 提供了异步组件。异步组件是一种延迟加载组件的方式，即只有在需要使用该组件时才会进行加载。比如：下面案例中，Home，List，Center是一个需要动态显示的组件，我们在注册这三个组件的时候将他们三个注册为异步组件，当页面第一次加载的时候，就只加载了一个Home组件，其它2个组件则在需要的时候才会加载。

W3C新标准出来后，给了我们一个新的通道Fetch，Fetch取代了XMLHttpRequest，它是集成在浏览器标准里面的，所以它就是嫡系，它虽然是嫡系，但是它的兼容性不是很好，也没有第三方库：axios好用，所以用它比较少。XMLHttpRequest是一个设计粗糙的API,配置和调用方式非常混乱，而且基于事件的异步模型，写起来不友好，容易掉入回调地狱中。引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。库，主要抚平不同浏览器之间对js实现的差异。), 不同浏览器，不同版本，有些支持，有些不支持。

【代码】Vue3.0 watch。

Edge可以直接安装插件，谷歌浏览器可以科学上网安装插件，安装完毕后打开是vue编写的页面就按F12然后找到 》然后点开Vue 就可以针对页面的Vue变量进行调试查看。（如果是vue编写的页面，Vue插件图标会亮，不是则不亮的）为方便Vue调试，F12看对象和变量信息，请先安装Edge浏览器，和谷歌浏览器的调试插件。然后在顶层找到 生态系统->工具链指南->浏览器开发着插件。在里面下载安装插件：Vue.js devtools。点开Vue后就会看到如下界面。

Vue为v-on提供了事件修饰符。

【代码】Vue3.0 项目结构及组件。

这句话解释过来就是一些不被prop定义的属性直接添加到子组件上的时候，子组件是可以获取到的，只不过获取的方式是通过方法获取的，下面我们展开说一下。透传是vue中一种特性，官方的解释是：“透传 attribute”指的是传递给一个组件，却没有被该组件声明为。1、透传的属性只会直接传给单根节点的组件，如果子组件不是一个根节点，那么透传属性会直接失效，并且警告。透传过去的属性如果和子组件上的命名重复了，会以子组件本身的属性为主（id）查看F12元素可以体现。查看F12元素可以体现。查看F12元素可以体现。

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解，另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。子组件：用props 数组来接收参数。

父组件传值子组件用Props子组件传值父组件用$emit父组件直接还可以直接取子组件的值用$refs。

使用 provide/inject ，只需要向后代注入组件本身（this），后代组件中可以无视层级任意访问祖先组件中的状态。当然它也有缺点：因为 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。

发布订阅模式其实与vue无关，完全是ES6的代码，但是它可以通过这种模式实现非父子组件的通信。