共计 13382 个字符，预计需要花费 34 分钟才能阅读完成。
应用 Object.defineProperty() 来进行数据劫持有什么毛病？
在对一些属性进行操作时，应用这种办法无奈拦挡，比方通过下标形式批改数组数据或者给对象新增属性，这都不能触发组件的从新渲染，因为 Object.defineProperty 不能拦挡到这些操作。更准确的来说，对于数组而言，大部分操作都是拦挡不到的，只是 Vue 外部通过重写函数的形式解决了这个问题。
在 Vue3.0 中曾经不应用这种形式了，而是通过应用 Proxy 对对象进行代理，从而实现数据劫持。应用 Proxy 的益处是它能够完满的监听到任何形式的数据扭转，惟一的毛病是兼容性的问题，因为 Proxy 是 ES6 的语法。
Vue 修饰符有哪些
事件修饰符
- .stop 阻止事件持续流传
- .prevent 阻止标签默认行为
- .capture 应用事件捕捉模式, 即元素本身触发的事件先在此处解决，而后才交由外部元素进行解决
- .self 只当在 event.target 是以后元素本身时触发处理函数
- .once 事件将只会触发一次
- .passive 通知浏览器你不想阻止事件的默认行为
v-model 的修饰符
- .lazy 通过这个修饰符，转变为在 change 事件再同步
- .number 主动将用户的输出值转化为数值类型
- .trim 主动过滤用户输出的首尾空格
键盘事件的修饰符
- .enter
- .tab
- .delete (捕捉“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
零碎润饰键
- .ctrl
- .alt
- .shift
- .meta
鼠标按钮修饰符
- .left
- .right
- .middle
delete 和 Vue.delete 删除数组的区别
delete只是被删除的元素变成了empty/undefined其余的元素的键值还是不变。Vue.delete间接删除了数组 扭转了数组的键值。
Vue complier 实现
- 模板解析这种事，实质是将数据转化为一段
html，最开始呈现在后端，通过各种解决吐给前端。随着各种mv*的衰亡，模板解析交由前端解决。 - 总的来说，
Vue complier是将template转化成一个render字符串。
能够简略了解成以下步骤：
parse过程，将template利用正则转化成AST形象语法树。optimize过程，标记动态节点，后diff过程跳过动态节点，晋升性能。generate过程，生成render字符串
Vue.js 的 template 编译
简而言之，就是先转化成 AST 树，再失去的 render 函数返回 VNode（Vue 的虚构 DOM 节点），具体步骤如下：
首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的形象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创立编译器的。另外 compile 还负责合并 option。
而后，AST 会通过 generate（将 AST 语法树转化成 render funtion 字符串的过程）失去 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚构 DOM 节点，外面有（标签名、子节点、文本等等）
对 SPA 单页面的了解，它的优缺点别离是什么？
SPA（single-page application）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载实现，SPA 不会因为用户的操作而进行页面的从新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，防止页面的从新加载。
长处：
- 用户体验好、快，内容的扭转不须要从新加载整个页面，防止了不必要的跳转和反复渲染；
- 基于下面一点，SPA 绝对对服务器压力小；
- 前后端职责拆散，架构清晰，前端进行交互逻辑，后端负责数据处理；
毛病：
- 首次加载耗时多：为实现单页 Web 利用性能及显示成果，须要在加载页面的时候将 JavaScript、CSS 对立加载，局部页面按需加载；
- 后退后退路由治理：因为单页利用在一个页面中显示所有的内容，所以不能应用浏览器的后退后退性能，所有的页面切换须要本人建设堆栈治理；
- SEO 难度较大：因为所有的内容都在一个页面中动静替换显示，所以在 SEO 上其有着人造的弱势。
参考 前端进阶面试题具体解答
mixin 和 mixins 区别
mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。
Vue.mixin({beforeCreate() {// ... 逻辑 // 这种形式会影响到每个组件的 beforeCreate 钩子函数},
});
尽管文档不倡议在利用中间接应用 mixin，然而如果不滥用的话也是很有帮忙的，比方能够全局混入封装好的 ajax 或者一些工具函数等等。
mixins 应该是最常应用的扩大组件的形式了。如果多个组件中有雷同的业务逻辑，就能够将这些逻辑剥离进去，通过 mixins 混入代码，比方上拉下拉加载数据这种逻辑等等。
另外须要留神的是 mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。
说说 Vue 的生命周期吧
什么时候被调用？
- beforeCreate：实例初始化之后，数据观测之前调用
- created：实例创立万之后调用。实例实现：数据观测、属性和办法的运算、
watch/event事件回调。无$el. - beforeMount：在挂载之前调用，相干
render函数首次被调用 - mounted：了被新创建的
vm.$el替换，并挂载到实例下来之后调用改钩子。 - beforeUpdate：数据更新前调用，产生在虚构 DOM 从新渲染和打补丁，在这之后会调用改钩子。
- updated：因为数据更改导致的虚构 DOM 从新渲染和打补丁，在这之后会调用改钩子。
- beforeDestroy：实例销毁前调用，实例依然可用。
- destroyed：实例销毁之后调用，调用后，Vue 实例批示的所有货色都会解绑，所有事件监听器和所有子实例都会被移除
每个生命周期外部能够做什么？
- created：实例曾经创立实现，因为他是最早触发的，所以能够进行一些数据、资源的申请。
- mounted：实例曾经挂载实现，能够进行一些 DOM 操作。
- beforeUpdate：能够在这个钩子中进一步的更改状态，不会触发重渲染。
- updated：能够执行依赖于 DOM 的操作，然而要防止更改状态，可能会导致更新无线循环。
- destroyed：能够执行一些优化操作，清空计时器，解除绑定事件。
ajax 放在哪个生命周期？：个别放在 mounted 中，保障逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。复数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不反对 mounted 办法。 什么时候应用 beforeDestroy？：以后页面应用 $on，须要解绑事件。分明定时器。解除事件绑定， scroll mousemove。
双向数据绑定的原理
Vue.js 是采纳 数据劫持 联合 发布者 - 订阅者模式 的形式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时公布音讯给订阅者，触发相应的监听回调。次要分为以下几个步骤：
- 须要 observe 的数据对象进行递归遍历，包含子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变动
- compile 解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据有变动，收到告诉，更新视图
- Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，次要做的事件是: ①在本身实例化时往属性订阅器 (dep) 外面增加本人 ②本身必须有一个 update()办法 ③待属性变动 dep.notice()告诉时，能调用本身的 update()办法，并触发 Compile 中绑定的回调，则功成身退。
- MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听本人的 model 数据变动，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变动 -> 视图更新；视图交互变动(input) -> 数据 model 变更的双向绑定成果。
父子组件生命周期调用程序（简略）
渲染程序：先父后子，实现程序：先子后父
更新程序：父更新导致子更新，子更新实现后父
销毁程序：先父后子，实现程序：先子后父
nextTick 在哪里应用？原理是？
nextTick中的回调是在下次DOM更新循环完结之后执行提早回调，用于取得更新后的DOM- 在批改数据之后立刻应用这个办法，获取更新后的
DOM - 次要思路就是采纳
微工作优先的形式调用异步办法去执行nextTick包装的办法
nextTick办法次要是应用了宏工作和微工作, 定义了一个异步办法. 屡次调用nextTick会将办法存入队列中，通过这个异步办法清空以后队列。所以这个nextTick办法就是异步办法
依据执行环境别离尝试采纳
- 先采纳
Promise Promise不反对，再采纳MutationObserverMutationObserver不反对，再采纳setImmediate- 如果以上都不行则采纳
setTimeout - 最初执行
flushCallbacks，把callbacks外面的数据顺次执行
[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-90qfr49E-1676945043471)(null)]
答复范例
nextTick中的回调是在下次DOM更新循环完结之后执行提早回调，用于取得更新后的DOMVue有个异步更新策略，意思是如果数据变动，Vue不会立即更新 DOM，而是开启一个队列，把组件更新函数保留在队列中，在同一事件循环中产生的所有数据变更会异步的批量更新。这一策略导致咱们对数据的批改不会立即体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就须要应用nextTick- 开发时，有两个场景咱们会用到
nextTick created中想要获取DOM时
- 响应式数据变动后获取
DOM更新后的状态，比方心愿获取列表更新后的高度 nextTick签名如下：function nextTick(callback?: () => void): Promise<void>
所以咱们只须要在传入的回调函数中拜访最新 DOM 状态即可，或者咱们能够 await nextTick() 办法返回的 Promise 之后做这件事
- 在
Vue外部，nextTick之所以可能让咱们看到 DOM 更新后的后果，是因为咱们传入的callback会被增加到队列刷新函数 (flushSchedulerQueue) 的前面，这样等队列外部的更新函数都执行结束，所有 DOM 操作也就完结了，callback天然可能获取到最新的 DOM 值
根本应用
const vm = new Vue({
el: '#app',
data() {return { a: 1}
}
});
// vm.$nextTick(() => {// [nextTick 回调函数 fn, 外部更新 flushSchedulerQueue]
// console.log(vm.$el.innerHTML)
// })
// 是将内容保护到一个数组里，最终依照程序程序。第一次会开启一个异步工作
vm.a = 'test'; // 批改了数据后并不会马上更新视图
vm.$nextTick(() => {// [nextTick 回调函数 fn, 外部更新 flushSchedulerQueue]
console.log(vm.$el.innerHTML)
})
// nextTick 中的办法会被放到 更新页面 watcher 的前面去相干代码如下
// src/core/utils/nextTick
let callbacks = [];
let pending = false;
function flushCallbacks() {
pending = false; // 把标记还原为 false
// 顺次执行回调
for (let i = 0; i < callbacks.length; i++) {callbacks[i]();}
}
let timerFunc; // 定义异步办法 采纳优雅降级
if (typeof Promise !== "undefined") {
// 如果反对 promise
const p = Promise.resolve();
timerFunc = () => {p.then(flushCallbacks);
};
} else if (typeof MutationObserver !== "undefined") {
// MutationObserver 次要是监听 dom 变动 也是一个异步办法
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {characterData: true,});
timerFunc = () => {counter = (counter + 1) % 2;
textNode.data = String(counter);
};
} else if (typeof setImmediate !== "undefined") {
// 如果后面都不反对 判断 setImmediate
timerFunc = () => {setImmediate(flushCallbacks);
};
} else {
// 最初降级采纳 setTimeout
timerFunc = () => {setTimeout(flushCallbacks, 0);
};
}
export function nextTick(cb) {
// 除了渲染 watcher 还有用户本人手动调用的 nextTick 一起被收集到数组
callbacks.push(cb);
if (!pending) {
// 如果屡次调用 nextTick 只会执行一次异步 等异步队列清空之后再把标记变为 false
pending = true;
timerFunc();}
}数据更新的时候外部会调用nextTick
// src/core/observer/scheduler.js
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {has[id] = true
if (!flushing) {queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {i--}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
if (process.env.NODE_ENV !== 'production' && !config.async) {flushSchedulerQueue()
return
}
// 把更新办法放到数组中保护[nextTick 回调函数, 更新函数 flushSchedulerQueue]
/**
* vm.a = 'test'; // 批改了数据后并不会马上更新视图
vm.$nextTick(() => {// [fn, 更新]
console.log(vm.$el.innerHTML)
})
*/
nextTick(flushSchedulerQueue)
}
}
}虚构 DOM 实现原理?
- 虚构 DOM 实质上是 JavaScript 对象, 是对实在 DOM 的形象
- 状态变更时，记录新树和旧树的差别
- 最初把差别更新到真正的 dom 中
你有对 Vue 我的项目进行哪些优化？
（1）代码层面的优化
- v-if 和 v-show 辨别应用场景
- computed 和 watch 辨别应用场景
- v-for 遍历必须为 item 增加 key，且防止同时应用 v-if
- 长列表性能优化
- 事件的销毁
- 图片资源懒加载
- 路由懒加载
- 第三方插件的按需引入
- 优化有限列表性能
- 服务端渲染 SSR or 预渲染
（2）Webpack 层面的优化
- Webpack 对图片进行压缩
- 缩小 ES6 转为 ES5 的冗余代码
- 提取公共代码
- 模板预编译
- 提取组件的 CSS
- 优化 SourceMap
- 构建后果输入剖析
- Vue 我的项目的编译优化
（3）根底的 Web 技术的优化
- 开启 gzip 压缩
- 浏览器缓存
- CDN 的应用
- 应用 Chrome Performance 查找性能瓶颈
vue3.0 个性你有什么理解的吗？
Vue 3.0 正走在公布的路上，Vue 3.0 的指标是让 Vue 外围变得更小、更快、更弱小，因而 Vue 3.0 减少以下这些新个性：
（1）监测机制的扭转
3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言笼罩的反馈性跟踪。这打消了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限度：
- 只能监测属性，不能监测对象
- 检测属性的增加和删除；
- 检测数组索引和长度的变更；
- 反对 Map、Set、WeakMap 和 WeakSet。
新的 observer 还提供了以下个性：
- 用于创立 observable 的公开 API。这为中小规模场景提供了简略轻量级的跨组件状态治理解决方案。
- 默认采纳惰性察看。在 2.x 中，不论反应式数据有多大，都会在启动时被察看到。如果你的数据集很大，这可能会在利用启动时带来显著的开销。在 3.x 中，只察看用于渲染应用程序最后可见局部的数据。
- 更准确的变更告诉。在 2.x 中，通过 Vue.set 强制增加新属性将导致依赖于该对象的 watcher 收到变更告诉。在 3.x 中，只有依赖于特定属性的 watcher 才会收到告诉。
- 不可变的 observable：咱们能够创立值的“不可变”版本（即便是嵌套属性），除非零碎在外部临时将其“解禁”。这个机制可用于解冻 prop 传递或 Vuex 状态树以外的变动。
- 更好的调试性能：咱们能够应用新的 renderTracked 和 renderTriggered 钩子准确地跟踪组件在什么时候以及为什么从新渲染。
（2）模板
模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会从新渲染，而 3.0 把作用域插槽改成了函数的形式，这样只会影响子组件的从新渲染，晋升了渲染的性能。
同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来不便习惯间接应用 api 来生成 vdom。
（3）对象式的组件申明形式
vue2.x 中的组件是通过申明的形式传入一系列 option，和 TypeScript 的联合须要通过一些装璜器的形式来做，尽管能实现性能，然而比拟麻烦。3.0 批改了组件的申明形式，改成了类式的写法，这样使得和 TypeScript 的联合变得很容易。
此外，vue 的源码也改用了 TypeScript 来写。其实当代码的性能简单之后，必须有一个动态类型零碎来做一些辅助治理。当初 vue3.0 也全面改用 TypeScript 来重写了，更是使得对外裸露的 api 更容易联合 TypeScript。动态类型零碎对于简单代码的保护的确很有必要。
（4）其它方面的更改
vue3.0 的扭转是全面的，下面只波及到次要的 3 个方面，还有一些其余的更改：
- 反对自定义渲染器，从而使得 weex 能够通过自定义渲染器的形式来扩大，而不是间接 fork 源码来改的形式。
- 反对 Fragment（多个根节点）和 Protal（在 dom 其余局部渲染组建内容）组件，针对一些非凡的场景做了解决。
- 基于 treeshaking 优化，提供了更多的内置性能。
说说你对 proxy 的了解，Proxy 相比于 defineProperty 的劣势
Object.defineProperty() 的问题次要有三个：
- 不能监听数组的变动：无奈监控到数组下标的变动，导致通过数组下标增加元素，不能实时响应
- 必须遍历对象的每个属性：只能劫持对象的属性，从而须要对每个对象，每个属性进行遍历，如果属性值是对象，还须要深度遍历。
Proxy能够劫持整个对象，并返回一个新的对象 - 必须深层遍历嵌套的对象
Proxy 的劣势如下:
- 针对对象：针对整个对象，而不是对象的某个属性，所以也就不须要对
keys进行遍历 - 反对数组：
Proxy不须要对数组的办法进行重载，省去了泛滥 hack，缩小代码量等于缩小了保护老本，而且规范的就是最好的 Proxy的第二个参数能够有13种拦挡方：不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的Proxy返回的是一个新对象, 咱们能够只操作新的对象达到目标, 而Object.defineProperty只能遍历对象属性间接批改Proxy作为新规范将受到浏览器厂商重点继续的性能优化，也就是传说中的新规范的性能红利
proxy 具体应用点击查看(opens new window)
Object.defineProperty 的劣势如下:
兼容性好，反对
IE9，而Proxy的存在浏览器兼容性问题, 而且无奈用polyfill磨平
defineProperty 的属性值有哪些
Object.defineProperty(obj, prop, descriptor)
// obj 要定义属性的对象
// prop 要定义或批改的属性的名称
// descriptor 要定义或批改的属性描述符
Object.defineProperty(obj,"name",{
value:"poetry", // 初始值
writable:true, // 该属性是否可写入
enumerable:true, // 该属性是否可被遍历失去（for...in，Object.keys 等）configurable:true, // 定该属性是否可被删除，且除 writable 外的其余描述符是否可被批改
get: function() {},
set: function(newVal) {}})相干代码如下
import {mutableHandlers} from "./baseHandlers"; // 代理相干逻辑
import {isObject} from "./util"; // 工具办法
export function reactive(target) {
// 依据不同参数创立不同响应式对象
return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {if (!isObject(target)) {return target;}
const observed = new Proxy(target, baseHandler);
return observed;
}
const get = createGetter();
const set = createSetter();
function createGetter() {return function get(target, key, receiver) {
// 对获取的值进行喷射
const res = Reflect.get(target, key, receiver);
console.log("属性获取", key);
if (isObject(res)) {
// 如果获取的值是对象类型，则返回以后对象的代理对象
return reactive(res);
}
return res;
};
}
function createSetter() {return function set(target, key, value, receiver) {const oldValue = target[key];
const hadKey = hasOwn(target, key);
const result = Reflect.set(target, key, value, receiver);
if (!hadKey) {console.log("属性新增", key, value);
} else if (hasChanged(value, oldValue)) {console.log("属性值被批改", key, value);
}
return result;
};
}
export const mutableHandlers = {
get, // 当获取属性时调用此办法
set, // 当批改属性时调用此办法
};Proxy只会代理对象的第一层，那么 Vue3 又是怎么解决这个问题的呢？
判断以后
Reflect.get 的返回值是否为Object，如果是则再通过reactive办法做代理，这样就实现了深度观测。
监测数组的时候可能触发屡次 get/set，那么如何避免触发屡次呢？
咱们能够判断
key是否为以后被代理对象target本身属性，也能够判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger
为什么在 Vue3.0 采纳了 Proxy, 摈弃了 Object.defineProperty？
Object.defineProperty 自身有肯定的监控到数组下标变动的能力, 然而在 Vue 中, 从性能 / 体验的性价比思考, 尤大大就弃用了这个个性。为了解决这个问题, 通过 vue 外部解决后能够应用以下几种办法来监听数组
push();
pop();
shift();
unshift();
splice();
sort();
reverse();
因为只针对了以上 7 种办法进行了 hack 解决, 所以其余数组的属性也是检测不到的, 还是具备肯定的局限性。
Object.defineProperty 只能劫持对象的属性, 因而咱们须要对每个对象的每个属性进行遍历。Vue 2.x 里, 是通过 递归 + 遍历 data 对象来实现对数据的监控的, 如果属性值也是对象那么须要深度遍历, 显然如果能劫持一个残缺的对象是才是更好的抉择。
Proxy 能够劫持整个对象, 并返回一个新的对象。Proxy 不仅能够代理对象, 还能够代理数组。还能够代理动静减少的属性。
什么是 mixin？
- Mixin 使咱们可能为 Vue 组件编写可插拔和可重用的性能。
- 如果心愿在多个组件之间重用一组组件选项，例如生命周期 hook、办法等，则能够将其编写为 mixin，并在组件中简略的援用它。
- 而后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。
Vue 中封装的数组办法有哪些，其如何实现页面更新
在 Vue 中，对响应式解决利用的是 Object.defineProperty 对数据进行拦挡，而这个办法并不能监听到数组外部变动，数组长度变动，数组的截取变动等，所以须要对这些操作进行 hack，让 Vue 能监听到其中的变动。那 Vue 是如何实现让这些数组办法实现元素的实时更新的呢，上面是 Vue 中对这些办法的封装：
// 缓存数组原型
const arrayProto = Array.prototype;
// 实现 arrayMethods.__proto__ === Array.prototype
export const arrayMethods = Object.create(arrayProto);
// 须要进行性能拓展的办法
const methodsToPatch = [
"push",
"pop",
"shift",
"unshift",
"splice",
"sort",
"reverse"
];
/** * Intercept mutating methods and emit events */
methodsToPatch.forEach(function(method) {
// 缓存原生数组办法
const original = arrayProto[method];
def(arrayMethods, method, function mutator(...args) {
// 执行并缓存原生数组性能
const result = original.apply(this, args);
// 响应式解决
const ob = this.__ob__;
let inserted;
switch (method) {
// push、unshift 会新增索引，所以要手动 observer
case "push":
case "unshift":
inserted = args;
break;
// splice 办法，如果传入了第三个参数，也会有索引退出，也要手动 observer。case "splice":
inserted = args.slice(2);
break;
}
//
if (inserted) ob.observeArray(inserted);// 获取插入的值，并设置响应式监听
// notify change
ob.dep.notify();// 告诉依赖更新
// 返回原生数组办法的执行后果
return result;
});
});
简略来说就是，重写了数组中的那些原生办法，首先获取到这个数组的__ob__，也就是它的 Observer 对象，如果有新的值，就调用 observeArray 持续对新的值察看变动（也就是通过 target__proto__ == arrayMethods 来扭转了数组实例的型），而后手动调用 notify，告诉渲染 watcher，执行 update。
MVVM的优缺点?
长处:
- 拆散视图（View）和模型（Model），升高代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）能够独⽴于 Model 变动和批改，⼀个 ViewModel 能够绑定不同的 ”View” 上，当 View 变动的时候 Model 不能够不变，当 Model 变动的时候 View 也能够不变。你能够把⼀些视图逻辑放在⼀个 ViewModel ⾥⾯，让很多 view 重⽤这段视图逻辑
- 提⾼可测试性: ViewModel 的存在能够帮忙开发者更好地编写测试代码
- ⾃动更新 dom: 利⽤双向绑定, 数据更新后视图⾃动更新, 让开发者从繁琐的⼿动 dom 中解放
毛病:
- Bug 很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异样了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。数据绑定使得⼀个地位的 Bug 被疾速传递到别的地位，要定位原始出问题的地⽅就变得不那么容易了。另外，数据绑定的申明是指令式地写在 View 的模版当中的，这些内容是没方法去打断点 debug 的
- ⼀个⼤的模块中 model 也会很⼤，尽管使⽤⽅便了也很容易保障了数据的⼀致性，过后⻓期持有，不开释内存就造成了破费更多的内存
- 对于⼤型的图形应⽤程序，视图状态较多，ViewModel 的构建和保护的老本都会⽐较⾼。
Vue 的生命周期办法有哪些 个别在哪一步发申请
beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在以后阶段 data、methods、computed 以及 watch 上的数据和办法都不能被拜访
created 实例曾经创立实现之后被调用。在这一步，实例已实现以下的配置：数据观测(data observer)，属性和办法的运算，watch/event 事件回调。这里没有 $el, 如果非要想与 Dom 进行交互，能够通过 vm.$nextTick 来拜访 Dom
beforeMount 在挂载开始之前被调用：相干的 render 函数首次被调用。
mounted 在挂载实现后产生，在以后阶段，实在的 Dom 挂载结束，数据实现双向绑定，能够拜访到 Dom 节点
beforeUpdate 数据更新时调用，产生在虚构 DOM 从新渲染和打补丁（patch）之前。能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
updated 产生在更新实现之后，以后阶段组件 Dom 已实现更新。要留神的是防止在此期间更改数据，因为这可能会导致有限循环的更新，该钩子在服务器端渲染期间不被调用。
beforeDestroy 实例销毁之前调用。在这一步，实例依然齐全可用。咱们能够在这时进行善后收尾工作，比方革除计时器。
destroyed Vue 实例销毁后调用。调用后，Vue 实例批示的所有货色都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
activated keep-alive 专属，组件被激活时调用
deactivated keep-alive 专属，组件被销毁时调用
异步申请在哪一步发动？
能够在钩子函数 created、beforeMount、mounted 中进行异步申请，因为在这三个钩子函数中，data 曾经创立，能够将服务端端返回的数据进行赋值。
如果异步申请不须要依赖 Dom 举荐在 created 钩子函数中调用异步申请，因为在 created 钩子函数中调用异步申请有以下长处：
- 能更快获取到服务端数据，缩小页面 loading 工夫；
- ssr 不反对 beforeMount、mounted 钩子函数，所以放在 created 中有助于一致性；