demo2

0.Vue的dom更新机制

　　Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新

　　简单来说，Vue是异步执行DOM更新的，异步的运行机制如下：

　　　　1.所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及DOM

　　　　2.主线程之外，还存在一个任务队列，只要异步任务有了结果，就在任务队列之中放置一个事件（Vue开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次）

　　　　3.一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，异步任务就结束等待状态，进入执行栈，开始执行（同步任务执行完毕，开始执行异步watcher队列的任务，更新DOM。Vue在内部尝试对异步队列使用原生的Promise.then和MessageChannel方法，如果执行环境不支持，会采用settimeout(fn, 0)代替）

　　　　4.主线程不断重复上面的第三步

1.vm.$nextTick([callback)]

　　将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。（2.1.0新增：如果没有提供回调且在支持Promise的环境中，则返回一个Promise）

　　nextTick的触发时机：在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调（可以理解为强制更新render树）

　　简单总结事件循环：

　　　　同步代码执行 -> 查找异步队列，推入执行栈，执行callback1[事件循环1] ->查找异步队列，推入执行栈，执行callback2[事件循环2]...

　　即每个异步callback，最终都会形成自己独立的一个事件循环。

　　结合nextTick的由来，可以推出每个事件循环中，nextTick触发的时机：

　　　　同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发

从用例1得出：

　　　　　　a、在同一事件循环中，只有所有的数据更新完毕，才会调用nextTick；

　　　　　　b、仅在同步执行环境数据完全更新完毕，DOM才开始渲染，页面才开始展现；

　　　　　　c、在同一事件循环中，如果存在多个nextTick，将会按最初的执行顺序进行调用；

　　　　从用例1+用例4得出：

　　　　　　d、从同步执行环境中的四个tick对应的‘li’数量均为30000可看出，同一事件循环中，nextTick所在的视图是相同的；

　　　　从用例2得出：

　　　　　　e、只有同步环境执行完毕，DOM渲染完毕之后，才会处理异步callback

　　　　从用例3得出：

　　　　　　f、每个异步callback最后都会处在一个独立的事件循环中，对应自己独立的nextTick;

　　　　从用例1结论中可得出：

　　　　　　g、这个事件环境中的数据变化完成，在进行渲染［视图更新］，可以避免DOM的频繁变动，从而避免了因此带来的浏览器卡顿，大幅度提升性能；

　　　　从b可以得出：

　　　　　　h、在首屏渲染、用户交互过程中，要巧用同步环境及异步环境；首屏展现的内容，尽量保证在同步环境中完成；其他内容，拆分到异步中，从而保证性能、体验。

    

　　tips：

　　　　1、可产生异步callback的有：promise（microtask queue）、setTimeout、MutationObserver、DOM事件、Ajax等;

　　　　2、 vue DOM的视图更新实现，，使用到了ES6的Promise及HTML5的MutationObserver，当环境不支持时，使用setTimeout(fn, 0)替代。上述的三种方法，均为异步API。其中MutationObserver类似事件，又有所区别；事件是同步触发，其为异步触发，即DOM发生变化之后，不会立刻触发，等当前所有的DOM操作都结束后触发。

 

2.vue的replace()方法

str.replace(regexp|substr, newSubStr|function)

　　regexp(pattern)：一个RegExp对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉

　　substr(pattern)：一个将被newSubStr替换的字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换

　　newSubStr(replacement)：用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数

　　function(replacement)：一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数