ybigbear2的博客

在前几年，前后端完全分离开之前，很多很火的后端框架都会说自己是支持MVC模式，像JAVA的SpringMVC、PHP的smarty、Nodejs的express和Koa，那么MVC的模式到底是什么样的？先看看下面这张经典的MVC模型图，Model（模型）、View（视图）、 Controller（控制器）相互依赖关系的三部分组成模型。认识一下这三部分具体是指什么。

而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。、gulp、webpack等。的属性，自然就不会触发视图的更新，这时就需要使用Vue的。

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

如果需要缓存，就用组件的id和标签名，生成一个key，把当前vnode的instance作为value，存成一个对象。表明哪些需要需要做缓存，哪些不需要做缓存。并且给组件添加一个keepAlive变量为true，当组件初始化的时候，不再初始化。Vuex是专门为vue提供的全局状态管理系统，用于多个组件中的数据共享、数据缓存。方法将Vue的构建函数默认传入，在插件中可以使用vue，无需依赖vue库。如果设置了最大的缓存数，就删除第0个缓存。缓存的是组件的实例，用key和value对象保存。

普通插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。在创建元素的时候，用_t()方法方法来替换_v()的内容。二十六、Vue的普通Slot以及作用域Slot的区别。在模板编译的时候，处理组件中的子节点和slot标签。

是一个单例模式，不会有任何的合并操作，所以根实例不必校验data一定是一个函数。组件的data必须是一个函数，是为了防止两个组件的数据产生污染。而如果是函数的时候，合并的时候调用，会产生两个空间。Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。Vue的diff算法是平级比较，不考虑跨级比较的情况。十、请说明nextTick的原理。

Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子方法。内部会对钩子进行处理，将钩子函数维护成数组的形式。vue中对数组没有进行defineProperty，而是重写了数组的7个方法。Vue初始化的时候，挂载之后会进行编译。缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递归。当用户更改值的时候，就会通知watcher，去更新视图。当取值的时候，就会搜集watcher，放到dep里面。数组和对象类型的值变化的时候，通过。数组里的索引和长度是无法被监控的。

因此可以通过使用 key 来 唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。

Proxy 是 ES6 中提供的功能，其作用为：用于定义基本操作的自定义行为（如属性查找，赋值，枚 举，函数调用等）。如果为相同节点，进行 patchVnode，判断如何对该节点的子节点进 行处理，先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点，将旧的子节点移除)当页面的状态发生改变，需要对页面的 DOM 的结构进行调整的时候，首先根据变更的状态，重新构建起一棵对象树，然后将这棵新的对象 树和旧的对象树进行比较，记录下两棵树的的差异。2.Proxy 可以监听数组的变化。

Vuex 中所有的状态更新的唯一途径都是 mutation，异步操作通过 Action 来提交 mutation 实现，这样可以方便地跟踪每一个状态的 变化，从而能够实现一些工具帮助更好地了解我们的应用。Vuex 的状态存储是响应式的。作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重 新渲染，提升了渲染的性能。如果 mutation 支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

注意：对于不变的数据确实可以用 localstorage 可以代替 vuex，但 是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件 改变了该数据源，希望另一个组件响应该变化时，localstorage 无 法做到，原因就是区别 1。localstorage 则以文件的方式存储在本地，只能存储字符串类型的 数据，存储对象需要 JSON 的 stringify 和 parse 方法进行处理。在 这种模式下，组件树构成了一个巨大的"视图"，不管在树的哪个位置，任何组件都能获取状态或者触发行为。

Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当 组件要更改 State 中的数据时，必须通过 Mutation 提交修改信息，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据 的更新。页面显示所需 的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行 高效的状态更新。在组件中发出的动作，肯定是想获取或者改变数据的，但是在 vuex 中，数据是集中管理的，不能直接去更改数据，所以会把这个动作提 交（Commit）到 Mutations 中;

使用 onhashchange()事件的好处就是，在页面的 hash 值发生变化时，无需向后端发起请求，window 就可以监听事件的改变，并按规则加 载相应的代码。简介： history 模式的 URL 中没有#，它使用的是传统的路由分发模 式，即用户在输入一个 URL 时，服务器会接收这个请求，并解析这个 URL，然后做出相应的逻辑处理。录下来，这样浏览器就能实现页面的前进和后退。简介： hash 模式是开发中默认的模式，它的 URL 带着一个#，例如：，它的 hash 值就是#/vue。

