VUE全家桶（面试题）

国服第一摸鱼选手
329 阅读5分钟
  1. 谈谈你对MVVM开发模式的理解

答：MVVM分为Model、View、ViewModel三者。

Model 代表数据模型，数据和业务逻辑都在Model层中定义；

View 代表UI视图，负责数据的展示；

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

  1. v-if 和 v-show 有什么区别？

答：v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

  1. jQuery获取的dom对象和原生的dom对象有何区别？

答：js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

原生DOM对象转jQuery对象：

var box = document.getElementById('box');

var box=box = (box);

jQuery对象转原生DOM对象：

var box=box = ('#box');

var box = $box[0];

4.vue的特点？双向数据绑定是如何实现的

答：Vue采用数据劫持&发布-订阅模式的方式，通过ES5提供的Object.defineProperty() 方法来劫持 （监控） 各属性的getter、setter，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的试图，而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定，大 致 可 以 划 分 三 个 模 块：Observer、Compile、Watcher，如图：

  • Observer 数据监听器，负责对数据对象的所有属性进行监听（数据劫持），监听到数据发生变化后通知订阅者。
  • Compile 指令解析器，扫描模板，并对指令进行解析，然后绑定指定事件。
  • Watcher 订阅者，关联Observer和Complie，能够订阅并收到属性变动的通知，执行指令绑定的相应操作，更新视图。Updade()是它自身的一个方法，用于执行Compile中绑定的回调，更新视图。

\

5.vue的优点？

答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式； 运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

  1. 子组件像父组件传递事件？

答：$emit方法

  1. v-on可以监听多个方法吗？

答：可以，栗子：。

  1. vue父组件向子组件传递数据？

答：通过props

  1. 渐进式框架的理解

答：主张最少；可以根据不同的需求选择不同的层级；

  1. $nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值， 你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

  1. v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。 如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

12.vue等单页面应用及其优缺点

答：

缺点：

不支持低版本的浏览器，最低只支持到IE9；
不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
第一次加载首页耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。

优点：

无刷新体验,提升了用户体验；
前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
API 共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端
用户体验好、快，内容的改变不需要重新加载整个页面。

13.什么是vue的计算属性computed

答：计算属性是需要复杂的逻辑，可以用方法method代替

computed:{

totalPrice(){

return (this.good.price*this.good.count)*this.discount+this.deliver;

}

}

14.vue-cli提供的几种脚手架模板

答：vue-cli 的脚手架项目模板有browserify 和 webpack；

15.组件中传递数据？

答：props：export default {props: {

message: String //定义传值的类型
},

//或者props:["message"]data: {}

父组件调用子组件的方法：父组件 this.$refs.yeluosen.childMethod()

子组件向父组件传值并调用方法 $emit

组件之间：bus==emit+emit+on

16.vue-router实现路由懒加载（ 动态加载路由 ）

答：

17.vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消。

答：全局的:前置守卫、后置钩子（beforeEach，afterEach）beforeResolve
单个路由独享的:beforeEnter
组件级的: beforeRouteEnter（不能获取组件实例 this）、beforeRouteUpdate、beforeRouteLeave
这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；
先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate，可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。

18.完整的 vue-router 导航解析流程

答：

1>导航被触发；
2>在失活的组件里调用beforeRouteLeave守卫；
3>调用全局beforeEach守卫；
4>在复用组件里调用beforeRouteUpdate守卫；
5>调用路由配置里的beforeEnter守卫；
6>解析异步路由组件；
7>在被激活的组件里调用beforeRouteEnter守卫；
8>调用全局beforeResolve守卫；
9>导航被确认；
10>调用全局的afterEach钩子；
11>DOM更新；
12>用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

19.vue更新数组时触发视图更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
24.vue常用的UI组件库
答：Mint UI，element，VUX
25.vue修改打包后静态资源路径的修改
答：cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 './' 。
build: {
...
assetsPublicPath: './',
...
}
cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）
module.exports = {
publicPath: '', // 相对于 HTML 页面（目录相同） }

如果你喜欢我写的技术文章以及面试总结，欢迎关注收看我的文章，并且点赞、收藏、关注我哦。

avatar
文章
阅读
粉丝