Vue基础+实战

1.背景需求 现在有个需求需要当省份和城市都选择的时候，显示对应的人员信息。实际开发中我们会发现父子组件同时定义watchEffect的执行顺序问题

1.背景 Situation 由于公司业务系统通过谷歌地图，标记自己在全求有售卖自己货品的门店，有两种不同的类型门店，当地图缩小的时候自动汇总显示。 当缩小的时候显示就近汇总，并且不同门店区分颜色 当

vue3复习-介绍 web发展 mvvm 系统vue2迁移到vue3 自动化工具升级Vue3 Vue3 - 7个新特点

1.概念 jsx 起源于react，其实就是在js中能够直接编写html标签。最终还是会被渲染生成虚拟dom， 浏览器默认是不支持直接解析，需要借助插件才能实现jsx的解析。 一般需要安装@vue/b

1.全局的钩子函数 1.1beforeEach(to，from，next) 路由改变前调用   常用验证用户权限 1.2beforeResolve(to，from，next) 1.3afterEach

1. 路由懒加载 2. keep-live 缓存组件 3. 列表添加key 确保唯一性，提高diff算法比较时间 4. 列表绑定事件使用事件代理(v-for) 5. v-if 和 v-for不同时使用

1. 渐进式JS框架  Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层 declarative rendering 声明式模板与渲染 （使用template声明式模板语法和基于配置

1. 定义 1.1全局定义 源码分析 src/core/global-api/assets.js src/core/global-api/extend.js 1.2单文件定义 单个文件配置，会被vue

1.定制配置 vue.config.js 基础配置：指定应⽤上下⽂、端⼝号 配置webpack： configureWebpack 范例：设置⼀个组件存放路径的别名 chainWebpack webp

1.环境搭建typesript 1.环境搭建typesript1.环境搭建typesript1.环境搭建typesript

1.概念 1.传统方式： 优点：响应快，seo很好 缺点：网络资源浪费，每次都重新加载资源和解析 2.传统spa方式： 优点：开发方便，容易维护，渲染计算都在客户端，省流量 缺点：不利于seo搜索，首

1.实现逻辑 创建工具类create.js,利用Vue实例化,把.vue文件为dom对象 挂在dom到body上 组件销毁时候，在body上调用removeChild移除dom对象 定义Notice.

1.原理 通过定义组件name,如：name:Node ，在template里面直接引用自身 <Node></Node> 2.代码实现 3.树形菜单实现

1.通过递归遍历方式进行 on() 注册 与 .emit()执行1.通过递归遍历方式进行 on() 注册 与 .emit()执行

子CSS 一旦设置scoped ， 父想访问子一定要设置scoped，否则无效。 而且父需要使用 /deep/ 或者 ::v-deep 访问子 则

1.定义 组件化系统提供一种抽象，独立可复用并构建复制大型应用系统，所有应用都可以抽象成一个抽象树。 优点：提高开发效率，可重复使用，易维护调试，便于多人协同。 2.通信方式 2.1父子/子父传值 2

1.定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 state，驱动应用的数据源； v

1.安装 ​ vue add router 1.1标签方式 1.2 动态路由匹配 1.3嵌套路由 1.4 2.路由守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种

1.Vue Cli 1.1安装 npm install -g @vue/cli-service-global 1.2启动单个服务 vue serve Hello.vue 1.3创建项目 vue cre

1.mixi混入 1.1定义 混入提供了一个非常灵活的方式，来分发vue组件中可复用的功能。可以混如组件任意选项。 混入时，会把对应定义所有选项混入对应的新对象实例里。 注意： 定义的是一个对象 如果