============== vue ==================

  • Jiongks. Name/blog/vue – co…
  • When rendering a DOM tree, the render function takes the highest priority, followed by the template function, which needs to be compiled into a rendering function. OuterHTML is used to compile and render only when the element corresponding to the mount point EL attribute exists.

Vue life cycle:

1. new Vue() - init Events & lifecycle 2. beforeCreate - init injections & reactivity // resolve injections before Data /props // resolve provide after data/props 3. Beforemount-virtual DOM already creates compile template or EL, with render function, Vnode -> virdom tree mounted to the dom 5. Monitor Update 5.1 beforeUpdate Virtual DOM re-render and Patch 5.2 updated 6. BeforeDestroy 7. DestroyedCopy the code
Vue.prototype._init(opt){ ... Merge options... InitLifecycle (VM) callHook(vm, 'beforeCreate'); . Data such as initialization options, depending on collection of Callhooks (VM, 'created'); . Get mounted DOM parent callHook(vm, 'beforeMount'); . _isMounted = true; callHook(vm, 'mounted'); }Copy the code

vue options :

  • Option/Data: data, props, computed, watch, methods, propsData – Used only in instances of new Vue(), distinguished from Component
  • Option/DOM: el, template, render, renderError – Developer mode is valid
  • option/lifehook: lifecycle
  • Option/res: directives – custom commands, filters – | connect to multiple filter, components – components
  • Option/combo: mixins, parent -, extends – extends a component, provide/inject 
    Mixins - Array extends: singleCopy the code

Vue api

Global:

  • Vue.component
  • Vue.use
  • Vue.extend
  • Vue.filter
  • Vue.complile
  • Vue.set
  • Vue.delete
  • Vue.mixin
  • Vue.directive
  • Vue.nextTick

Responsive principle:

  • zhuanlan.zhihu.com/p/53217382
  • www.jianshu.com/p/cdd7dde12…
  1. Core Observer,Dep, Watcher;
  2. The Observer performs data-listening bindings, GET collects dependencies, and set triggers watcher callbacks

The problem

  • How to monitor data? – defineObjectProperty{ set, get}, proxy
  • Data changes, which views to update – Rely on collection, GET (page, watch/computed)
  • When to update – set dependency update

The source code to achieve

  1. DefineObjectProperty overrides set/get, set-listens for changes, and get-relies on collection
  2. Dep – {id:, subs: [watcher]} dep – {id:, subs: [watcher]}
  3. Watcher listens, updates the view

Observer, Dep, Watcher

The Observer provides data listening capabilities. Dep stores data dependencies, WatcherCopy the code
  • Observer : collect dependencies and dispatch updates.
  • Dep:
  • Watcher:
export class Observer {
  dep: Dep;
}
Copy the code
/** * A watcher parses an expression, collects dependencies, * and fires callback when the expression value changes. * This is used for both the $watch() api and directives. */ Export default class Watcher {addDep() {addDep() {update() {addDep() {addDep();}Copy the code
/** * A dep is an observable that can have multiple * directives subscribing to it. */ export default class Dep { static  target: ? Watcher; id: number; subs: Array<Watcher>; constructor () { this.id = uid++ this.subs = [] } addSub (sub: Watcher) { this.subs.push(sub) } removeSub (sub: Watcher) { remove(this.subs, sub) } depend () { if (Dep.target) { Dep.target.addDep(this) } } notify () { // stabilize the subscriber list first const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } }Copy the code

Virtual DOM Diff implementation:

Vue computed Attributes:

Vue Watch attributes: