组件机制
2020-09-15 10:05:50 0 举报AI智能生成
vue
作者其他创作
大纲/内容
src\core\global-api\index.js
initAssetRegisters()
组件声明函数
initAssetRegisters()
组件声明函数
src\core\global-api\assets.js
initAssetRegisters()
组件注册 并添加components
initAssetRegisters()
组件注册 并添加components
走render
src\core\instance\render.js
vnode = render.call(vm._renderProxy, vm.$createElement)
src\core\instance\render.js
vnode = render.call(vm._renderProxy, vm.$createElement)
组件vnode创建
src\core\vdom\create-element.js
src\core\vdom\create-element.js
判断 string
判断是否是原生标签
config.isReservedTag(tag)
是 返回vnode
config.isReservedTag(tag)
是 返回vnode
如果是 自定义组件
执行createComponent()
执行createComponent()
src\core\vdom\create-component.js
创建自定义组件 挂载 安装组件钩子，准备着
创建自定义组件 挂载 安装组件钩子，准备着
src\core\vdom\patch.js
createElm()
将vdom转化为dom
createElm()
将vdom转化为dom
判断是否是自定义组件
是 return
是 return
原始标签 递归直接创建
会走到createElement()这个方法
会走到createElement()这个方法
执行前面准备的 做实例化和挂载
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */)
}
设置属性 追加到根组件
if (isDef(i = i.hook) && isDef(i = i.init)) {
i(vnode, false /* hydrating */)
}
设置属性 追加到根组件
其他 返回VNode
其他
vnode = createComponent(tag, data, context, children)
vnode = createComponent(tag, data, context, children)
first blood
权限控制
路由权限
路由分为两种：
constantRoutes 和 asyncRoutes
路由分为两种：
constantRoutes 和 asyncRoutes
路由守卫
/src/permission.js
全局判断是否登录，没登录跳转到登录页面，
登录则跳转到有权限的路由页面
/src/permission.js
全局判断是否登录，没登录跳转到登录页面，
登录则跳转到有权限的路由页面
请求登录
components/Login.vue
获取到用户信息，然后根据⻆⾊过滤asyncRoutes，
并将结果动态添加⾄router
components/Login.vue
获取到用户信息，然后根据⻆⾊过滤asyncRoutes，
并将结果动态添加⾄router
维护路由信息，实现动态路由⽣成逻辑
store/permission.js
store/permission.js
filterAsyncRoutes()
递归过滤AsyncRoutes路由表
递归过滤AsyncRoutes路由表
根据路由meta.role确定是否当前用户
拥有访问权限
hasPermission()
拥有访问权限
hasPermission()
获取⽤户⻆⾊，判断⽤户是否拥有访问权限
/src/permission.js
/src/permission.js
按钮权限
自定义权限按钮指令
src/directives/permission.js
src/directives/permission.js
no can no bb
0 条评论
下一页
