vue

MVVM的理解

MVVM 是 Model-View-ViewModel的缩写; Model 代表数据模型，也可以在model里面定义数据修改和操作的业务逻辑; View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来; ViewModel 监听数据模型的改变和控制视图行为、处理用户交互，是一个同步 View 和 Model 的对象

Vue 生命周期

beforeCreate(创建前)：vue实例的挂载元素 $el 和数据对象 data 都是 undefined，还未初始化 created(创建后)：完成了data初始化，$ el还未初始化 beforeMount(载入前)：vue实例的 data 和 $el 都初始化了，相关的 render 函数首次被调用 mounted(载入后)：此过程进行ajax交互 beforeUpdate(更新前) updated(更新后) beforeDestroy(销毁前) destroyeded(销毁后)

Vue a页面跳转到b页面时，各页面生命周期执行顺序

b -- beforeCreate
b -- created
b -- beforeMount
a -- beforeDestroy
a -- destroyed
b -- mounted

虚拟DOM以及key属性的作用

虚拟 DOM 的好处

虚拟 DOM 是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地一个 js 对象中，最终将这个 js 对象一次性 attch 到 DOM 树上，再进行后续操作，避免大量无谓的计算量。所以，用 js 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 js 对象(虚拟 DOM)上，操作内存上的 js 对象的速度显然更快，等更新完毕后，再将最终的 js 对象映射成真实的 DOM，交由浏览器去操作

key的作用

让vue精准的追踪到每一个元素，高效的更新虚拟 DOM
触发过渡

<div>
   <span :key="text">{{text}}</span>
</div>

当 text 改变时，这个元素的key属性就发生了改变，再渲染更新的时候，Vue会认为这里新产生了一个元素，而旧的元素由于key不存在了，所以被删除，从而触发了过渡

v-model 的原理

v-model 本质就是一个语法糖，可以看成value+input方法的语法糖，会根据标签的不同生成不同的事件和属性，可以通过model的prop和event属性来进行自定义.

前端面试笔记（不定时更新）

vue