LuckXinXin的博客

var instance = null;class Storage { static getInstance() { if (!instance) { instance = new Storage(); } return instance; } setItem = (key, value) => localStorage.setItem(key, value), getItem = key => localStorage.getItem(ke

<input id="input"/>const data = {};const input = document.getElementById('input');Object.defineProperty(data, 'text', { set(value) { input.value = value; this.value = value; }});input.onChange = function(e) { data.text = e.target

第一步：解析模板成 render 函数第二步：响应式开始监听第三步：首次渲染，显示页面，且绑定依赖第四步：data 属性变化，触发 rerender第一步：解析模板成 render 函数模板中的所有信息都被 render函数包含模板中用到的 data 中的属性，都变成了 JS 变量模板中的v-model v-for v-on 都变成了 JS 逻辑render 函数返回 vnode第二步：响应式开始监听Object.defineProperty将 data 的属性代理.

模板是什么本质：字符串有逻辑，如 v-if v-for 等与 html 格式很像，但有很大区别最终还要转换为 html 来显示模板最终必须转换成 JS 代码，因为有逻辑（v-if v-for），必须用 JS才能实现转换为 html 渲染页面，必须用 JS 才能实现因此，模板最重要转换成一个 JS 函数（render 函数）render 函数模板中所有信息都包含在了 render 函数中this 即vmprice 即 this.price 即 vm.price，即 data

什么是响应式修改 data 属性之后，vue 立刻监听到data 属性被代理到 vm 上Object.defineProperty模拟实现

MVCM - Model 数据V - View 视图、界面C - Controller 控制器、逻辑处理MVVMModel - 模型、数据View - 视图、模板（视图和模型是分离的）ViewModel - 连接 Model 和 View关于 ViewModelMVVM 不算是一种创新但其中的 ViewModel 确实一种创新真正结合前端场景应用的创建MVVM 框架的三大要素响应式：vue如何监听到 data 的每个属性变化？模板引擎：vue 的模板如何被

在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用，并且也引入了新的 2 个 API 来解决问题在之前的版本中，如果你拥有一个很复杂的复合组件，然后改动了最上层组件的 state，那么调用栈可能会很长调用栈过长，再加上中间进行了复杂的操作，就可能导致长时间阻塞主线程，带来不好的用户体验。Fiber 就是为了解决该问题而生Fiber 本质上是一个虚拟的堆栈帧，新的调度器会按照优先级自由调度这些帧，从而将之前的同步渲染改成了异步渲染，在不影响体验的情况下去.

nextTick 可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM。在 Vue 2.4 之前都是使用的 microtasks，但是microtasks 的优先级过高，在某些情况下可能会出现比事件冒泡更快的情况，但如果都使用 macrotasks 又可能会出现渲染的性能问题。所以在新版本中，会默认使用 microtasks，但在特殊情况下会使用 macrotasks，比如 v-on。对于实现 macrotasks ，会先判断是否能使用 setImmediate ，不能.

想必大家在使用 Vue 开发的过程中，基本都是使用模板的方式。那么你有过「模板是怎么在浏览器中运行的」这种疑虑嘛？首先直接把模板丢到浏览器中肯定是不能运行的，模板只是为了方便开发者进行开发。Vue 会通过编译器将模板通过几个阶段最终编译为 render 函数，然后通过执行 render 函数生成 Virtual DOM 最终映射为真实 DOM。接下来我们就来学习这个编译的过程，了解这个过程中大概发生了什么事情。这个过程其中又分为三个阶段，分别为：将模板解析为 AST优化 AST将 AST转.

以上已经分析完了 Vue 的响应式原理，接下来说一点 Object.defineProperty 中的缺陷。如果通过下标方式修改数组数据或者给对象新增属性并不会触发组件的重新渲染，因为Object.defineProperty 不能拦截到这些操作，更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。对于第一个问题，Vue 提供了一个 API 解决export function set (target: Array<any> | Ob.

这道题目其实更多考的是 JS 功底。组件复用时所有组件实例都会共享 data，如果 data 是对象的话，就会造成一个组件修改 data 以后会影响到其他所有组件，所以需要将 data 写成函数，每次用到就调用一次函数获得新的数据。当我们使用 new Vue() 的方式的时候，无论我们将 data 设置为对象还是函数都是可以的，因为 new Vue() 的方式是生成一个根组件，该组件不会复用，也就不存在共享 data 的情况了...

v-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销，但是切换开销很小，更适合于频繁切换的场景。v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被渲染，直到条件为 true，并且切换条件时会触发销毁/挂载组件，所以总的来说在切换时开销更高，更适合不经常切换的场景。并且基于 v-if 的这种.

Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件var data = { name: 'poetries' }observe(data)let name = data.name // -> get valuedata.name = 'yyy' // -> change valuefunction observe(obj) { // 判断类型 if (!obj || typeof obj.

如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。对于 keep-alive 组件来说，它拥有两个独有的生命周期钩子函数，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。...

computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。另外 computer 和 watch 还都支持对象的写法，这种方式知道的人并不多。vm.$watch('obj', { // 深度遍历 deep: tru.

mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的Vue.mixin({ beforeCreate() { // ...逻辑 // 这种方式会影响到每个组件的 beforeCreate 钩子函数 }})虽然文档不建议我们在应用中直接使用 mixin，但是如果不滥用的话也是很有帮助的，比如可以全局混入封装好的 ajax 或者一些工具函数等等。mixins 应该是我们最常使用的扩展组件的方式了。如果多个组件中有相同的业务逻辑.

这个 API 很少用到，作用是扩展组件生成一个构造器，通常会与 $mount 一起使用。// 创建组件构造器let Component = Vue.extend({ template: '<div>test</div>'})// 挂载到 #app 上new Component().$mount('#app')// 除了上面的方式，还可以用来扩展已有的组件let SuperComponent = Vue.extend(Component)new SuperCom.

组件通信一般分为以下几种情况：父子组件通信兄弟组件通信跨多层级组件通信对于以上每种情况都有多种方式去实现，接下来就来学习下如何实现。父子通信父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方式是最常用的父子通信实现办法。这种父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props，而是必须通过发送事件的方式告知父组件修改数据。另外这两种方式还可以使用语法糖 v-model 来直接实现，因.

在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，因为这些数据的初始化都在 initState 中。然后会执行 created 钩子函数，在这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的。接下来会先执行 beforeMount 钩子函数，开始创建 VDOM，最后执行 mounted 钩子，并将 VDOM渲染为真实 DOM 并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才.

Vue 的表单可以使用 v-model 支持双向绑定，相比于 React 来说开发上更加方便，当然了 v-model 其实就是个语法糖，本质上和 React 写表单的方式没什么区别改变数据方式不同，Vue 修改状态相比来说要简单许多，React 需要使用 setState 来改变状态，并且使用这个 API 也有一些坑点。并且 Vue 的底层使用了依赖追踪，页面更新渲染已经是最优的了，但是 React 还是需要用户手动去优化这方面的问题。React 16以后，有些钩子函数会执行多次，这是因为引入 Fib.

前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。目前前端使用的路由就只有两种实现方式Hash 模式History 模式Hash 模式www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.comwindow.addEventListene.

大家都知道操作 DOM 是很慢的，为什么慢的原因以及在「浏览器渲染原理」章节中说过，这里就不再赘述了- 那么相较于 DOM来说，操作 JS 对象会快很多，并且我们也可以通过 JS来模拟 DOMconst ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li', children: '1' }}上述代码对应的 DOM 就是<ul class='list'> &.

MVVM涉及面试题：什么是 MVVM？比之 MVC 有什么区别？首先先来说下 View 和 ModelView 很简单，就是用户看到的视图Model 同样很简单，一般就是本地数据和数据库中的数据基本上，我们写的产品就是通过接口从数据库中读取数据，然后将数据经过处理展现到用户看到的视图上。当然我们还可以从视图上读取用户的输入，然后又将用户的输入通过接口写入到数据库中。但是，如何将数据展示到视图上，然后又如何将用户的输入写入到数据中，不同的人就产生了不同的看法，从此出现了很多种架构设计。

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

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：生成AST树优化codegen首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记.

简单来说，diff算法有以下过程同级比较，再比较子节点先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)比较都有子节点的情况(核心diff)递归比较子节点正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。Vue2的核心Diff算法采用了双端比较的算法，同.

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的

使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。...

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父。加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组件.

Promise的定义● Promise，简单来说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果● 从语法上说，Promise是一个对象，从它可以获取异步操作的消息● Promise提供统一的API，各种异步操作都可以用同样的方法进行处理Promise的特点a)对象的状态不受外界影响Promise对象有3种状态，每个promise对象只能是3种状态的一种1）p...

Vue开发工具越来越好用了！随着最新的稳定版本Vue CLI 3即将发布，是时候来看看有什么新鲜有趣的特性了。基于整个Vue.js开发者社区的反馈而大幅度改良，该版本提供了很多以工作流为中心的工具。我想会提升每一位Vue.js的开发者工作效率的特性就是Vue UI。一个可视化图形界面方便你去创建、更新和管理项目的方方面面。今天，我会跟你一一介绍Vue UI的beta版本中可用的功能。开始首先，我们确保安装了最新的Vue CLI。打开cmd，输入：npm install -g @vue/cl.

使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。...

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中

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

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数...

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：生成AST树优化codegen首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记.

简单来说，diff算法有以下过程同级比较，再比较子节点先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)比较都有子节点的情况(核心diff)递归比较子节点正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。Vue2的核心Diff算法采用了双端比较的算法，同.

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段key的作用是尽可能的复用 DOM 元素新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的需要在新旧 children 的节点中保存映射关系，以便能够.

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父。加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组件.