Vue自学笔记

结构工程分析 Vue3结构工程与Vue2相比，大部分未做出明显调整变化，部分做出调整 主要变化部分 main.js App.vue

快速上手 简介 2020年9月18日，Vue.js发布3.0版本 优势 1.性能提升 打包速度减少41% 初次渲染快55%，更新渲染快133% 内存减少54% …… 2.源码提升 使用Proxy代替d

# Vue UI组件库 ## 移动端 1. Vant [https://vant-contri

路由器的工作模式 分类： history模式、hash模式 区别 项目 history模式 hash模式 样式 地址中不带有#/ ，干净美观 地址中带有#/ ，不美观 兼容性 略差与hash模式 较好

独享路由守卫 独享路由守卫只有前置守卫，没有后置守卫 各类守卫间可配合交叉使用 作用： 某一个路由独享的对路由跳转、切换进行控制 实现： 其使用方式与全局前置路由守卫相似，只是其调用的API为befo

路由守卫 路由文件基础配置 作用： 通过跳转或取消的方式守卫导航，对路由进行权限控制 分类： 全局守卫、独享守卫、组件内守卫 全局守卫 前置守卫 作用时机： 初始化、每次路由切换前执行 实现： 初始鉴

缓存路由组件 作用：让当前不进行展示的组件保持挂载，不在切换时被销毁 设置：在需挂载的组件的父组件对其进行设置 需求：News 组件中新增输入功能，组件切换后输入内容不丢失 实现 在News 组件中新

router-link的replace属性 作用：控制路由跳转时操作浏览器历史记录的模式 写入方式（栈内操作） push ：追加历史记录，路由跳转时默认此模式 replace ：替换当前记录（栈顶记录

props配置 作用：让组件接收参数更方便 实现 在父（Message）组件中进行数据传递 Message组件 在index.js文件中需要接收参数的组件中进行配置 props值为对象，该对象中所有键

路由的params参数 使用to的字符串写法实现 配置路由信息，写好占位符声明params参数 index.js文件 传递参数 Message组件 数据渲染 Detail组件 使用to的对象方法实现

路由传参（query） 新建Detail组件用于展示内容 配置三级路由 传递query参数 使用to的字符串方法实现跳转 Message组件 使用to的对象方法实现跳转 Message组件 接收参数并

路由（多级）嵌套 多级路由在配置时使用children配置项 配置子路由时，路径项中不再添加/ router文件中的index.js文件 页面跳转时需配置完整路由路径 Home页面组件 新建Messa

路由 vue-router：一个Vue的插件库，专门用来实现SPA应用 SPA 单页Web应用（Single page web application，SPA） 整个应用只有一个完整页面（index.

Vuex的模块化编码 一般配合命名空间一起使用 目的：方便代码维护，让多种数据分类明确 修改store中的index.js文件 开启命名空间后，组件中读取数据 读取state中数据 自己直接读取 借助

方法生成 与mutations对话方法生成 程序员独立写方法 Count组件 借助mapMutations生成方法（数组写法） 当前组件中的方法名与mutations中的方法名同名时可使用该方法 Co

求和案例优化 映射数据 index.js文件 state中的数据 程序员独立写计算属性 借助mapState生成计算属性，从state中读取数据（对象写法） 借助mapState生成计算属性，从sta

getter配置项 适用条件： state中的数据需要经过处理后再使用时 数据有复用需求 数据处理逻辑较为复杂 使用： 在index.js文件中补充配置getters并暴露 在组件中读取数据

求和案例（Vuex版1.0） 将sum配置在index.js文件中的state中 在组件中绑定的方法中调用dispatch方法并传入参数 在index.js文件中actions中配置传入方法并调用co

VueX工作原理图 组成 store：仓库，负责管理Actions、Mutations和State，为他们提供需要调用的API Actions（对象）： Mutations（对象）： State（对象

Vuex 概念：专门在Vue中实现集中式状态（数据）管理的Vue插件，对Vue应用中多个组件的共享状态（数据）进行集中管理（读/写），也是组件间通信的一种方式，适用于任意组件间通信 适用情况 多个组件