vue前端面试题知识点整理.docVIP

vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调 var obj = {}; Object.defineProperty(obj, name, { get: function() { console.log(我被获取了) return val; }, set: function (newVal) { console.log(我被设置了) }}) obj.name = fei;//在给obj设置name属性的时候，触发了set这个方法var val = obj.name;//在得到obj的name属性，会触发get方法 已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一。 2. 解释单向数据流和双向数据绑定 单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度 3. Vue 如何去除url中的 # vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history new Router({ mode: history, routes: [ ]}) 需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面 4. 对 MVC、MVVM的理解 MVC 特点： 1.View 传送指令到 Controller2.Controller 完成业务逻辑后，要求 Model 改变状态3.Model 将新的数据发送到 View，用户得到反馈 MVVM 所有通信都是单向的特点： 1.各部分之间的通信，都是双向的2.采用双向绑定：View 的变动，自动反映在 ViewModel，反之亦然具体请移步 这里 5. 介绍虚拟DOM 参考这里 6. vue生命周期的理解 vue实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程1.beforeCreated() 在实例创建之间执行，数据未加载状态2.created() 在实例创建、数据加载后，能初始化数据，dom渲染之前执行3.beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据4.mounted() 页面、数据渲染完成，真实dom挂载完成5.beforeUpadate() 重新渲染之前触发6.updated() 数据已经更改完成，dom 也重新 render 完成,更改数据会陷入死循环7.beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行 7. 组件通信 父组件向子组件通信子组件通过 props 属性，绑定父组件数据，实现双方通信 子组件向父组件通信将父组件的事件在子组件中通过 $emit 触发 非父子组件、兄弟组件之间的数据传递 8. vue-router 路由实现 路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能 9. v-if 和 v-show 区别 使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏 10. router的区别 router.push