vue面试题

vue面试题

1，vue解决了什么问题

（1）虚拟dom：dom操作非常耗性能，不在使用原生的dom操作节点，极大的解放了dom操作，但是具体操作还是dom，只不过是换了一种方式。

(2)视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

(3)组件化：把一个单页应用中的各个模块拆分到一个个单独的组件中，便于开发，以及后期的维护

2，MVVM的理解

MVVM就是Model-View-ViewModel的缩写，MVVM将视图业务逻辑分开。

view：视图层，model数据模型，而viewmodel是把两者建立通信的桥梁。

在 MVVM 框架下，View 和 Model 之间没有直接的联系，而是通过 ViewModel 进行交互。View 和 ViewModel 之间以及 Model 和 ViewModel 之间的交互都是双向的，因此 view 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反映到 View 上。可以说它们两者是实时更新的，互相影响。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，因此开发者只需要关注业务逻辑，不需要手动操作 DOM，也不需要关注数据状态的同步问题，这些都由 MVVM 统一管理

3，nextTick理解

使用nextTick的原因：Vue是异步操作DOM的，并且不鼓励开发者直接接触dom，但有时候需要必须对数据更改后的dom元素做相应的处理，但是获取到的dom数据并不是更改后的数据，这时候就需要this.$nextTick();

原理：Vue通过异步队列控制dom更新和nextTick回调函数先后执行的方式。

使用：
//HTML
<button @click=“change()”>按钮

{{msg}}
//JS
export default{
name:“app”,
data(){
return {
msg:“123”
}
},
methods:{
change(){
this.msg = “456”;
console.log(this.refs[“gss”].innerHTML)//123
this.$nextTick(function(){
console.log(this.refs[“gss”].innerHTML)//456
})
}
}
}

4，vue生命周期

(1) beforeCreate(创建前)：在此生命周期函数执行的时候，data和methods中的数据都还没初始化。

(2)created(创建后)：在此生命周期函数中，data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作。

(3)beforeMount(载入前)：在此生命周期函数执行的时候，模块已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。

(4)mounted(载入后)：此时页面和内存中都是最新的数据，这个钩子函数是最早可以操作可以操作dom节点的方法。

(5)beforeUpdate(更新前)：此时页面中显示的数据还是旧的，但是data中的数据是最新的，且页面并和最新的数据同步。

(6)Updated(更新后)：此时页面显示数据和最新的data数据同步。

(7)beforeDestroy(销毁前)：当执行该生命周期的时候，实例身上所有的data，所有的methods以及过滤器…等都处于可用状态，并没有真正执行销毁。

(8)destroyed(销毁后)：此时组件以及被完全销毁，实例中的所有的数据，方法，属性，过滤器…等都已经不可用了。

⑼activated(组件激活时)：和上面的 beforeDestroy 和 destroyed 用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy 和 destroyed 的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候

⑽deactivated(组件未激活时)：实例没有被激活时。

⑾errorCaptured(错误调用)：当捕获一个来自后代组件的错误时被调用

5、虚拟 DOM 原理

虚拟 DOM，其实就是用对象的方式取代真实的 DOM 操作，把真实的 DOM 操作放在内存当中，在内存中的对象里做模拟操作。当页面打开时浏览器会解析 HTML 元素，构建一颗 DOM 树，将状态全部保存起来，在内存当中模拟我们真实的 DOM 操作，操作完后又会生成一颗 dom 树，两颗 DOM 树进行比较，根据 diff 算法比较两颗 DOM 树不同的地方，只渲染一次不同的地方。
补充：

diff 算法核心：

① 如何用 vnode 生成一个 dom 的节点

 Wpatch 方法 patch(container, vnode)patch(vnode, newVnode)

②vnode 和 newVnode 的对比

③ 修改改变的 dom 节点
replacechildrencreateElement 复制代码

6、双向绑定的原理？数据劫持？

vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。

通过 Object.defineProperty（）来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时。Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue 的数据双向绑定 将 MVVM 作为数据绑定的入口，整合 Observer，Compile 和 Watcher 三者。通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令（vue 中是用来解析 {{}}）。最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —>视图更新；

数据劫持：当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。我们可以在触发函数的时候动一些手脚做点我们自己想做的事情，这也就是“劫持”操作。

7、watch、computed 和 methods 的区别

• methods 在重新渲染的时候每次都会被重新的调用；

• computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。

• watch 也可以影响数据的变化，当绑定的数据方法变化时触发响应的函数，需要在数据变化时执行异步或开销较大的操作时使用 watch。

8、Vue 的响应式原理

当一个 Vue 实例创建时，vue 会遍历 data 选项的属性，用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

9、Vue.js 的特点

• 简洁：页面由 HTML 模板+Json 数据+Vue 实例组成

• 数据驱动：自动计算属性和追踪依赖的模板表达式

• 组件化：用可复用、解耦的组件来构造页面

• 轻量：代码量小，不依赖其他库

• 快速：精确有效批量 DOM 更新

• 模板友好：可通过 npm，bower 等多种方式安装，很容易融入

10、插槽的理解

插槽用于决定将所携带的内容，插入到子组件指定的某个位置，但内容必须在父组件中子组件的标签内定义，在子组件中用标签接收。slot 是组件内部的占位符。

vue面试题还有很多 各位在这我先更新这10道题（抱拳）