vue原理与开发逻辑

1、vue中的$nextTick()的用法和原理

vue的DOM更新是异步的，当数据更新了，再dom中渲染后，自动执行该函数。
vue官网是这样说的：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后 立即使用这个方法，获取更新后的DOM
nextTick的底层原理 是主要是使用了宏任务和微任务。
应用场景：
（1）在created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
在created()钩子函数执行的时候DOM并没有进行任务的渲染，所以要将DOM操作的js代码放在Vue.nextTick()
与之对应的就是mounted()钩子函数，因为此钩子函数执行时所有的DOM挂载和渲染都已完成，此时可在这个钩子函数中进行任何的DOM操作。
（2）在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中
总结：如果你在数据改变之后的操作跟DOM有关，那么就应该使用Vue.nextTick()

2、vue.$set用法

3、如何封装一个组件

（1）首先判断一下你将要封装的组件在整个项目中复用性高不高
比如说app的加入购物车弹窗和后台管理系统的表格，这种就要封装组件进行复用
（2）在components文件夹中创建vue文件，根据需求，用插槽slot对结构进行布局
（3）当需要调用封装组件时，封装的组件称之为子组件，调用页面叫父组件，父组件传值给子组件渲染用prop
（4）当子组件想要修改数据时，则要用$emit派发一个自定义的事件,因为vue是单向数据流的（所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行），单向数据流也有利于调试数据。

4、用户权限和权限控制动态路由

（1）为什么有用户权限？
一个系统分为不同的角色，然后不同的角色对应不同的操作菜单和操作权限。
例如：教师可以查询教师自己的个人信息然后还可以查询和操作学生的信息和学生的成绩系统、学生用户只允许查询个人成绩和信息，不允许更改。
（2）前后端分离的路由权限管理基本为两种方式
1、后端生成当前用户相应的路由后由前端（用Vue Router提供的API）addRoutes动态加载路由。
2、前端写好所有的路由，后端返回当前用户的角色，然后根据事先约定好每个角色拥有哪些路由进行分配。
方式1完全是由后端来控制了，方式2相对来说，前端相对自由一些。
现在以方式2进行分析

3、用户权限和动态控制路由

掘金