1. nextTick
The next time dom Perform after the update cycle delayed callback which you can use to get more after the new dom status
The new version of the default is mincrotasks, v-on that heats Use
macrotasks macrotasks task of implementation:
setImmediate / MessageChannel / setTimeout
2. ⽣ life cycle
init
initLifecycle / Event, to mount the various attributes vm
callHook: beforeCreated: instance just created
initInjection / initState: Initialization Note START and data responsive
created: created, the property has been bound , but not yet ⽣ into real dom`
⾏ elements into the mount : $ EL / vm $ Mount ().
Are there template: resolve to render function
* .vue files member : vue-loader will be <template> compiled translated into a render function
Before compiling template / mount: beforeMount
Perform render function, ⽣ into true dom, and for the change to the dom tree in
mounted: Mounted Components update
Perform diff algorithm, ⽐ for change is no need to trigger UI update
flushScheduleQueue
watcher.before: Trigger beforeUpdate hook submenus - watcher.run (): Perform watcher in
notify, inform all dependencies are updated UI trigger updated hook submenus: Component updated
actived / deactivated (keep-alive): not destroyed, cache, activation and deactivation of components
destroy
beforeDestroy: Destruction begin
The self-destruction of the body and recursive destroy submenus components and event listeners
remove (): Delete Node
watcher.teardown (): Empty dependent
. Vm $ off (): listens unbundling
destroyed: After completing the trigger hook submenus
On ⾯ is simple sort lifecycle of vue, then we directly in the form of code to complete the initialization of vue
new view ({}) // initialize instance Vue function _init() { // Mount Properties initLifeCycle(vm) // initialize event system, submenus hook functions, etc. initEvent(vm) // compile slot, vnode initRender (vm) // trigger hook submenus callHook (vm, 'beforeCreate' ) // add inject function initInjection(vm) // completion data responsive props / data / watch / computed / methods initState (vm) // add functionality provide initProvide(vm) // trigger hook submenus callHook (vm, 'the Created' ) // mount node if (vm.$options.el) { vm.$mount(vm.$options.el) } } // mount node implements function mountComponent(vm) { // get render function if (!this.options.render) { // template to render // Vue.compile = compileToFunctions let { render } = compileToFunctions() this.options.render = render } // trigger hook submenus callHook ( 'beforeMounte' ) // initialize observer // the render rendered VDOM, VDOM = vm.render () // Update: Mount into real dom vm._update (vdom) according to diff out patchs // trigger hook submenus callHook (vm, 'Mounted' ) } // update the node to achieve funtion queueWatcher(watcher) { nextTick(flushScheduleQueue) } // Clear the queue function flushScheduleQueue() { // traverse the queue of all modifications for(){ // beforeUpdate watcher.before() // dependent partial update node watcher.update () callHook ( 'updated' ) } } // destruction example implementation Vue.prototype. Destory $ = function () { // trigger hook submenus callHook (vm, 'beforeDestory' ) // Auto Body and submenus node remove() // remove the dependency watcher.teardown() // remove the listener vm.$off() // trigger hook submenus callHook (vm, 'destoryed' ) }
j
3.Proxy phase ⽐ to defineProperty advantage
An array of changes can be monitored
You do not need to monitor the depth of traversal
let data = { a: 1 }
let reactiveData = new Proxy(data, {
get: function(target, name){
// ...
},
// ...
})
4. order-router
mode
hash
history
Jump
this.$router.push()
<router-link to=""></router-link>
Placeholder
<router-view></router-view>
5. vuex
state: the state Center Weighted
mutations: Change Status
actions: Asynchronous Change Status
getters: Get Status
modules: the state into a plurality of two modules, easy to manage