Vue常见面试题

1、 Vue 的双向数据绑定原理是什么？ 

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 

具体步骤： 

第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的 话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。 

第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对 应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。 

第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:1、在自身实例化时往属 性订阅器(dep)里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。 

第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己 的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信 桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

 

2、 详细说明Vue 的生命周期？ 

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。

总共分为 8 个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

• 创建前（beforeCreated ）：在 beforeCreated 阶段，vue 实例的挂载元素$el 和数据对象 data 都为 undefined，还未初始化。

• 创建后（created ）：在 created 阶段，vue 实例的数据对象 data 有了，$el 还没有。 

• 载入前（beforeMount）：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节 点，data.message 还未替换。

• 载入后（mounted ）：在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。

• 更新前/后（beforeUpdate /updated ）：当 data 变化时，会触发 beforeUpdate 和 updated 方法。 

• 销毁前/后(beforeDestroy /destroy ed)：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了 事件监听以及和 dom 的绑定，但是 dom 结构依然存在

• vue生命周期的作用是什么？

  它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

• vue生命周期总共有几个阶段？

  它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

• 第一次页面加载会触发哪几个钩子？

  第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

• DOM 渲染在 哪个周期中就已经完成？

  DOM 渲染在 mounted 中就已经完成了。

• 描述一下每个周期具体适合哪些场景？

  beforecreate : 可以在这加个loading事件，在加载实例时触发

  created : 初始化完成时的事件写在这里loading事件，异步请求也适宜在这里调用

  mounted : 挂载元素，获取到DOM节点

  updated : 如果对数据统一处理，在这里写上相应函数

  beforeDestroy : 可以做一个确认停止事件的确认框

  nextTick : 更新数据后立即操作dom;

3、 v-show与v-if的区别 

• v-show本质就是标签display设置为none，控制隐藏

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

• v-if是动态的向DOM树内添加或者删除DOM元素

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

当只需要一次显示或隐藏时，使用v-if更加合理

4、 常用的指令

• v-cloak

        防止页面加载时出现闪烁问题

• v-text

   v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

  v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

  如果数据中有HTML标签会将html标签一并输出

  注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

• v-html

  用法和v-text 相似  但是他可以将HTML片段填充到标签中

  可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

  它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

• v-pre

  显示原始信息跳过编译过程

  跳过这个元素和它的子元素的编译过程。

  一些静态的内容不需要编译加这个指令可以加快渲染

• v-once

  执行一次性的插值（当数据改变时，插值处的内容不会继续更新）

   

• v-model

  一般用在表达输入，很轻松的实现表单控件和数据的双向绑定数据

  当发生变化的时候，视图也就发生变化；当视图发生变化的时候，数据也会跟着同步变化

• v-on

  用来绑定事件的

  形式如：v-on:click  缩写为 @click;

   

• v-for

  用于循环的数组里面的值可以是对象，也可以是普通元素

  不推荐同时使用 v-if 和 v-for

  当 v-if 与  v-for一起使用时, v-for具有比 v-if 更高的优先级

  v-for必须搭配:key来给每个节点做一个唯一标识，key的作用主要是为了高效的更新虚拟DOM

• v-bind

  v-bind 指令被用来响应地更新 HTML 属性

  v-bind:href    可以缩写为    :href

   

 

5、vue-router 有哪几种导航钩子？

• 全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截（前置守卫、后置钩子（beforeEach，afterEach）beforeResolve）

• 组件内的钩子（beforeRouteEnter（不能获取组件实例 this）、beforeRouteUpdate、beforeRouteLeave） 

• 单独路由独享组件（beforeEnter）

  注意：因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate，可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。

 

6.  Vue 组件中 data 为什么必须是函数?而Vue实例中确是对象？

• 因为如果data是一个对象，对象是引用类型，那复用的所有组件实例都会共享这些数据，就会导致修改一个组件实例上的数据，其他复用该组件的实例上对应的数据也会被修改

• 如果data是一个函数，函数虽然也是引用类型，但是函数是有作用域的，函数内的变量不能被外部访问到，这样每个组件实例都会有个独立的拷贝同时又因为函数作用域的限制修改自己的数据时其他组件实例的数据是不会受到影响的

• 对象是引用类型，且没有作用域，会导致一改全改

• 函数是引用类型，但它有作用域，不会彼此受牵连

7.  vue.js的两个核心是什么？

 

数据驱动、组件系统

数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性

组件系统：应用类UI可以看作全部是由组件树构成的

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

优点：

• 使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过 Object.defineProperty() 定义的数据 set、get 函数原理实现

• 组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工 具包就可以开工。项目经理坐等收楼就好

• 单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时

• js 的代码无形的规范，团队合作开发代码可阅读性更高

缺点：

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

9.你是怎么认识 vuex 的？有哪几种属性？

• vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。

• 通过状态（数据源）集中管理驱动组件的变化（好比 spring 的 IOC 容器对 bean 进行集中管理）

• 应用级的状态集中放在 store 中；改变状态的方式是提交 mutations，这是个同步的事物；异步逻辑 应该封装在 action 中

• 有五种，分别是 State、 Getter、Mutation 、Action、 Module

  

10.请说下封装 vue 组件的过程？ 

• 首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开 发：效率低、难维护、复用性等问题。

• 然后，使用 Vue.extend 方法创建一个组件，然后使用 Vue.component 方法注册组件。子组件需要数据，可以 在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法

   

11.vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？ 

• 在 components 目录新建你的组件文件（smithButton.vue），script 一定要 export default

• 在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’

• 注入到 vue 的子组件的 components 属性上面,components:{smithButton}

• 在 template 视图 view 中使用，

• 问题有：smithButton 命名，使用的时候则 smith-button。

 

12.vue 中组件直接的通信是如何实现的？

组件关系可分为父子组件通信、兄弟组件通信。 

• 父组件向子组件

  通过 props 属性来实现 

• 子组件向父组件 

  子组件用$emit （）来触发事件，父组件用$on（）来监昕子组件的事件。 

  父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。 

• 兄弟之间的通信 

  通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus，之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

 

13.computed和watch有什么区别

• watch属性只能侦听当前指定变量的值的变化

• watch属性用来响应数据的变化，一般用于异步或者开销较大的操作

• computed属性只要是包含在它的函数里面的变量值，任何一个值发生变化，它对应的返回出去的值都会发生变化，只侦听一层，对象里套对象，里面的值不能侦听

• computed属性有缓存，所以改变vue实例处的属性值，页面不会改变

• computed是计算属性，也就是计算值；watch是侦听，更多的是[观察]的作用

 

14.Vue路由的几种跳转方式

• router-link

   

   

  

• this.$router.push() (函数里面调用)

  this.$router.push("hash地址");this.$router.push("/login");this.$router.push({ name:'user' , params: {id:123} });this.$router.push({ path:"/login" });this.$router.push({ path:"/login",query:{username:"jack"} });

  

• this.$router.replace() (用法与push相同)

• this.$router.go(n)

   

  n为数字，参考history.go

  向前或者向后跳转n个页面，n可为正整数或负整数

 

15.说下你对 mvvm 的理解？双向绑定的理解？ 

 

• mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的 html、vm 就是用来实现双 

• 向绑定双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变

 

16.常用的事件修饰符有几种？

 

• 阻止默认行为：event.preventDefault()

   

• 阻止冒泡：event.stopPropagation()

 

17.vue中$router和$route的区别

 

• $router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性

• $route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等

   

 

今天就分享到了，下次再分享~

扫描下面二维码，可以进群一起学习交流前端技术