vue面试题目总结

mvvm模式的理解和mvc的区别

m:model 相当于是数据

v:view 页面

vm:viewmodel vm自动同步，不需要在手动操作dom

Vm相当于mvc中的c，去操作m，在v中自动显示数据，vm实现的核心是双向数据绑定

优点：

耦合性低

可重复性

可独立开发

缺点

一个大的模块中，model也会很大，虽然使用方便了也很容易保证了数据的一致性，当长期持有，不释放内存，就造成了花费更多的内存。

双向数据绑定的原理，优缺点

单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

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变更的双向绑定效果。

虚拟Dom的优缺点

Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。

1.操作dom元素需要把html结构销毁之后,然后再进行重新生成,十分消耗性能

2.虚拟dom,通过diff算法,减少性能的消耗
vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。

一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，
而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。

第一步：通过树的形式保存旧的dom信息，这些信息可能在页面第一次加载的时候被渲染到浏览器中，但仍是通过虚拟dom的方式创建的

第二步：检测到数据更新，需要更新dom，先在JavaScript中将需要修改的节点全部修改完成（这个步骤可以进行算法上的优化，会在后面的原理中详细说明）

第三步：将最终生成的虚拟DOM更新到视图中去。

优点：更加方便的去操作Dom

虚拟DOM的缺点

1. 代码更多，体积更大

2. 内存占用增大

3. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快

webpack对vue影响

单文件组件

优化Vue构建过程

浏览器缓存管理

代码分离

vue生命周期

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

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

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

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

vue2.0和3.0的区别在哪？

一.创建项目：

创建项目命令的变化。

vue create project

二. 项目目录结构变化：

我们对比发现 vue-cli 3.0 默认项目目录相比 2.0 来说精简了很多。

三.移除了配置文件目录后如何自定义配置。

从 3.0 版本开始，在项目的根目录放置一个 vue.config.js 文件, 可以配置该项目的很多方面//需要自己创建

四. 关于 public 目录的调整。


Vuex
数据单向流动一个应用可以看作是由上面三部分组成: View, Actions,State,数据的流动也是从View => Actions => State =>View 以此达到数据的单向流动.但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的. Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心. Vuex原理上图可以很好的说明Vuex的组成,一个实例化的Vuex.Store由state, mutations和actions三个属性组成: state中保存着共有数据改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

vue跨域

vue如何解决每个人下载的版本不同

vue自定义指令

vue项目遇到的问题

猜你喜欢