问题汇总

Honsanity
156 阅读7分钟

vue的相关

1.vue的钩子函数 Vue-Router 中导航守卫有哪些？其他的有什么作用？如何鉴权？

  • 1.全局守卫 全局守卫一般来说全局前置守卫、全局后置钩子 每个钩子方法接收三个参数：
  • to: Route : 即将要进入的目标 [路由对象]
  • from: Route : 当前导航正要离开的路由
  • next: Function : 继续执行函数
  • next()：继续执行
  • next(false)：中断当前的导航。
  • next(‘/‘) 或 next({ path: ‘/‘ })：跳转新页面，常用于登陆失效跳转登陆
// 定义路由配置
const router = new VueRouter({ ... })

// 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
    // 这里可以加入全局登陆判断
    // 继续执行
    next();
});

// 全局后置钩子-常用于结束动画等
router.afterEach(() => {
    //不接受next
});

export default router;

实用结合鉴权

import Vue from 'vue'
import Router from 'vue-router'
import { getStore } from 'js/store'

// vue路由懒加载  异步加载
const Index = resolve => require(['@/pages/index/Index'], resolve)
const Login = resolve => require(['@/pages/login/Login'], resolve)
// const Register = resolve => require(['@/pages/register/Register'], resolve)
// 用户个人信息
const UserInfo = resolve => require(['@/pages/user/UserInfo'], resolve)
const CompanyInfo = resolve => require(['@/pages/user/CompanyInfo'], resolve)
// 新闻与通知
const News = resolve => require(['@/pages/system/news/News'], resolve)
const Notice = resolve => require(['@/pages/system/news/Notice'], resolve)
// 待办列表
const ToDoList = resolve => require(['@/pages/workflow/ToDoList'], resolve)
// 签约页面
const Sign = resolve => require(['@/pages/trade/sign/Sign'], resolve)

Vue.use(Router)

var router = new Router({
	routes: [
		{
			path: '*',
			redirect: '/index'
		},
		{
			path: '/',
			redirect: '/login'
		},
		{
			path: '/index',
			name: 'index',
			component: Index,
			meta: {
				title: '首页',
				requireAuth: true // 只要此字段为true，必须做鉴权处理
			}
		},
		{
			path: '/userInfo',
			name: 'userInfo',
			component: UserInfo,
			meta: {
				title: '个人信息',
				requireAuth: true
			}
        },
        {
			path: '/companyInfo',
			name: 'companyInfo',
			component: CompanyInfo,
			meta: {
				title: '企业信息',
				requireAuth: true
			}
		},
		{
			path: '/news',
			name: 'news',
			component: News,
			meta: {
				title: '新闻',
				requireAuth: true
			}
		},
		{
			path: '/notice',
			name: 'notice',
			component: Notice,
			meta: {
				title: '公告',
				requireAuth: true
			}
		},
		{
			path: '/login',
			name: 'login',
			component: Login,
			meta: {
				showNav: false // 不显示nav
			}
		},
		{
			path: '/sign',
			name: 'sign',
			component: Sign,
			meta: {
				showNav: false // 不显示nav
			}
		},
		{
			path: '/toDoList',
			name: 'toDoList',
			component: ToDoList,
			meta: {
				title: '我的待办',
				requireAuth: true
			}
		}

	]
})

let indexScrollTop = 0

router.beforeEach((to, from, next) => {
	// 路由进入下一个路由对象前，判断是否需要登陆
	// 在路由meta对象中由个requireAuth字段，只要此字段为true，必须做鉴权处理
	if (to.matched.some(res => res.meta.requireAuth)) {
		const token = getStore({ name: 'access_token', type: "string" });
		// 未登录
		if (!token) {
			next({
				path: '/login',
				query: {
					redirect: to.path // 将跳转的路由path作为参数，登录成功后再跳转到该路由
				}
			})
		} else {
			next()
			/* // 用户信息是否过期
			let overdueTime = token.overdueTime;
			let nowTime = +new Date();
			// 登陆过期和未过期
			if (nowTime > overdueTime) {
				// 登录过期的处理，君可按需处理之后再执行如下方法去登录页面
				// 我这里没有其他处理，直接去了登录页面
				next({
					path: '/login',
					query: {
						redirect: to.path
					}
				})
			} else {
				next()
			} */
		}
	} else {
		next()
	}
	if (to.path !== '/index') {
		// 记录现在滚动的位置
		indexScrollTop = document.body.scrollTop
	}
	// 修改网页title（暂时无意义）
	// document.title = to.meta.title || document.title
})
router.afterEach(route => {
	if (route.path !== '/index') {
		document.body.scrollTop = 0
	} else {
		Vue.nextTick(() => {
			// 回到之前滚动位置
			document.body.scrollTop = indexScrollTop
		})
	}
})
export default router
  • 2.路由守卫 使用：在路由配置中单独加入钩子，在src/router/index.js中使用，代码如下：
{
    path:'/home/one', // 子页面1
        component: One,
        // 路由内钩子
        beforeEnter: (to, from, next) => {
        console.log('进入前执行');
            next();
        }
}
  • 3.组件守卫 使用：在路由组件内定义钩子函数：
  • beforeRouteEnter：进入页面前调用
  • beforeRouteUpdate (2.2 新增)：页面路由改变时调用，一般需要带参数
  • beforeRouteLeave：离开页面调用
