补充知识点以及原理图

Author: MrTreasure

README.md

@@ -28,6 +28,10 @@
 * [常用的JS概念](./docs/常用的JS概念.md)
 * [函数防抖与节流](./src/debounce/index.ts)
 * [React下ECharts的数据驱动探索](./docs/Echats/React下数据驱动.md)
+* [Vue知识点相关](./docs/vue笔记)
+    * [Vue原型的初始化](./docs/vue笔记/01.md)
+    * [面试可能提问关键的几个函数](./docs/vue笔记/02.md)
+    * [Vue对模板的解析](./docs/vue笔记/03.md)
 
 ## 算法
 * [消息队列](./src/RabbitMQ)

docs/vue笔记/01.md

@@ -1,3 +1,4 @@
+![原理图](../../img/reactive.png)
 ## 构造Vue
 ```javascript
 function Vue (opts) {

docs/vue笔记/02.md

@@ -119,6 +119,161 @@ export function defineReactive (
   })
 }
 ```
+```javascript
+const queue: Array<Watcher> = []
+let has: { [key: number]: ?true } = {}
+let waiting = false
+let flushing = false
+/**
+ * Push a watcher into the watcher queue.
+ * Jobs with duplicate IDs will be skipped unless it's
+ * pushed when the queue is being flushed.
+ */
+export function queueWatcher (watcher: Watcher) {
+  const id = watcher.id
+  if (has[id] == null) {
+    has[id] = true
+    if (!flushing) {
+      queue.push(watcher)
+    } else {
+      // if already flushing, splice the watcher based on its id
+      // if already past its id, it will be run next immediately.
+      let i = queue.length - 1
+      while (i > index && queue[i].id > watcher.id) {
+        i--
+      }
+      queue.splice(i + 1, 0, watcher)
+    }
+    // queue the flush
+    if (!waiting) {
+      waiting = true
+      nextTick(flushSchedulerQueue)
+    }
+  }
+}
+```
+每次添加watcher时检查是否存在，只加入不存在的watcher
+
+```javascript
+import { noop } from 'shared/util'
+import { handleError } from './error'
+import { isIOS, isNative } from './env'
+
+const callbacks = []
+let pending = false
+
+function flushCallbacks () {
+  pending = false
+  const copies = callbacks.slice(0)
+  callbacks.length = 0
+  for (let i = 0; i < copies.length; i++) {
+    copies[i]()
+  }
+}
+
+// Here we have async deferring wrappers using both microtasks and (macro) tasks.
+// In < 2.4 we used microtasks everywhere, but there are some scenarios where
+// microtasks have too high a priority and fire in between supposedly
+// sequential events (e.g. #4521, #6690) or even between bubbling of the same
+// event (#6566). However, using (macro) tasks everywhere also has subtle problems
+// when state is changed right before repaint (e.g. #6813, out-in transitions).
+// Here we use microtask by default, but expose a way to force (macro) task when
+// needed (e.g. in event handlers attached by v-on).
+let microTimerFunc
+let macroTimerFunc
+let useMacroTask = false
+
+// Determine (macro) task defer implementation.
+// Technically setImmediate should be the ideal choice, but it's only available
+// in IE. The only polyfill that consistently queues the callback after all DOM
+// events triggered in the same loop is by using MessageChannel.
+/* istanbul ignore if */
+if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
+  macroTimerFunc = () => {
+    setImmediate(flushCallbacks)
+  }
+} else if (typeof MessageChannel !== 'undefined' && (
+  isNative(MessageChannel) ||
+  // PhantomJS
+  MessageChannel.toString() === '[object MessageChannelConstructor]'
+)) {
+  const channel = new MessageChannel()
+  const port = channel.port2
+  channel.port1.onmessage = flushCallbacks
+  macroTimerFunc = () => {
+    port.postMessage(1)
+  }
+} else {
+  /* istanbul ignore next */
+  macroTimerFunc = () => {
+    setTimeout(flushCallbacks, 0)
+  }
+}
+
+// Determine microtask defer implementation.
+/* istanbul ignore next, $flow-disable-line */
+if (typeof Promise !== 'undefined' && isNative(Promise)) {
+  const p = Promise.resolve()
+  microTimerFunc = () => {
+    p.then(flushCallbacks)
+    // in problematic UIWebViews, Promise.then doesn't completely break, but
+    // it can get stuck in a weird state where callbacks are pushed into the
+    // microtask queue but the queue isn't being flushed, until the browser
+    // needs to do some other work, e.g. handle a timer. Therefore we can
+    // "force" the microtask queue to be flushed by adding an empty timer.
+    if (isIOS) setTimeout(noop)
+  }
+} else {
+  // fallback to macro
+  microTimerFunc = macroTimerFunc
+}
+
+/**
+ * Wrap a function so that if any code inside triggers state change,
+ * the changes are queued using a (macro) task instead of a microtask.
+ */
+export function withMacroTask (fn: Function): Function {
+  return fn._withTask || (fn._withTask = function () {
+    useMacroTask = true
+    const res = fn.apply(null, arguments)
+    useMacroTask = false
+    return res
+  })
+}
+
+export function nextTick (cb?: Function, ctx?: Object) {
+  let _resolve
+  callbacks.push(() => {
+    if (cb) {
+      try {
+        cb.call(ctx)
+      } catch (e) {
+        handleError(e, ctx, 'nextTick')
+      }
+    } else if (_resolve) {
+      _resolve(ctx)
+    }
+  })
+  if (!pending) {
+    pending = true
+    if (useMacroTask) {
+      macroTimerFunc()
+    } else {
+      microTimerFunc()
+    }
+  }
+  // $flow-disable-line
+  if (!cb && typeof Promise !== 'undefined') {
+    return new Promise(resolve => {
+      _resolve = resolve
+    })
+  }
+}
+```
+IOS下有一个bug，如果当前没有执行的 task 那么不会执行microtask
+
+
+## 数据的初始化
 * 根据 vm.$options.data 选项获取真正想要的数据（注意：此时 vm.$options.data 是函数）
 * 校验得到的数据是否是一个纯对象
 * 检查数据对象 data 上的键是否与 props 对象上的键冲突

