javascript前端知识体系(2)vue篇个人文章

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

Vue不允许在已经创建的实例上动态添加新的根级响应式属性(root-levelreactiveproperty)。

然而它可以使用Vue.set(object,key,value)方法将响应属性添加到嵌套的对象上。

一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。

//暴露两个mixins对象

exportconstmixinsTest1={methods:{hello1(){console.log("hello1");}},created(){this.hello1();},}exportconstmixinsTest2={methods:{hello2(){console.log("hello2");}},created(){this.hello2();},}hello2hello1121237.vue的核心是什么数据驱动专注于View层。它让开发者省去了操作DOM的过程，只需要改变数据。组件响应原理数据（model）改变驱动视图（view）自动更新组件化扩展HTML元素，封装可重用的代码。38.vue常用的修饰符有哪些v-model:.trim.numberv-on:.stop.prevent

40.template编译的理解41.axios是什么，如何中断axios的请求42.如何引入scss？安装scss依赖包：

npminstallsass-loader--save-devnpminstallnode-sass--save-dev在build文件夹下修改webpack.base.conf.js文件,在module下的rules里添加配置，如下：

{test:/\.scss$/,loaders:['style','css','sass']}应用：

created():在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(dataobserver)，property和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$elproperty目前尚不可用。

activated()：是在路由设置时，才会有这个生命周期。在被keep-alive缓存的组件激活时调用。

因为在插入数据或者删除数据的时候，会导致后面的数据的key绑定的index变化，进而导致从新渲染，效率会降低

动态组件使用方法

使用标签保存状态，即切换组件再次回来依然是原来的样子，页面不会刷新，若不需要可以去掉。通过事件改变is绑定的isWhich值即可切换成不同的组件，isWhich的值为组件名称。47.vue中怎么重置data使用场景：

比如，有一个表单，表单提交成功后，希望组件恢复到初始状态，重置data数据。

使用Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data可以获取到组件初始化状态下的data

初始状态下设置data数据的默认值，重置时直接bject.assign(this.$data,this.$options.data())

说明：

...49.style加scoped属性的用途和原理用途：防止全局同名CSS污染原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS属性选择器，以此完成类似作用域的选择方式50.在vue项目中如何配置favicon将favicon图片放到static文件夹下然后在index.html中添加：

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

强制重新渲染

this.$forceUpdate()强制重新刷新某组件

//模版上绑定key//选项里绑定datadata(){return{theKey:0}}//刷新key达到刷新组件的目的

theKey++;54.vue给组件绑定自定义事件无效怎么解决加入.native修饰符

报错"Method'xxx'hasalreadybeendefinedasadataproperty"

键名优先级：props>data>methods

实例创建之后，可以通过vm.$data访问原始数据对象。Vue实例也代理了data对象上所有的属性，因此访问vm.a等价于访问vm.$data.a。

以_或$开头的属性不会被Vue实例代理，因为它们可能和Vue内置的属性、API方法冲突。可以使用vm.$data._property的方式访问这些属性。

v-model默认的触发条件是input事件,加了.lazy修饰符之后,v-model会在change事件触发的时候去监听

diff算法要求，源码中patch.js中的patchVnode也是根据树状结构进行遍历

生命周期的钩子函数不能使用箭头函数，否者this不能指向vue实例

包裹嵌套其它元素，使元素具有区域性，自身具有三个特点：

解析和转换.vue文件，提取出其中的逻辑代码script、样式代码style、以及HTML模版template，再分别把它们交给对应的Loader去处理。

设置path:'*',并且放在最后一个

为什么要响应参数变化？

解决方案：

使用watch监听

watch:{$route(to,from){if(to!=from){console.log("监听到路由变化，做出相应的处理");}}}向router-view组件中添加key

$route.fullPath是完成后解析的URL，包含其查询参数信息和hash完整路径