该钩子在服务器端渲染期间不被调用。1.beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不 能访问到 data、computed、watch、methods 上的方法和数据。实例已完成以下的配置：编译模板，把 data 里面 的数据和模板生成 html。8.destroyed（销毁后）：实例销毁后调用，调用后，Vue 实例指示 的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例 也会被销毁。

分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者 逻辑的重⽤性: ⽐如视图（View）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定不同的"View"上，当 View 变化的时候 Model 不可以不变，当 Model 变化的时候 View 也可以不变。4.vue 的组件是基于配置的，我们通常编写的组件是组件配置而非组 件，框架后续会生成其构造函数，它们基于 VueComponent，扩展于 Vue；3.组件使用按分类有：页面组件、业务组件、通用组件；

vue 中的模板 template 无法被浏览器解析并渲染，因为这不属于浏 览器的标准，不是正确的 HTML 语法，所有需要将 template 转化成一 个 JavaScript 函数，这样浏览器就可以执行这一个函数并渲染出对 应的 HTML 元素，就可以让视图跑起来了，这一个转化的过程，就成 为模板编译。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也 就相对于 assets 中打包后的文件提交较大点。

Vue 宣称可以更快地计算出 Virtual DOM 的差异，这是由于它在渲染 过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。组件化：保留了 react 的优点，实现了 html 的封装和重用，在构 建单页面应用方面有着独特的优势；虚拟 DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作 节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一 种方式；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代 码的修改，只需要操作数据就能完成相关操作；

简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组 的__ob__，也就是它的 Observer 对象，如果有新的值，就调用 observeArray 继续对新的值观察变化（也就是通过 target__proto__ == arrayMethods 来改变了数组实例的型），然后手动调用 notify，通知渲染 watcher，执行 update。mixins 接收一个混入对象的数组，其中混入对象可以像正常的实例 对象一样包含实例选项，这些选项会被合并到最终的选项中。对未合并的选项，进行判断。

作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也 可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可 以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过 来的数据决定如何渲染该插槽。，xxx 为插槽名，当组件执行渲染函数时候，遇 到 slot 标签，使用$slot 中的内容进行替换，此时可以为插槽传递 数据，若存在数据，则可称该插槽为作用域插槽。由于 Vue 的 DOM 操作是异步的，所以，在上面的情况中，就要将 DOM2 获取数据的操作写在$nextTick 中。

MVC 中的 Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。2.compile 解析模板指令，将模板中的变量替换成数据，然后初始化 渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数 据的订阅者，一旦数据有变动，收到通知，更新视图。

浏览器有一个重要的安全策略，称之为其中，必须一致，，称之为同源，两个源不同，称之为跨源或跨域。

从 http 协议的角度来说，GET 和 POST 它们都只是请求行中的第一个单词，除了语义不同，其实没有本质的区别。之所以在实际开发中会产生各种区别，主要是因为浏览器的默认行为造成的。受浏览器的影响，在实际开发中，GET 和 POST 有以下区别：浏览器在发送 GET 请求时，不会附带请求体GET 请求的传递信息量有限，适合传递少量数据；POST 请求的传递信息量是没有限制的，适合传输大量数据。GET 请求只能传递 ASCII 数据，遇到非 ASCII 数据需要进行编码；POST 请求没有限制。

JavaScript 具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。JavaScript 常见的垃圾回收方式：标记清除、引用计数方式。浅拷贝：只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做浅拷贝（浅复制） 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。深拷贝：在堆中重新分配内存，并且把源对象所有属性都进行新建拷贝，以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象，拷贝后的对象与原来的对象是完全隔离，互不影

js在调用时，优先取出微任务，并且在执行过程中如果创建了新的作业，则放在本次执行完后紧接着调用，微任务执行完成后，再取出宏任务执行。

类型转换可以分为两种，和。

var定义的变量，是函数作用域，没有块的概念，可以跨块访问, 不能跨函数访问，有变量提升。let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问，无变量提升，不可以重复声明。const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改，无变量提升，不可以重复声明。var不存在暂时性死区,let和const存在暂时性死区let和const创建的全局变量没有给window设置相应的属性暂时性死区：使用命令声明变量之前，该变量都是不可用的。

使页面在没有css的情况下,也能够呈现出好的内容结构爬虫根据标签来分配关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染页面语义化使代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。遵循W3C标准的团队都遵循这个标准。