FrankKai

### 18.component与vnode的区别是什么？ vnode.js ```js export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array; text: string | void; elm: Node | void; ns: string |...

### 19.深入理解slot算法和shadow DOM 阅读完这篇博客你会有以下收获： - slot算法是什么？ - shadow DOM是什么？ - vue slot机制与w3c web component 规范的 shadow DOM渲染结果有何异同？  #### slot算法 The **slotting** algorithm assigns nodes of a shadow tree host...

### 20.v-model与vuex中的state绑定 非严格模式：直接修改 严格模式：直接修改报错 需要特殊处理 1.监听事件提交mutation 2.计算属性里set提交mutation #### 20.0 为什么非严格模式下可以直接修改？ 因为vuex中的state，映射到组件实例上之后，是一个计算属性，同时拥有getter和setter的。 当我们的属性修改时，v-model会被解析为对应的v-bind和事件，在事件中触发属性的setter从而修改值，之后setter通知watcher收集到的依赖，对所有相关的组件更新属性值。 #### 20.1 如何将vuex中的值设置为仅能通过mutation更新？ - strict设置为true - mapState中返回getter的值 #### 20.2 严格模式下，如何对使用了mapState重命名的计算属性做到双向绑定修改值？ - mapState重命名计算属性 - 在重命名计算属性的set中提交mutation ```js export default new...

### 21.vue-router的实现原理 - 侦听属性：Vue.defineReactive(“_route") - 生成新的route对象：push transitionTo Run queue(active,deactive,updated) - 更新app的route：updateRoute _rouoe - 变更路url：pushState

### 22.$nextTick的实现原理 获取到数据层导致视图更新后的DOM。 ```js // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) ``` 源码实现： 通过nextTick包裹的callback，会作为一个任务（**v2.5.6按照setImmediate，MessageChannel和setTimeout的优先级；最新版的按照Promise，MutationObserver，setImmediate和setTimeout的优先级**）增加到任务队列，等待所有DOM完成更新后执行callback。 ```js // v2.5.6 if (typeof setImmediate !== 'undefined'...

### let > `let`声明了一个block scope local variable，选择性为其赋值。 ```js let x = 1; if(x === 1) { let x = 2; console.log(x); // 2 } console.log(x); // 1 ``` `let`使变量的作用域限制于block，statement，或者expression。 ####...

### const 其实在let模块已经写了很多关于const的内容，所以在这里就写一些const特有的特性。 - const也是block-scoped的，和用let定义的变量类似。 - 不可以修改变量值，也就是不可以reassignment，并不是immutable - 不可以重新定义 - **const foo = [value]，value可以是function，而let也可以！** - 必须为const赋一个初值且存在temporal dead zone，比let更加严格！ ```js const foo = 1; { const foo =2; } ``` ```js...

### for循环中let/var与setTimeout的羁绊！ #### 无异步参与时，var，let效果相同 ```js for (var i = 0; i{console.log(1);})` ` setTimeout(()=>{console.log(2);})` ` setTimeout(()=>{console.log(3);})` ` setTimeout(()=>{console.log(4);})` ` setTimeout(()=>{console.log(5);})` ` setTimeout(()=>{console.log(6);})` ` setTimeout(()=>{console.log(7);})` ` setTimeout(()=>{console.log(8);})`中的i(0),i(1),i(2),i(3),i(4),i(5),i(6),i(7),i(8)是完全不同的i，setTimeout中的i是独立的块作用域中的i。 用I don't know js中的一段话来讲就是：>let为每次迭代声明一次变量，后续迭代的初始值是上一次迭代的结束值。 ####...

### CSS layout存在的意义是什么？ Place your boxes in the right place in relation to the viewport ### CSS layout包含哪些东西？ - Different display settings - Normal（document） flow - modern layout tools（flexbox，CSS grid）...

### display - change default display behaviour. - 可以改变任何元素的display，保证html semantic化。 - 有些display属性值，需要调用其他属性进行配合，例如display:flex和display:grid。