docs/vue笔记/03.md

@@ -9,4 +9,40 @@
 8. 构建 AST 并建立父子级关系是在 start 钩子函数中完成的，每当遇到非一元标签，会把它存到 currentParent 变量中，当解析该标签的子节点时通过访问 currentParent 变量获取父级元素。
 9. 如果一个元素使用了 v-else-if 或 v-else 指令，则该元素不会作为子节点，而是会被添加到相符的使用了 v-if 指令的元素描述对象的 ifConditions 数组中。
 10. 如果一个元素使用了 slot-scope 特性，则该元素也不会作为子节点，它会被添加到父级元素描述对象的 scopedSlots 属性中。
-11. 对于没有使用条件指令或 slot-scope 特性的元素，会正常建立父子级关系。
+11. 对于没有使用条件指令或 slot-scope 特性的元素，会正常建立父子级关系。
+
+## v-for指令
+1. 如果 v-for 指令的值为 'obj in list'，则 alias 的值为字符串 'obj'
+2. 如果 v-for 指令的值为 '(obj, index) in list'，则 alias 的值为字符串 'obj, index'
+3. 如果 v-for 指令的值为 '(obj, key, index) in list'，则 alias 的值为字符串 'obj, key, index'
+4. 如果 alias 字符串的值为 'obj'，则匹配结果 iteratorMatch 常量的值为 null
+5. 如果 alias 字符串的值为 'obj, index'，则匹配结果 iteratorMatch 常量的值是一个包含两个元素的数组：[', index', 'index']
+6. 如果 alias 字符串的值为 'obj, key, index'，则匹配结果 iteratorMatch 常量的值是一个包含三个元素的数组：[', key, index', 'key'， 'index']
+
+## v-if指令
+1. 如果标签使用了 v-if 指令，则该标签的元素描述对象的 el.if 属性存储着 v-if 指令的属性值
+2. 如果标签使用了 v-else 指令，则该标签的元素描述对象的 el.else 属性值为 true
+3. 如果标签使用了 v-else-if 指令，则该标签的元素描述对象的 el.elseif 属性存储着 v-else-if 指令的属性值
+4. 如果标签使用了 v-if 指令，则该标签的元素描述对象的 ifConditions 数组中包含“自己”
+5. 如果标签使用了 v-else 或 v-else-if 指令，则该标签的元素描述对象会被添加到与之相符的带有 v-if 指令的元素描述对象的 ifConditions 数组中。
+
+## 判断管道符
+1. 不在 '' "" `` // 中
+2. 当前字符所对应的 ASCII 码必须是 0x7C，即当前字符必须是管道符。
+3. 该字符的后一个字符不能是管道符。
+4. 该字符的前一个字符不能是管道符。
+5. 该字符不能处于花括号、方括号、圆括号之内
+
+## 判断ref属性
+1. 该标签的元素描述对象会被添加 el.ref 属性，该属性为解析后生成的表达式字符串，与 el.key 类似。
+2. 该标签的元素描述对象会被添加 el.refInFor 属性，它是一个布尔值，用来标识当前元素的 ref 属性是否在 v-for 指令之内使用。
+
+## 解析 slot
+1. 对于 <slot> 标签，会为其元素描述对象添加 el.slotName 属性，属性值为该标签 name 属性的值，并且 name 属性可以是绑定的。
+2. 对于 <template> 标签，会优先获取并使用该标签 scope 属性的值，如果获取不到则会获取 slot-scope 属性的值，并将获取到的值赋值给元素描述对象的 el.slotScope 属性，注意 scope 属性和 slot-scope 属性不能是绑定的。
+3. 对于其他标签，会尝试获取 slot-scope 属性的值，并将获取到的值赋值给元素描述对象的 el.slotScope 属性。
+4. 对于非 <slot> 标签，会尝试获取该标签的 slot 属性，并将获取到的值赋值给元素描述对象的 el.slotTarget 属性。如果一个标签使用了 slot 属性但却没有给定相应的值，则该标签元素描述对象的 el.slotTarget 属性值为字符串 '"default"'
+
+## v-bind指令
+1. 任何绑定的属性，最终要么会被添加到元素描述对象的 el.attrs 数组中，要么就被添加到元素描述对象的 el.props 数组中。
+2. 对于使用了 .sync 修饰符的绑定属性，还会在元素描述对象的 el.events 对象中添加名字为 'update:${驼峰化的属性名}' 的事件

docs/vue笔记/03补充.md

@@ -0,0 +1,26 @@
+function observe (obj) {
+  if (obj.__ob__) {
+    return obj
+  } else {
+    return new Proxy(obj, {
+      get (target, key) {
+        if (typeof target[key] === 'object' && !target.__ob__) {
+          target[key] = observe(target[key])
+          target.__ob__ = true
+        }
+        console.log(`get : ${target[key]}`)
+        return target[key]
+      },
+      set (target, key, val) {
+        console.log(`set ${key} to ${val}`)
+        target[key] = val
+      }
+    })
+  }
+}
+
+const obj = { a: 1 }
+
+const p = observe(obj)
+p.a
+p.a = 3