2019前端最新Vue面试题 （Vue篇）（下）

2019前端最新面试题 （Vue篇）（下）

1.vue双向数据绑定的原理

核心主要利用ES5中的Object.defineProperty实现的，然后利用里面的getter和setter来实现双向数据绑定的，具体流程比较复杂，如果想了解一下Object.defineProperty 可以查看：JavaScript之Object.defineProperty

2.vue路由或前端路由实现原理

前端路由实现原理主要通过以下两种技术实现的
第一种：利用H5的history API实现
主要通过history.pushState 和 history.replaceState来实现，不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录[发布项目时,需要配置下apache]

第二种：利用url的hash实现
我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，路由里的 # 不叫锚点，我们称之为 hash，我们说的就是hash,主要利用监听哈希值的变化来触发事件 —— hashchange 事件来做页面局部更新

    总结：hash 方案兼容性好，而H5的history主要针对高级浏览器。

以下为具体的API的区别:

this.$router.push(location, onComplete?, onAbort?)	

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。并且点击 等同于调用 router.push(…)。

this.$router.replace(location, onComplete?, onAbort?)

	这个方法不会向 	history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录，所以，当用	户点击浏览器后退按钮时，并不会回到之前的 URL。
this.$router.go(n)	这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似  window.history.go(n)

这个问题就很有可能引申出来一个新的面试题叫做，路由中replace和push的区别
这个问题说白了就是我可能在二级路由里面有好几个，但是当我点返回的时候，需要通过history.go直接返回，而不是来回切换，这样replace就体现出了它的作用，this.$router.replace方法,不计入history记录，所以就把这个bug解决了

3.vue路由钩子（或称vue路由守卫）的理解

vue路由钩子是在路由跳转过程中拦截当前路由和要跳转的路由的信息，有三种路由钩子：
第一种：全局路由钩子 beforeEach(to,from,next) { }
第二种：路由独享的钩子
beforeEnter(to,from,next) {
}
第三种：组件内的钩子
beforeRouteEnter(to,from,next) {
//…
}
beforeRouteUpdate(to,from,next) {
//…
}

beforeRouteLeave(to,from,next) {
//…
}

适用场景：动态设置页面标题，判断用户登录权限等:代码示例:

4.vue路由懒加载解决什么问题的?

vue路由懒加载主要解决打包后文件过大的问题，事件触发才加载对应组件中的js

5.如何解决vue首屏加载慢或白屏？

1.路由懒加载

2.开启Gzip压缩

3.使用webpack的externals属性把不需要打包的库文件分离出去，减少打包后文件的大小
4.使用vue的服务端渲染(SSR)

6.vue开发环境和线上环境如何切换

主要通过检测process.env.NODE_ENV===”production”和process.env.NODE_ENV===”development”环境，来设置线上和线下环境地址，从而实现线上和线下环境地址的切换

7.vue如何实现跨域

跨域前端和后端都可以实现，如果只针对vue,vue本身可以通过代理的方式可以实现，具体实现在config中的index.js中配置proxy来实现：

8.vue中methods,computed,watch的区别

methods中都是封装好的函数，无论是否有变化只要触发就会执行
computed:是vue独有的特性计算属性，可以对data中的依赖项再重新计算，得到一个新值，应用到视图中，和methods本质区别是computed是可缓存的，也就是说computed中的依赖项没有变化，则computed中的值就不会重新计算，而methods中的函数是没有缓存的。Watch是监听data和计算属性中的新旧变化。
vue用什么绑定事件，用什么绑定属性
答：用v-on绑定事件，简称：@,用v-bind来绑定属性，简称：:属性

9.vue如何动态添加属性，实现数据响应

vue主要通过用this.$set(对象，‘属性‘，值)实现动态添加属性，以实现数据的响应注意是添加,我记忆中如果是修改引用类型属性的值,是可以自动渲染的.

10.vue中的http请求是如何管理的

vue中的http请求如果散落在vue各种组件中，不便于后期维护与管理，所以项目中通常将业务需求统一存放在一个目录下管理，例如src下的API文件夹，这里面放入组件中用到的所有封装好的http请求并导出，再其他用到的组件中导入调用。如下面封装的HTTP请求
这个里面就涉及到了axios 封装之后可以继续调用：axios封装及使用
然后就可以封装请求

11.vue和jquey的区别

jquery主要是玩dom操作的“神器“，强大的选择器,封装了好多好用的dom操作方法和如何获取ajax方法 例如：$.ajax（）非常好用
vue:主要用于数据驱动和组件化，很少操作dom，当然vue可能通过ref来选择一个dom或组件

12.vue如何实现局部样式的或者说如何实现组件之间样式不冲突的和实现原理是什么？

css没有局部样式的概念，vue脚手架通过实现了，即在style标签上添加scoped，
而scoped的实现原理：vue通过postcss给每个dom元素添加一个以data-开头的随机自定义属性实现的

13.vue第三方ui样式库自己想要更改样式怎么办？

我们可以使用样式穿透 >>>
在less和sass中我们的样式穿透是用 /deep/

14.vuex如何实现数据持久化（即刷新后数据还保留）？

这个问题可以查看：Vuex实现数据持久化

写的可能有一些不全，可以评论我来修改，谢谢大家的观看！