<script>
export default {
    name: 'Two',
    data () {
        return {
            msg: 'Hi, I am Two Page!'
        }
    },
    // 进入页面前调用
    beforeRouteEnter(to, from, next) {
        console.log('进入enter路由钩子')
        next()
    },
    // 离开页面调用
    beforeRouteLeave(to,from, next){
        console.log('进入leave路由钩子')
        next()
    },
    // 页面路由改变时调用
    beforeRouteUpdate(to, from, next) {
        console.log('进入update路由钩子')
        console.log(to.params.id)
        next()
    }
}
</script>

2.父子组件数据流向？

数据单向流动

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解

// 简述：加载的时候：先父后子
//　父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

// 简述：子组件更新过程
//　父beforeUpdate->子beforeUpdate->子updated->父updated

// 简述：父组件更新过程
//　父beforeUpdate->父updated

// 简述：销毁过程
//　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3.keep-alive keep-alive可以实现组件的缓存？

优秀的回答： juejin.cn/post/684490…

  • 简述：keep-alive是一个内置抽象组件（它自身不会渲染一个 DOM 元素，也不会出现在父组件链中，abstract: true 属性值决定）。包裹动态组件时，会缓存不活动的组件实例。而不是销毁它们。 其主要用于保留组件状态（保留在内存中），避免重新渲染。 常用场景：
  • 从列表进入详情页面，再回到列表页面，不需要刷新列表页面
  • 填写表单，进入下一步，返回上一步数据不会清空
  • 填写表单，进入下一步，返回上一步数据不会清空

4.nextTick的作用 dom更新之后延迟回调，事件循环？

  • 作用： nextTick 可以让我们在下次 DOM 更新循环结束之后执⾏延迟回调，⽤于获 得更新后的 DOM
  • 原理 nextTick方法主要是使用了宏任务和微任务,定义了一个异步方法.多次调用nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。
  • 常用处 需要在视图更新之后，基于新的视图进行操作。

5.mvc和mvvm的相同和区别？

6.vue的优点？

  • vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

7.Vue.js 中实现 hash路由和history路由？

  • 形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传；
  • 功能上：比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok了

8.diff算法和key？

www.axihe.com/focus/vue/1…

9.slot 作用域插槽？

插槽，也就是slot，是组件的一块HTML模板，一个slot最核心的两个问题是显示不显示和怎样显示

10.Vue中相同逻辑如何抽离？ Vue.mixin？

11.虚拟dom的理解？

  • 概念： 虚拟 DOM 的解决方式是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，先缓存新生成的虚拟节点树，然后使用新生成的虚拟节点树和上一次生成的虚拟节点树进行对比，只渲染不同的部分。

  • 虚拟 DOM 做了哪些事？

    1.提供与真实 DOM 节点所对应的虚拟节点 vnode;（如何创建虚拟节点 vnode）

    2.将虚拟节点 vnode 和旧虚拟节点 vnode 进行比对，然后更新视图。（ patch 算法）。

2.js

1. es

mp.weixin.qq.com/s?__biz=MjM…

3.工程相关

1.如何管理git

引用 blog.csdn.net/weixin_4538…

    1. github上创建一个远程仓库,名字自己取
    1. 一般都有个主干，不会在主干上开发，在项目中生成一个分支 dev git checkout -b dev 和 git push origin dev
    1. 在这个分支的基础上，创建多一个新的dev（dev1），这个dev就是我们要开发的任务，开发完毕后，在合成到dev上 （git checkout -b +你这个分支的名字，可以随便取）
    1. 完成任务之后 查看 status ，add， commit，
  • 5.切换到dev上，合并demo到dev上
  • 6.push 到远程仓库

4.其他

1.大文件上传 ，断点上传

引用 juejin.cn/post/693418…

  • 大文件上传 转化格式二进制流（ArrayBuffer）--切割流 --组装分割相同数量的块，并行或串行发出 -- 请求发送成功后，再给服务器发送一个信号
  • 断点续传 文件设置标识--当上传成功的之后，记录上传成功的标识 --当我们暂停或者发送失败后，可以重新发送没有上传成功的切割文件
avatar
文章
阅读
粉丝