• Read the source code because flow is red
    • Configuration setting. The json javascript. Validate. “enable” : false
  • The following code does not have syntax highlighting when parsed to generics
    • downloadbabel-javascriptThe plug-in

First rendering process

  • VueInitialization, instance member, static member
  • new Vue()
  • this._init()
  • vm.$mount()
    • src/platforms/web/entry-runtime-with-compiler.js
    • If it’s not passed onrenderTo compile the template torenderfunction
    • compileToFunctions()generaterender() Rendering function
    • options.render = render
  • vm.$mount()
    • src/platforms/web/runtime/index.js
    • mountComponent()
  • mountComponent(this.el)
    • src/core/instance/lifecycle.js
    • Determine if there isrenderOption to send a warning if no template is passed in and the current development environment
    • The triggerbeforeMount
    • defineupdateComponent
    • createWatcherThe instance
    • The triggermounted
    • return vm
  • watcher.get()
    • To create thewatcherWill be called onceget
    • callupdateComponent()
    • callvm._render()createVNode
      • callrender.call(vm._renderProxy, vm.$createElement)
      • Call instantiationVueThe incomingrender()
      • Or compilingtemplateThe generatedrender()
      • returnVNode
    • callvm._update(vnode, ...)

      • Call vm. __Patch__ (vm.$el, vnode) to mount the real DOM

      • Record the vm $el

Data responsivity principle

Solve the following problems by viewing the source code

vm.msg = { count: 0 } // Reassign a value to a property.

vm.arr[0] = 4.// Does the view update when an array element is assigned a value?

vm.arr.length = 0.// If you change the length of the array, does the view update?

vm.arr.push(4), // Whether the view will be updated
Copy the code

An entry point for reactive processing

The whole process of reactive processing is quite complex

  • src/core/instance/init.js
    • initState(vm) vmInitialization of state
    • Initialize the_data,_props,methods 等
  • src/core/instance/state.js
// Data initialization
if (opts.data) {
    initData(vm)
} else {
    observe(vm._data = {}, true /* asRootData */)}Copy the code

Special handling for arrays

Dynamically add a reactive property and related methods

  • Vue.set | vm.$set
  • Vue.delete | vm.$delete

watch

vm.$watch

vm.$watch(expOrFn, callback, [options])

  • function
    • To observe theVueInstance changes an expression or evaluates a property function. The callback function takes new and old values as arguments. The expression only accepts the supervised key path. For more complex expressions, replace them with a function.
  • parameter
    • expOrFn: To monitor$dataProperties in, which can be expressions or functions
    • callback: A function executed after data changes
      • Function: callback function
      • Object: HashandlerProperty (string or function if the property is a stringmethodsThe corresponding definition in
    • options: Optional option
      • deep: Boolean type, deep listening
      • immediate: Boolean, whether to execute a callback immediately
// https://cn.vuejs.org/v2/api/#vm-watch

var vm = new Vue({
  el: '#app'.data: {
    a: '1'.b: '2'.msg: 'Hello Vue'.user: {
      firstName: 'various ge'.lastName: 'bright'}}})// expOrFn is an expression
vm.$watch('msg'.function (newVal, oldVal) {
  // ...
})
Copy the code

Three types of Watcher

  • There’s no static method because$watchIs used in theVueAn instance of the
  • WatcherThere are three kinds:Calculate the property Watcher,User Watcher (listener),Render the Watcher
    • Order of creation:Calculate the property Watcher,User Watcher(listener),Render the Watcher
  • vm.$watch()
    • src/core/instance/state.js

nextTick

Asynchronous update queue – nextTick()

  • VueupdateDOMIs performed asynchronously, refers to
    • The next timeDOMA deferred callback is performed after the update loop is complete, using this method immediately after the data is modified to get the updatedDOM
  • Vm.$nextTicik(function() {// dom})orVue.nexttick(function() {})
  • vm.$nextTick()Code demo
<div id="app">
    <p ref="p1">{{ msg }}</p>
</div>

var vm = new Vue({
  el: "#app".data: {
    msg: "Hello nextTick".name: "vue.js".title: 'title'
  },
  mounted() {
    this.msg = "hello world";
    this.name = "Hello snabbdom"
    this.title = "Vue.js"
    
    this.$nextTick(() = > {
        console.log(this.$refs.p1.textContent)
    })
      
      
  }
})
Copy the code

The source code

  • src/core/instance/render.js
Vue.prototype.$nextTick = function(fn: Function) {
  return nextTick(fn, this)}Copy the code
  • Manual callvm.$nextTick()
  • inWatcher 的 queueWatcherPerformed in thenextTick()
  • src/core/util/next-tick.js
// Take a look at the timerFunc implementation
function nextTick (cb? :Function, ctx? :Object) {
  let _resolve
  // Store cb with exception handling into the Callbacks array
  callbacks.push(() = > {
    if (cb) {
      try {
        / / call the cb ()
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')}}else if (_resolve) {
      _resolve(ctx)
    }
  })
  if(! pending) { pending =true
    / / call
    timerFunc()
  }
  // $flow-disable-line
  if(! cb &&typeof Promise! = ='undefined') {
    // Return the Promise object
    return new Promise(resolve= > {
      _resolve = resolve
    })
  }
}

Copy the code

Summary of responsive principle

Watcher

vm.$watch

vm.$watch(expOrFn, callback, [options])

  • function
    • To observe theVueInstance changes an expression or evaluates a property function. The callback function takes new and old values as arguments. The expression only accepts the supervised key path. For more complex expressions, replace them with a function.
  • parameter
    • expOrFn: To monitor$dataProperties in, which can be expressions or functions
    • callback: A function executed after data changes
      • Function: callback function
      • Object: HashandlerProperty (string or function if the property is a stringmethodsThe corresponding definition in
    • options: Optional option
      • deep: Boolean type, deep listening
      • immediate: Boolean, whether to execute a callback immediately
// https://cn.vuejs.org/v2/api/#vm-watch

var vm = new Vue({
  el: '#app'.data: {
    a: '1'.b: '2'.msg: 'Hello Vue'.user: {
      firstName: 'various ge'.lastName: 'bright'}}})// expOrFn is an expression
vm.$watch('msg'.function (newVal, oldVal) {
  // ...
})
Copy the code