在路由实例中配置scrollBehavior(ro,form,savedPosition){//滚动到顶部return{x:0,y:0}//保持原先的滚动位置return{selector：falsy}}74.路由懒加载75.MVVM全称：Model-View-ViewModel，Model表示数据模型层，view表示视图层，ViewModel是View和Model层的桥梁，数据绑定到viewModel层并自动渲染到页面中，视图变化通知viewModel层更新数据。

事件绑定有几种？

解释下这2种的区别：

Vue在更新DOM时是异步执行的，只要侦听到数据变化，将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个watcher被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于减少不必要的计算和DOM操作是非常重要的.

然后，在下一个的事件循环tick中，Vue刷新队列并执行实际(已去重的)工作，Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用setTimeout(fn,0)代替。

描述

对于Vue为何采用异步渲染，简单来说就是为了提升性能，因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图，举个例子，让我们在一个方法内重复更新一个值。

this.msg=1;this.msg=2;this.msg=3;事实上，我们真正想要的其实只是最后一次更新而已，也就是说前三次DOM更新都是可以省略的，我们只需要等所有状态都修改好了之后再进行渲染就可以减少一些性能损耗。

假设这里是同步更新队列，this.msg=1，大致会发生这些事：

msg值更新->触发setter->触发Watcher的update->重新调用render->生成新的vdom->dom-diff->dom更新这里的dom更新并不是渲染(即布局、绘制、合成等一系列步骤)，而是更新内存中的DOM树结构，之后再运行this.msg=2，再重复上述步骤，之后的第3次更新同样会触发相同的流程，等开始渲染的时候，最新的DOM树中确实只会存在更新完成3，从这里来看，前2次对msg的操作以及Vue内部对它的处理都是无用的操作，可以进行优化处理。

如果是异步更新队列，会是下面的情况：

运行this.msg=1，并不是立即进行上面的流程，而是将对msg有依赖的Watcher都保存在队列中，该队列可能这样[Watcher1,Watcher2...]，当运行this.msg=2后，同样是将对msg有依赖的Watcher保存到队列中，Vue内部会做去重判断，这次操作后，可以认为队列数据没有发生变化，第3次更新也是上面的过程。

当然，你不可能只对msg有操作，你可能对该组件中的另一个属性也有操作，比如this.otherMsg=othermessage，同样会把对otherMsg有依赖的Watcher添加到异步更新队列中，因为有重复判断操作，这个Watcher也只会在队列中存在一次，本次异步任务执行结束后，会进入下一个任务执行流程，其实就是遍历异步更新队列中的每一个Watcher，触发其update，然后进行重新调用render->newvdom->dom-diff->dom更新等流程，但是这种方式和同步更新队列相比，不管操作多少次msg，Vue在内部只会进行一次重新调用真实更新流程。

此外，组件内部实际使用VirtualDOM进行渲染，也就是说，组件内部其实是不关心哪个状态发生了变化，它只需要计算一次就可以得知哪些节点需要更新，也就是说，如果更改了N个状态，其实只需要发送一个信号就可以将DOM更新到最新，如果我们更新多个值。

this.msg=1;this.age=2;this.name=3;此处我们分三次修改了三种状态，但其实Vue只会渲染一次，因为VIrtualDOM只需要一次就可以将整个组件的DOM更新到最新，它根本不会关心这个更新的信号到底是从哪个具体的状态发出来的。

而为了达到这个目的，我们需要将渲染操作推迟到所有的状态都修改完成，为了做到这一点只需要将渲染操作推迟到本轮事件循环的最后或者下一轮事件循环，也就是说，只需要在本轮事件循环的最后，等前面更新状态的语句都执行完之后，执行一次渲染操作，它就可以无视前面各种更新状态的语法，无论前面写了多少条更新状态的语句，只在最后渲染一次就可以了。

将渲染推迟到本轮事件循环的最后执行渲染的时机会比推迟到下一轮快很多，所以Vue优先将渲染操作推迟到本轮事件循环的最后，如果执行环境不支持会降级到下一轮，Vue的变化侦测机制(setter)决定了它必然会在每次状态发生变化时都会发出渲染的信号，但Vue会在收到信号之后检查队列中是否已经存在这个任务，保证队列中不会有重复，如果队列中不存在则将渲染操作添加到队列中，之后通过异步的方式延迟执行队列中的所有渲染的操作并清空队列，当同一轮事件循环中反复修改状态时，并不会反复向队列中添加相同的渲染操作，所以我们在使用Vue时，修改状态后更新DOM都是异步的。

当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会立即去执行，在update中会调用queueWatcher方法将watcher放到了一个队列里，在queueWatcher会根据watcher的进行去重，若多个属性依赖一个watcher，则如果队列中没有该watcher就会将该watcher添加到队列中，然后便会在$nextTick方法的执行队列中加入一个flushSchedulerQueue方法(这个方法将会触发在缓冲队列的所有回调的执行)，然后将$nextTick方法的回调加入$nextTick方法中维护的执行队列，flushSchedulerQueue中开始会触发一个before的方法，其实就是beforeUpdate，然后watcher.run()才开始真正执行watcher，执行完页面就渲染完成，更新完成后会调用updated钩子。

$nextTick

在上文中谈到了对于Vue为何采用异步渲染，假如此时我们有一个需求，需要在页面渲染完成后取得页面的DOM元素，而由于渲染是异步的，我们不能直接在定义的方法中同步取得这个值的，于是就有了vm.$nextTick方法，Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行，也就是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，能够获取更新后的DOM。简单来说就是当数据更新时，在DOM中渲染完成后，执行回调函数。

通过一个简单的例子来演示$nextTick方法的作用，首先需要知道Vue在更新DOM时是异步执行的，也就是说在更新数据时其不会阻塞代码的执行，直到执行栈中代码执行结束之后，才开始执行异步任务队列的代码，所以在数据更新时，组件不会立即渲染，此时在获取到DOM结构后取得的值依然是旧的值，而在$nextTick方法中设定的回调函数会在组件渲染完成之后执行，取得DOM结构后取得的值便是新的值。

Js是单线程的，其引入了同步阻塞与异步非阻塞的执行模式，在Js异步模式中维护了一个EventLoop，EventLoop是一个执行模型，在不同的地方有不同的实现，浏览器和NodeJS基于不同的技术实现了各自的EventLoop。浏览器的EventLoop是在HTML5的规范中明确定义，NodeJS的EventLoop是基于libuv实现的。

在浏览器中的EventLoop由执行栈ExecutionStack、后台线程BackgroundThreads、宏队列MacrotaskQueue、微队列MicrotaskQueue组成。

当Js执行时，进行如下流程:

实例#

//Step1console.log(1);//Step2setTimeout(()=>{console.log(2);Promise.resolve().then(()=>{console.log(3);});},0);//Step3newPromise((resolve,reject)=>{console.log(4);resolve();}).then(()=>{console.log(5);})//Step4setTimeout(()=>{console.log(6);},0);//Step5console.log(7);//StepN//...//Result/*1475236*/分析#

在了解异步任务的执行队列后，回到中$nextTick方法，当用户数据更新时，Vue将会维护一个缓冲队列，对于所有的更新数据将要进行的组件渲染与DOM操作进行一定的策略处理后加入缓冲队列，然后便会在$nextTick方法的执行队列中加入一个flushSchedulerQueue方法(这个方法将会触发在缓冲队列的所有回调的执行)，然后将$nextTick方法的回调加入$nextTick方法中维护的执行队列，在异步挂载的执行队列触发时就会首先会首先执行flushSchedulerQueue方法来处理DOM渲染的任务，然后再去执行$nextTick方法构建的任务，这样就可以实现在$nextTick方法中取得已渲染完成的DOM结构。

在测试的过程中发现了一个很有意思的现象，在上述例子中的加入两个按钮，在点击updateMsg按钮的结果是321，点击updateMsgTest按钮的运行结果是231。

首先对有数据更新的updateMsg按钮触发的方法进行debug，断点设置在Vue.js的715行，版本为2.4.2，在查看调用栈以及传入的参数时可以观察到第一次执行$nextTick方法的其实是由于数据更新而调用的nextTick(flushSchedulerQueue)语句，也就是说在执行this.msg="Update";的时候就已经触发了第一次的$nextTick方法，此时在$nextTick方法中的任务队列会首先将flushSchedulerQueue方法加入队列并挂载$nextTick方法的执行队列到Promise对象上，然后才是自行自定义的Promise.resolve().then(()=>console.log(2))语句的挂载，当执行微任务队列中的任务时，首先会执行第一个挂载到Promise的任务，此时这个任务是运行执行队列，这个队列中有两个方法，首先会运行flushSchedulerQueue方法去触发组件的DOM渲染操作，然后再执行console.log(3)，然后执行第二个微队列的任务也就是()=>console.log(2)，此时微任务队列清空，然后再去宏任务队列执行console.log(1)。

接下来对于没有数据更新的updateMsgTest按钮触发的方法进行debug，断点设置在同样的位置，此时没有数据更新，那么第一次触发$nextTick方法的是自行定义的回调函数，那么此时$nextTick方法的执行队列才会被挂载到Promise对象上，很显然在此之前自行定义的输出2的Promise回调已经被挂载，那么对于这个按钮绑定的方法的执行流程便是首先执行console.log(2)，然后执行$nextTick方法闭包的执行队列，此时执行队列中只有一个回调函数console.log(3)，此时微任务队列清空，然后再去宏任务队列执行console.log(1)。

简单来说就是谁先挂载Promise对象的问题，在调用$nextTick方法时就会将其闭包内部维护的执行队列挂载到Promise对象，在数据更新时Vue内部首先就会执行$nextTick方法，之后便将执行队列挂载到了Promise对象上，其实在明白Js的EventLoop模型后，将数据更新也看做一个$nextTick方法的调用，并且明白$nextTick方法会一次性执行所有推入的回调，就可以明白其执行顺序的问题了，下面是一个关于$nextTick方法的最小化的DEMO。