Vue整理
1、谈谈MVVM的理解
- MVC(react)：数据流是单向的，View和Model之间通过controller连接通信，
- 用户操作会请求服务器，路由拦截分发请求，调用对应的控制器controller，控制器会获取数据，然后数据和模版结合，将结果返回给前端，页面重新渲染。
- MVVM(Vue)：数据流是双向的，View和Model是完全隔离，用户不需要手动操着dom元素，将数据绑定到viewmodel上，会自动将数据渲染到页面，视图发生变化会通知viewmodel层更新数据，viewmodel是MVVM的桥梁。
- MVVM避免了频繁操作dome，降低性能消耗
为什么Vue组件中的Data必须是一个函数：
- 由于数据是对象，都指向同一个data，当一个组件中修改data时，其他复用组件中的data也改变。
- 因此使用函数返回对象，这个对象是新对象，挂载在对应的组件实例上，不会相互干扰。
2、响应原理
- vue2 - Object.defineprope rty
- 实例初始化时遍历data里的对象所有的property
- 使用defineProperty把这些property全部转成getter/setter，
- 访问对象的属性时getter函数触发，并通过depend()收集依赖，
- 修改属性的值时setter函数触发并通过notify()通知watcher。
- 每个组件实例都对应一个watcher实例，它会在组件渲染的过程把接触过的数据property记录为依赖，之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染
- vue无法检测property的动态添加和移除，因此初始化后仍需添加响应式property，应使用set() 或者 vue.delete()
- 没有对删除、新增的数据进行 defineProperty 劫持，
- 模拟proxy， 需要通过 set 、get 递归劫持
- 特点
- 无法检测数组元素的新增和删除，需要对数组方法进行重写，无法检测数据长度的修改
- 无法检测到对象属性的添加或删除
- 必须遍历对象的每个属性，为每个属性都进行get/set拦截
- 必须遍历深层嵌套的对象属性
- vue3 - proxy(代理)
- vue3中使用ref、reactive来创建响应数据，ref是reflmpl类的实例，在reflmpl类的get中收集依赖，在set出发依赖。而reactive则通过Proxy实现，用reactive创建数据后返回一个proxy代理对象，之后便可以在该代理对象上进行操作，Proxy在代理对象前架设类一层拦截器来控制对象的访问。相比defineProperty只提供对象属性的getter和setter拦截操作，ES6提供了13中拦截操作。
- ref一般用来包裹基本数据类型，reactive用来包裹引用数据类型，如果用ref包裹引用数据类型，vue还是会将该引用数据先用reactive处理后再由ref处理，而如果用reactive包裹基本数据类型会直接保存，另外reactive默认深层监听。
- computed 的处理方式和ref基本一致，computed里的参数为函数时，默认为getter函数，且返回一个不可变的响应式ref对象，而参数为一个具有get、set函数的对象时，可用来创建可写的ref对象
- 特点
- 不需要对数组的方法进行重载(解决vue2的问题)
- 可以检测到对象属性的添加和删除，Proxy支持13种操作
- 针对整个对象，而不是对象的某个属性(浅层，仍需递归)
- 仍需要将嵌套对象属性进行遍历为响应式
- 响应式处理发生在生命周期beforeCreate和created之间
- 实例初始化时遍历data里的对象所有的property
2.2、Vue3的性能优化
- 响应式系统的提升
- proxy 比 definepoperty 性能更好，直接拦截整个对象，而不需要递归遍历对象
- composition api 与 options api
- options api：
- 包含一个描述组件选项(data、methods、 props)的对象options
- 开发复杂组件，同个功能逻辑拆分到不同选项中
- 使用mixin 重用代码，命名冲突，数据源不清晰
- composition api:
- 基于函数的api，可以更加灵活的集中组件的逻辑
- 解决大型项目中拆分和重用的问题
- 更利于封装复用代码，解决mixin的重名冲突和数据源不清晰的问题
- 编译优化
- 标记和提升所有的静态节点，diff只需要比对动态节点
- 可以多个根节点
- 静态提升 hoistStatic
- patch flag 打标动态的元素，追踪其属性的修改，不需要逐个逐层遍历，提到虚拟dom diff的性能
- 缓存时间处理函数cacheHandler
- options api：
3、异步更新
只要侦听到数据变化，Vue就会开始一个队列，并缓存在同一个事件循环中发生的所有数据变更。
在缓存时，去除重复的数据，避免不必要的计算和DOM操作是非常重要的。
如果同一个watcher被多次触发，只会被推入到队列中一次，然后在下一个的事件循环中vue刷新队列并执行
4、Vue生命周期流程
- 每个Vue组件实例被创建后都会经过一系列的初始化步骤。如数据观测、模版编译、实例挂载到DOM以及数据变化时同步更新DOM视图，这个过程就叫着生命周期。
- 分为：创建前后、挂载前后、更新前后、销毁前后
- 创建vue根实例：vue2：new Vue() vue3: Vue.createApp()；初始化events和生命周期：vue2: events包括 $on \ $emit \ $listener \ $off
- beforeCreate
- 初始化注入和响应式
- vue2: provide \ inject \ props \ data \ computed \ watch \ methods
- vue3: ref \ reactive
- created 第一次可以使用data \ methods 数据
- 判断有没有el选项作为挂在点，没有就使用$mount指定的元素作为挂载点
- beforemount data已经初始化了，此时的$refs还是个空的、vnode挂载前的
- 调用render函数，生成虚拟dom，之前的挂载点el元素将被新生成的$el代替掉，$refs就在这一步被解析出来
- mounted 第一次可以操作dom , 获取$refs模版引用
- 响应式数据发生变化触发beforeUpdate
- beforeUpdate 可以拿到更新前的dom/数据，可以在这里继续对数据修改，需知异步更新过程
- 重新触发render函数生成新的vnode，与老的vnode进行diff算法比较，且更新到真实dom上
- update
- 组件卸载或离开页面触发beforeUnmount
- beforeUnmount 实例功能完全正常，应当在卸载前移除手动添加的监听器，如clearTimeout
- 卸载完成， data \ methods 都不能访问了
- unMounted
5、Vue3生命周期的特点
- 所有的生命周期在setup里面都是用onX导入后使用(因为支持webpack5的tree-shaking)
- beforeDestroy 改名为 beforeUnmount， destroyed 改名为 unmounted
- 没有beforeCreate和created，因为setup就是初始化过程
- setup是先执行，此时组件实例在setup内部已经创建，没必要在setup中使用beforeCreate和created
- nextTick在dom挂载完成或dom更新完成后立即调用
6、虚拟dom、key、diff算法
- 虚拟dom(vnode) 发生在 beforeMount 中，keep-alive将组件保存在内存中，防止重新渲染dom
- 将真实的dom节点用js对象的形式表示，当节点改变时，不是直接修改真实dom，而是创建一个新的vnode与旧的vnode进行diff算法比较后，将比较的结果映射到真实dom上，从而提高更新效率。
- 对于页面首次加载，vnode生成过程时：
- 模版语法template - 》 抽象语法树/ast树 -》 render函数 -》 虚拟dom。
- render函数执行的结果是vnode，这一步发生在beforeMount和mounted之间。
- 而在运行阶段，若响应式数据发生变化，会重新触发render函数生成新的vnode，与老的vnode进行diff算法比较，并更新到真实的dom上。
- 好处；计算变更，去重操作、减少不必要的dom操作
- 坏处：页面首次加载是由于需要生成新的vnode，因此会增加渲染时间，无法保留临时状态，如input框输入
- key
- 作用：给每个节点做一个标识符，当数据变动时，会生成新的vnode，diff计算比较新老vnode的身份标识
- 使用：非template标签支持key，且当v-for一起使用时，v-for、key都要写在标签上，vue会自动为v-if提供key
- diff算法：数据改变 -》 触发render函数 -》生成vnode -》通过映射操作真实dom -》视图更新
- patch：复用后者更新，条件是类型和值，两者全部相同这复用，类型相同，值不同则更新
- vue在更新节点首先会比较新旧节点数组的长度，遍历长度短的那个数组，接下来就是分成两种情况：
- 没有key：使用的是就地更新策略，新旧vnode进行patch，如果两者类型不同，即不可复用，于是删掉旧的vnode并将新的vnode映射到真实dom上，如果两者类型相同，但值不同，就复用旧的vnode并更新旧vnode的新值后映射到真实dom上
- 有key：先从短的数组头部遍历，判断旧的vnode的类型和key是否相同，如果是则patch上，不是的话就跳出循环，然后从尾部遍历，同样进行新旧vnode的类型和值判断，直到遇到遇到patch上的才跳出循环
- 如果旧vnode全patch上并且有新vnode未patch的话，则根据新的vnode创建新节点
- 如果新vnode的全patch上并且还有旧vnode未patch的话，则删除旧节点
- 如果新旧vnode都没完全patch上，则将新vnode存在map里，以新的vnode的key作为map的键，然后与旧vnode进行映射对比，key能映射上就patch成功，到最后剩余的旧节点卸载掉，新节点创建出来。
- vue在更新节点首先会比较新旧节点数组的长度，遍历长度短的那个数组，接下来就是分成两种情况：
- patch：复用后者更新，条件是类型和值，两者全部相同这复用，类型相同，值不同则更新
7、vue3新增
- Proxy替代defineProperty实现引用数据的响应式
- defineProperty针对对象的某个属性，而Proxy针对整个对象，可以检测到对象属性的添加和删除，且Proxy不需要对数组的方法进行重载、省去很多hack
- Composition API / setup
- 代码逻辑集中、不像vue2那样分散，适合抽离、分装、复用
- 支持tree- shaking
- vue2中定义在vue实例上的API无论有没有使用都会打包进chunk，造成文件体积臃肿。vue3支持webpack的tree-shaking，所有API都需要导入后使用，未导入和导入未使用都会在打包时去除掉，从而减少打包后的体积，减少js加载时间，提高页面渲染速度。
- 对typescript更好的支持
- 生命周期不同。
- 响应式数据定义不同
- 可以使用多个节点，增加Fragment节点
- 支持多个根节点，多个根节点时，vue3会创建一个Fragment对其包裹
- Temoeleport
8、移除vue2
- vue3移除了 .sync, 用 v-model: 代替
- vue3移除了 .native 修饰符
- vue3移除了 $listeners，事件监听器移到了$attrs上
- vue3移除了 $children
- vue3移除了 $on、$once、$off，因此eventBus不可使用了
- vue3移除了 $scopedSlots， 作用域插槽数据已到了$slots里
9、setup 核心
- vue3可以使用data \ methods，不过当setup和data同时存在时，会取值setup，setup必须有return 返回一个对象。
- setup有两个参数props和context
- props是接受父组件传递的参数，是个对象，具有响应式，同步更新父组件的值，因此不能解构取值
- const { test } = toRefs(props)
- context是该组件实例上相应值的代理，可以赋值解构 setup(props, { attrs,emit,slots }) { }
- attrs：是取父组件传值但props没声明接受的值，是个对象
- emit：调用父组件的方法，emits来接受：emits: ['say']
- slots: 插槽功能, v-slot:name
- props是接受父组件传递的参数，是个对象，具有响应式，同步更新父组件的值，因此不能解构取值
10、watch 与 watchEffect
- watch
- 有惰性：运行时不会立即执行
- 更加具体：需要添加监听的属性
- 可以访问旧值：回调的时候返回新旧值
- 可配置
- immediate：是否立即执行
- deep：是否深度监听，消耗性能，优化：字符串形式监听 'obj.a'
- 简单数据类型，直接监听变量
- 引用数据类型，
- 监听整个对象，使用变量名
- 监听对象属性，使用函数return，() => obj.name
- watchEffect
- 非惰性：一旦运行立即执行
- 更加抽象：使用时不需要监听特定的值，有变动回调函数内直接运行业务逻辑
- 不可访问旧值
- 一般使用watch，避免watchEffect重复触发执行
11、vue2和vue3的重要API
- vue2
- data
- vue在初始化时会为data中的所有数据绑定setter、getter函数，即响应式处理
- vue中的$和_开头都是有特殊使用意义，因此data中的变量名不能使用这两个开头
- computed
- 依赖其他属性计算值，并缓存结果，当所依赖的数据变化时才会重新计算结果，否则直接返回上一次缓存的计算结果
- 默认getter函数，也可以写成set、get两个函数形式
-
computed { a:function() {return x;} b: { get: function() {}, set: function() {return y;} } } watch 监听数据项变化 watch: { a: () => {}, //不需要this b: function(newVal, oldVal) {}, //函数写法 c: 'someMethod'，// methods选项里定义方法 d: { handler: function(newVal, oldVal) {}, deep: true, immediate: true }, e: [ // 监听e的改变，并执行多个回调函数 'handle1', function handle2 (newVal, oldVal) {}, { handler: function handle3 (newVal, oldVal) {} } ], 'e.f': function(newVal, oldVal) {} //只监听对象里某个属性 } // 也可以通过API调用 var stop = this.$watch('a'. callback); stop(); // 取消监听
- data
- methods
- computed、watch、methods都不可以用箭头函数定义，否则无法把this绑定到vue实例上
- vue2会遍历methods里面所有方法，调用bind把他们的this帮到实例上，因此不要用箭头函数
- computed 和 methods 区别：多次调用computed，如果所依赖的数据没有发生改变，则自己读取上一次缓存的计算结果，而methods多次调用多次执行。
- computed 和 watch 区别：computed只能同步，可缓存，而watch是异步的
- vue3
- 支持tree-shaking，因此现在所有的API都需要导入后再使用
- ref
- 常用： ref() isRef() unRef() toRef() toRefs()
- toRef是将解构后仍就有响应式，toRefs是批量将解构后仍就有响应
- toRef和toRefs是将对象的属性提供给外部使用
- ref的本质也是reactive，ref处理引用数据类型，vue会reactive处理，然后返回给ref; ref(obj) ～ reactive({value: obj})
-
setup(props, context) { const person = { name: 'zhangsan', age: 18 } return { person, // template中使用person.name name: toRef(person.name), // template直接使用属性name，保持响应式 ...toRefs(person), // 批量解构后template直接使用person第一层的属性，保持响应式 } }
- ref
- 支持tree-shaking，因此现在所有的API都需要导入后再使用
- reactive
- 常用：reactive() isReactive() shallowReactive() isProxy() toRaw()
- readonly: 只读、不可修改
- computed
-
const a = computed(() => {});//返回一个不可变的响应式ref对象 const b = computed({ // 创建可写的ref对象 get: () => {}, set: (newVal) => {} }) watch const obj = reactive({ a: {b: 1}}); const e = ref('e'); const f = ref('f'); watch(obj, (newVal, oldVal) => {}); // 监听对象 watch(() => obj.a.b, (newVal, oldVal) = {}); //监听对象里的某一个属性 watch(() => _.cloneDeep(obj), (newVal, oldVal) => {}) // 深度拷贝后监听，确保newVal和oldVal不一样 watch([e, f], (newVal, oldVal) => {}); // 监听多个ref对象，写成数组形式 const stop = watch(obj, () => {}); stop(); // 停止监听
- watchEffect：立即执行传入的一个函数，同时响应式追踪其依赖，并在依赖改变时重新运行该函数
-
const stop = watchEffect(() => {}, {flush: 'post'}); // 对写入回调函数里的所有数据监听 stop() // 停止监听
- flush 表示执行时间
- pre: 默认值，挂载前或者更新前的数据
- post：挂载后后者更新后的数据
- sync： 同一个函数里改变多次值，不建议使用
- vue2和vue3里的watch区别
- 如果是监听引用类型数据，深度拷贝才能拿到oldValue，否则新旧值是一样的
- vue3中监听对象的某个属性，必须写出getter函数返回形式 ()=>obj.a，否则会报错
- 监听ref和reactive包裹的引用数据类型，默认深度监听，但ref监听的是value而不是ref
- vue3 为 v-if自动分配 key
12、修饰符
- 事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认行为
- .self 自身为目标才出发，不冒泡，不捕获
- .once 只执行一次
- v-bind修饰符
- .sync
- vue2是子组件可以修改，同步更新父组件传过来的prop值
- vue3 使用 v-model: 代替
- v-model修饰符
- .lazy 监听change事件而不是input事件
- .number 输入纯数字转成Number，输入非纯数据转化字符串
- .trim 去除首尾空格
- v-on修饰符
- vue2中，添加了native修饰符对事件监听会添加在自组件根节点上，否则监听移到$listeners上
- vue3中，移除了native，如果未在自组件的emits中定义，默认添加到自组件根节点上，且以onX形式存进$attrs对象里。因此希望监听自组件内部的原生事件，需要在子组件的emits中定义，否则会触发两次(原生一次，手动emit一次)
- .sync
13、插槽
- 定义：子组件用<slot>占位且可为该插槽提供备用内容，父组件负责分发<slot>里的内容，利用插槽可以实现组件复用
- 缩写：#name 默认 v-slot=“default”可以缩写v-slot， 也可以缩写 #default
- 分类
- 默认插槽：v-slot=“default” v-slot #default ， 也可以不写即默认
- 具名插槽： v-slot="test'' #test
- 作用域插槽： 父组件的数据来自于子组件的数据，子组件设置 v-slot: xx = "yy"，将yy传给父组件，父组件 v-slot=“scoped” {{ scoped }}
14、Vue3中$attrs、ref、class\style
- $attrs包含父组件中除去props和自定义事件外的所有属性集合
- 父组件中访问子组件的方法，ref="childRef"
- 需要在子组件中使用 defineExpose 的方法暴露出属性和方法才可以
- class、style：vue2只能挂在子组件的根节点上，不能改变位置。vue3里，已经移到$attrs对象里，因此可以设置并调用指定的挂载位置
15、组件间通信
- props、emit (父子)
- props：父组件传值子组件，可设置type、require、default，只在子组件中修改推荐 computed
- emits：可在emits对触发的事件进行验证，vue3所有未在emits定义的事件都会被存入组件的$attrs中，并绑定在组件的根节点上
- .sync 子组件可以修改父组件数据，通过 $emit( "update.page", value ) 属性
- $refs 获取组件的实例，父组件可调用子组件的方法和属性
- 只能在组件DOM渲染之后生效，不是响应式的，避免在计算属性中访问
- 在生命周期mouted 或者 nextTick 中调用
- v-for的话，获取的是一个数组
- $parent / $children
- $parent 子组件可以获取父组件实例对象数组，从而访问父组件中数据和方法
- $childre 父组件可以获取子组件实例对象数组，从而访问到子组件中数据和方法
- $attrs / $listeners vue3已移除
- $attrs 可获取子组件中除了class 和 style 外的非 props 属性的集合，如果继续向下传递 v-bind="$attrs"
- $listeners 可以监听父作用域内除 .native 外的 监听时间集合，如果继续向下传递 v-bind="$listeners"
- provide / inject
- 依赖注入，常见插件或者组件库，多个组件嵌套，
- 顶层provide提供变量或者方法，后代组件通过inject来注入变量，
- 缺点：
- 传递数据不是响应式，作为默认常量。
- $root 只可以访问根组件中的属性和方法
- eventBus 中央事件总线(所有组件间) vue3 已移除
- slot 插槽，子组件将数据传递给父组件template中
- Vuex (所有组件间)
- LocalStorage / SessionStorage (所有组件间)持久化存储
16、内置组件、动态组件、异步组件
- 内置组件：<slot> <keep-alive> <transition> <transition-group> <teleport> <router-link> <router-view>
- keep-alive 在内存不会进行销毁
- include、exclude、max、min
- keep-alive组件独享的生命周期钩子： actived(从内存缓存中读取并渲染时执行) 、deactivated(缓存到内存中时执行)
- 动态组件 ：不分打包，打包进父组件js文件里
- <template :is="curComponent"></template>
- 异步组件：import引入，分包操作，使用/**/来定义分包的名称
-
// vue2 组件懒加载 const asyncModal = () => import('../model.vue'); const asyncModal = { component: () => import('../model.vue'); // component delay: 200, timeout: 3000. error: ErrorComponent, // 引入都模版 loading: LoadingComponent } // vue3 import { defineAsyncComponent } from 'vue' const asyncModel = defineAsyncComponent(() => import('../model.vue')}) const asyncModel = defineAsyncComponent({ loader: () => import('../model.vue'), // loader delay: 200, timeout: 3000,] errorComponent: ErrorComponent, // 引入都模版 loadingComponent: LoadingComponent })
- keep-alive 在内存不会进行销毁
17、自定义指令
- 提供操作dom的一种途径，且可封装、复用
- 含义： v-aa:bb.cc="dd" aa为自定义指令名称，bb为参数，cc为修饰符，dd为值
18、过度与动画
- v-enter-from v-enter-to v-leave-from v-leave-to
19、其他知识点
- 响应式发生在(beforeCreate-created \ setup)初始化阶段的data、computed，之后无法添加根级别响应式数据，除非Vue2的set()，Vue3在setup里无法访问vue实例；
- data、computed可以访问props，反过来不行。因为先initProp，然后是initData，再是initComputed，因此computed可以访问data
- 区分哪些是响应式数据，哪些不是响应式数据
- vue3: isRef \ isReactive \ isReadonly \ isProxy 判断是否是reactive或readonly创建
- vue2:
- 当vue组件的实例初始化的时候已有的数据就是响应式，否则不是
- 通过definePorperty代理实例this身上
- 响应式的值改变会触发视图更新
- 自定义事件emit事件如果带有参数就会覆盖掉$event
- vue2的SFC文件中的name选项作用：动态组件keep-alive、递归组件、vue-devtool
- 因为setup是围绕beforeCreate和created生命周期钩子运行，所以不需要显示的定义它们，即可以在setup中直接编任何代码
- "create app.$el and append it to el"：vue会先在内存中创建编译好的模版，然后再挂载到页面html上。
- 不能在defineProperty get/set里直接return obj.a，而是返回监听的属性，return a; 因为会无限循环调用下去直到栈溢出
- vue中删除数组里面的元素依旧能触发响应式，通过delete \ set，不可用delete xx;
- 输入框实时搜索应该怎么优化：
- .lazy 该修饰符是当输入停止输入、失去焦点或按下enter，才会触发change，更新v-model
- 防抖 delay='200'
- 多个页面如何通讯
- localStorage
- cookie
- vuex
- 父子组件生命周期执行顺序
- 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子 Mounted -> 父Mounted
- 更新：
- 子组件更新：父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
- 父组件更新:
- 影响到子组件：父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
- 不影响到子组件：父beforeUpdate -> 父updated
- 销毁：父beforeDestory -> 子beforeDestory -> 子destory -> 父destory
- 如果是异步组件或懒加载组件，即import引入，顺序不一样了
- created和mounted分别请求数据有什么不同
- 请求数据一般在初始化created进行，但对于一些需要操作dom的业务，需要使用nextTick里面进行
- mounted请求数据缺点是可能会导致页面出现空白，直到数据请求成功在展示
- 如何执行多个并发请求
- all premise.all
- keep-alive原理
- 会缓存不活动的组件实例，防止重复渲染DOM
- vue缓存机制并不是直接存储DOM结构，而是将DOM节点抽象成一个个vnode。
- vue将需要缓存的vnode节点保持到catch中，在触发render时，通过vnode的name符合在缓存条件下，用include和exclude控制，从catch中取出之前缓存的Vnode实例进行渲染
- Vue路由守卫
- beforeEach 全局前置路由守卫， 每次切换之前调用，用于页面权限拦截
- afterEach 全局后置路由守卫，每次切换之后调用，用于切换document.title，仅其没有next参数
- beforeEnter 独享路由守卫，只有前置，在routes中使用
- beforeRouterEnter 组件内置路由守卫，进入组件时调用
- beforeRouterLeave 组件内置路由守卫，离开组件之时调用
- vue中this
- 在vue生命周期里this指向该组件vue的实例
- data在初始化时，Vue会将data中的属性转换为getter、setter，使data的属性具有响应式，此时如果访问原数据即可以通过vue实例代理映射到data属性，name == data.name
- methods\computed定义的方法，都可以通过Vue实例来直接访问，即this
20、nextTick原理
- 让我们在下次DOM更新循环结束之后执行延迟回调
- 4之前使用microtasks，但是microtasks优先级太高，某些情况会出现事件冒泡问题，所以为了兼容这种情况又补充了macrotasks，默认还是microtasks
- 对于实现macrostasks，会先判断是否能用setImmediate，如果不能的的话，降级为MessageChannel，以上都不行的话则使用setTimeout
- nextTick同时还支持promise的使用，会判断是否实现了Promise
21、Vue.mixin 混入，如果有重复函数则覆盖，没有重复则追加
22、权限管理
- 页面权限和按钮权限
- 页面权限：如果用户没登录，手动输入地址访问，则会跳到登录页面，如果登陆了，但访问没有权限的页面，则跳404页面
- 按钮权限：控制按钮或者跳转的展示与否，未确保非常规操作，选择删除而不样式隐藏。
- 前端方案
- 优点：降低非法操作，尽可能减少不必要的请求，减轻服务器压力，提高用户体验感
- 前端权限只是锦上添花，本质还是后端控制，通过cookie、session、token判断该用户权限
- 原理
- 菜单权限：用户登录之后服务端返回一条数据，这条数据有菜单列表和token，把这条数据存到vuex中，然后菜单根据vuex中数据进行菜单列表渲染。
- 权限的数据需要在多个组件之间共享，因此采用Vuex
- 防止vuex数据刷新丢失，可以将数据存到sessionStorage中，并和Vuex中的数据进行同步处理
- 页面权限：登陆成功后将token数据存储到sessionStorage中，判断是否登陆
- 1、全局前置路由守卫，控制页面权限
-
router.beforeEach((to, from, next) => { if (to.path === './login') { next() } else { const token = sessionStorage.getItem('token') if (!token) { next('/login') } else { next() } } })
- 菜单权限：用户登录之后服务端返回一条数据，这条数据有菜单列表和token，把这条数据存到vuex中，然后菜单根据vuex中数据进行菜单列表渲染。
- 2、动态路由
- 问题：用户可以访问A，但不能访问B，于是用户手动输入B进行访问
- 如过少量，可以通过全局前置路由守卫设置
- 如果大量，使用动态路由
- 根据用户所拥有的权限数据，来渲染添加所需的路由，这样无法访问的页面是找不到对应的路由，因此跳转404。addRoutes()
- 按钮权限
- 将用户无权限的按钮进行隐藏或者禁止，可通过自定义指令实现
- 根据服务端返回的数据来判断哪些操作时不允许的
- 自定义 v-permission，directive('permission', { })
23、Vue scoped style私有化
- 穿透 /deep/ >>>
- 涉及到vue-loader处理
- VueLoaderPlugin处理rule的，让loader能够和文件匹配，然后进行处理，将Vue文件按照template、script、css来拆分代码块。
- 此时会根据文件的路径和文件内容生成hash值，并赋值给id。
- 对于style代码块，vue-loader会在css-loader前加上stylePostLoad，stylePostLoad是Vue scoped的原理核心之一，它会给每个选择器增加属性值[data-v-hash=i]
24、拦截器intersceptor
- 作用：主要用于拦截请求并作出相应处理
- 场景：
- 登录验证，判断用户是否登录
- 权限验证，判断用户是否有权访问资源
- 请求封装，封装统一的请求处理
- 处理cookie、本地化
- axios拦截请求封装
- intersceptors.request.use(config => {})
- intersceptors.response.use(res => {})
25、跳转传参
- 在 template 中 router-link中 to="t/id=1" ，通过 $route.query.id 获取
- $router.push( { path: url, query: {id: 1} } )，参数会带在url里面，刷新不丢失
- $router.push( { name: 'Test', params: {id: 1} } )，参数不会带在url里面，刷新会丢失参数
26、hash与history
- 改变router 里面 mode模式
- history：pushState和replaceState，404需要服务端支持
- 安装第三方包，npm install --save connect-history-api-fallback
const history = require("connect-history-api-fallback");
app.use(history());
27、Vue项目开发中，遇到的各种痛点问题和解决方案
- 进入商详页传递参数问题
- name params 刷新参数不见了，$route.params
- 使用path query 可以刷新 $route.query
- 也可以在route中url：“/:id”
- 本地接口请求跨域问题
- proxyTable代理服务 target / pathRewrite / changeOrigin(是否跨域) / ws
- axios封装和api接口统一管理
- axios的封装，主要来帮我们拦截请求和响应，
- 统一配置接口公共的参数
- 对参数进行序列化
- 统一处理请求响应的状态码
- 压缩文件太大问题
- 组件按需加载，import
- 开启productionGzip: true
- webpack 提取公共代码、拆分代码配置
- 修改UI框架样式问题
- /deep/ 或者 >>>
- 定时器在页面跳转后还在进行问题
- 在组件中beforeDestory中进行清除，实例化保存了定时器，不太好
- 或者在$once('hook:beforeDestroy', () => {}) ，后在beforeDestroy清除，
- 双击延迟问题
- fastClick安装， 导入后 attach(document.body)
- 性能分析工具问题
- hiper 可以看到DNS查询耗时，TCP链接好事，页面下载耗时，DOM Ready耗时等
28、动态路由：动态加载
- 将路由存储到前端
- 将路由存储到后端，更加安全，推荐后端配置和权限控制结合
- Vuex配合storage来保持数据持久存储
- 前端可以定义静态路由，如：登录页、忘记密码、404页面
- 动态路由在全局前置路由守卫beforeEach中拦截并处理
- 遍历解析，读取动态路由中的 children 、component的路径
- 通过addRoute(v) 动态添加进去
- 最后 将 动态路由存到vuex和storage中
-
accessRouteses.forEach(v => { v.children = routerChildren(v.children); v.component = routerCom(v.component) //component的路径 router.addRoute(v) }) // 动态加载组件 function routerCom(path) { // return () => import('@/views/${path}') return (resolve) => requie([`@/views/${path}`], resolve) } // 递归循环 function routerChildren(children) { children.forEach(v => { v.component.routeCom(v.component) if (v.children != undefined) { v.children = routerChildren(v.children) } }) }
29、History 和 Hash 区别
- history
- 利用 pushstate() 和 replacestate()
- 需要服务器配合，设置对应的url，不然会返回404
- Hash
- url中有锚点 # ，依靠 onhashchange 事件，监听 hash变化
- 不会被放进请求的http中，因此改变hash不会重新加载页面，因此不能在SSR中使用Hash
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
