State initialization of Vue source code exploration

// Define and export the initState function and receive the parameters vmexport function initState (vm: Component) {
 // Initialize the private attributes of the instance _watchers // This is the object that will be used in the observation system to store all the explicit monitors vm._watchers = []
 // Get the configuration object of the instance const opts = vm.$options
 // If props are defined, initialize props if () initProps(vm, )
 // If methods are defined, methods are initialized if () initMethods(vm, )
 // If data is defined, then data is initialized if () {
 initData(vm)
 } else {
 // Otherwise, the private property of the instance is initialized as an empty object and enable observation observe(vm._data = {}, true /* asRootData */)
 }
 // If computed is defined, the computed attribute is initialized if () initComputed(vm, )
 // If the watch is defined and not nativeWatch, then the watch is initialized // nativeWatch is the prototype method of the object defined under Firefox browser if ( &&  !== nativeWatch) {
 initWatch(vm, )
 }
}

// Define shared property definition descriptor object sharedPropertyDefinition// Both the enumeration and configurable properties of the descriptor object are set to true// Set methods are set to empty functionsconst sharedPropertyDefinition = {
 enumerable: true,
 configurable: true,
 get: noop,
 set: noop
}

// Define and export the proxy function, which is used to define and proxy properties on the target object// Receive three parameters: target, path key name sourceKey, attribute key nameexport function proxy (target: Object, sourceKey: string, key: string) {
 // Set the get method of the attribute descriptor object  = function proxyGetter () {
 return this[sourceKey][key]
 }
 // Setting a set of attribute descriptive objects is illegal  = function proxySetter (val) {
 this[sourceKey][key] = val
 }
 // Define attributes on target object (target, key, sharedPropertyDefinition)
}

// Define the initProps function, receive two parameters: vm and propsOptionsfunction initProps (vm: Component, propsOptions: Object) {
 // Assign propsData, propsData is the assignment object passed in by global extension // It will be used when using extend, and it is less used in actual development const propsData = vm.$ || {}
 // Define the _props private property of the instance and assign it to props const props = vm._props = {}
 // Cache prop keys so that future prop updates can be iterated using Array instead of dynamic object key enumeration. // cache prop keys so that future props updates can iterate using Array
 // instead of dynamic object key enumeration.
 const keys = vm.$options._propKeys = []
 // Is it a root instance const isRoot = !vm.$parent
 // For non-root instances, turn off the observation flag // root instance props should be converted
 if (!isRoot) {
 toggleObserving(false)
 }
 // traverse props configuration object for (const key in propsOptions) {
 // Add key name to cache key value array (key)
 // Verify the value of the prop, validateProp performs type checking and default assignment of the initialized defined props // If there is a definition type check, if the boolean value has no default value, the string will be assigned false by default. // Comparison of propsOptions is also meaningful when using extend extension // For specific implementation, please refer to src/core/util/. There are no difficulties and will not explain in detail here. const value = validateProp(key, propsOptions, propsData, vm)

 // Check and prompt in non-production environment /* istanbul ignore else */
 if (.NODE_ENV !== 'production') {
  // Convert key names to convert camel to hyphen key names  const hyphenatedKey = hyphenate(key)
  // Give a prompt for key names that conflict with the reserved variable name  if (isReservedAttribute(hyphenatedKey) ||
   (hyphenatedKey)) {
  warn(
   `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
   vm
  )
  }
  // Establish observations on attributes and give warnings when using attributes directly  defineReactive(props, key, value, () => {
  if (vm.$parent && !isUpdatingChildComponent) {
   warn(
   `Avoid mutating a prop directly since the value will be ` +
   `overwritten whenever the parent component re-renders. ` +
   `Instead, use a data or computed property based on the prop's ` +
   `value. Prop being mutated: "${key}"`,
   vm
   )
  }
  })
 } else {
  // Direct accessor packaging of attributes in non-production environments and establish dependency observations  defineReactive(props, key, value)
 }
 // When extending attributes using the() method, the static attributes have been proxied. // Here you only need to perform proxy operations on the properties during instantiation // static props are already proxied on the component's prototype
 // during (). We only need to proxy props defined at
 // instantiation here.
 // When there is no attribute of the same name on the instance, perform proxy operations on the attribute // Point the reference to the key name to the vm._props object if (!(key in vm)) {
  proxy(vm, `_props`, key)
 }
 }
 // Turn on the observation status flag toggleObserving(true)
}

// Define the initData functionfunction initData (vm: Component) {
 // Get the data attribute of the configuration object let data = vm.$
 // Determine whether data is a function // If it is a function, assign the return of the getData function to data and instance private attributes_data // Otherwise, directly assign data to the instance_data attribute and assign null objects when there is no data data = vm._data = typeof data === 'function'
 ? getData(data, vm)
 : data || {}
 // If data is not an object, assign data to an empty object // Further ensure that data is the object type if (!isPlainObject(data)) {
 data = {}
 // Give warning prompts in non-production environment .NODE_ENV !== 'production' && warn(
  'data functions should return an object:\n' +
  '/v2/guide/#data-Must-Be-a-Function',
  vm
 )
 }
 // Instance object proxy data // proxy data on instance
 // Get all data key values const keys = (data)
 // Get the props of the configuration object const props = vm.$
 // Get the methods of the configuration object const methods = vm.$
 // traverse keys let i = 
 while (i--) {
 const key = keys[i]
 // Non-production environment gives warnings that conflict with the method name defined by methods if (.NODE_ENV !== 'production') {
  if (methods && hasOwn(methods, key)) {
  warn(
   `Method "${key}" has already been defined as a data property.`,
   vm
  )
  }
 }
 // Detect whether it conflicts with props if (props && hasOwn(props, key)) {
  // Non-production environment gives conflict warnings  .NODE_ENV !== 'production' && warn(
  `The data property "${key}" is already declared as a prop. ` +
  `Use prop default value instead.`,
  vm
  )
 // When there is no conflict with props and non-reserved words, the proxy key name is on the instance's _data object } else if (!isReserved(key)) {
  proxy(vm, `_data`, key)
 }
 }
 // Observe the data // observe data
 observe(data, true /* asRootData */)
}

// Define and export getData function, accept function type data objects, and Vue instance objectsexport function getData (data: Function, vm: Component): any {
 // pushTarget and popTarget are to solve the problem that the defect of Vue dependency detection may lead to redundant dependency // For details, please refer to /vuejs/vue/issues/7573 // This operation will be set to undefined, and calling() when initializing option will not create a dependency // #7573 Disable dep collection when calling data getter // #7573 disable dep collection when invoking data getters
 pushTarget()
 // Try to call the data function on the vm and return the execution result try {
 return (vm, vm)
 } catch (e) {
 // If an error is caught, the error will be processed and an empty object will be returned handleError(e, vm, `data()`)
 return {}
 } finally {
 popTarget()
 }
}

// Set computedWatcherOptions objectconst computedWatcherOptions = { computed: true }

// Define the initComputed function, accept instance vm, and computed objectfunction initComputed (vm: Component, computed: Object) {
 // $flow-disable-line
 // Define watchers and instance_computedWatchers attributes, initially assign null objects const watchers = vm._computedWatchers = (null)
 // Whether it is a server rendering, the computed property can only be a getter during server rendering // computed properties are just getters during SSR
 const isSSR = isServerRendering()

 // traversal computed for (const key in computed) {
 // Get user-defined values const userDef = computed[key]
 // If the user defines a function, then assign to getter Otherwise j will assign the method to getter const getter = typeof userDef === 'function' ? userDef : 
 // Non-production environment throws an error warning of missing calculation attributes if (.NODE_ENV !== 'production' && getter == null) {
  warn(
  `Getter is missing for computed property "${key}".`,
  vm
  )
 }

 // under non-server rendering if (!isSSR) {
  // Create an internal monitor for computed properties  // create internal watcher for the computed property.
  watchers[key] = new Watcher(
  vm,
  getter || noop,
  noop,
  computedWatcherOptions
  )
 }

 // The internal computed properties defined by the component have been defined on the component's prototype // So here we just focus on the user-defined calculation properties when instance initialization // component-defined computed properties are already defined on the
 // component prototype. We only need to define computed properties defined
 // at instantiation here.
 // When the key name is not an instance root property, define the computed property, refer to the definedComputed function for details. if (!(key in vm)) {
  defineComputed(vm, key, userDef)
 // In non-production environment, detect conflicts with data attribute names and give warnings } else if (.NODE_ENV !== 'production') {
  if (key in vm.$data) {
  warn(`The computed property "${key}" is already defined in data.`, vm)
  } else if (vm.$ && key in vm.$) {
  warn(`The computed property "${key}" is already defined as a prop.`, vm)
  }
 }
 }
}

// Define and export defineComputed Ha number// Receive instance target, calculate attribute key name key, calculate attribute value userDef parameterexport function defineComputed (
 target: any,
 key: string,
 userDef: Object | Function
) {
 // Set up cache under non-server rendering const shouldCache = !isServerRendering()
 // When calculating the property value is a function if (typeof userDef === 'function') {
 // Set the getter for the calculated attribute, the setter is an empty function  = shouldCache
  ? createComputedGetter(key)
  : userDef
  = noop
 } else {
 // When the computed attribute is an object, set the getter and setter of the computed attribute  = 
  ? shouldCache &&  !== false
  ? createComputedGetter(key)
  : 
  : noop
  = 
  ? 
  : noop
 }
 // In a non-production environment, if there is no setter that defines the calculation attribute // Give a warning when you want to set the calculation properties if (.NODE_ENV !== 'production' &&
   === noop) {
  = function () {
  warn(
  `Computed property "${key}" was assigned to but it has no setter.`,
  this
  )
 }
 }
 // Define the calculated attribute on the instance object based on the reset attribute descriptor (target, key, sharedPropertyDefinition)
}

// Define createComputedGetter and create computed property getter// The purpose is to establish observation dependencies for computed attributes in non-server rendering situations.// and return the calculated value based on its dependency attributefunction createComputedGetter (key) {
 return function computedGetter () {
 const watcher = this._computedWatchers && this._computedWatchers[key]
 if (watcher) {
  ()
  return ()
 }
 }
}

// Define the initMethods method, accept the instance vm, and configure the attribute methodsfunction initMethods (vm: Component, methods: Object) {
 // Get the props of the instance const props = vm.$
 // traverse the methods object for (const key in methods) {
 // Warning is given in non-production environments if (.NODE_ENV !== 'production') {
  // Unassigned method warning  if (methods[key] == null) {
  warn(
   `Method "${key}" has an undefined value in the component definition. ` +
   `Did you reference the function correctly?`,
   vm
  )
  }
  // Warning of conflict with props attribute name  if (props && hasOwn(props, key)) {
  warn(
   `Method "${key}" has already been defined as a prop.`,
   vm
  )
  }
  // Conflict with reserved words warning  if ((key in vm) && isReserved(key)) {
  warn(
   `Method "${key}" conflicts with an existing Vue instance method. ` +
   `Avoid defining component methods that start with _ or $.`
  )
  }
 }
 // Define the method on the instance, assign the value to the user undefined function or the empty function vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
 }
}

// Define the initWatch function, accept the instance vm and configuration property watchfunction initWatch (vm: Component, watch: Object) {
 // traverse the watch for (const key in watch) {
 // The value of the temporary attribute is saved const handler = watch[key]
 // If handler is an array if ((handler)) {
  // traverse the array to create a corresponding watcher for each element  for (let i = 0; i < ; i++) {
  createWatcher(vm, key, handler[i])
  }
 } else {
  //Otherwise the handler should be a function, directly create a watcher for the key  createWatcher(vm, key, handler)
 }
 }
}

// Define the createWatcher function// Accept instance vm, expression or function expOrFn, processor handler, optional optionsfunction createWatcher (
 vm: Component,
 expOrFn: string | Function,
 handler: any,
 options?: Object
) {
 // If handler is an object if (isPlainObject(handler)) {
 // Assign handler to options. options = handler
 // Reassign handler handler = 
 }
 // If the handler is a string, look for the handler on the instance and assign it to the handler if (typeof handler === 'string') {
 handler = vm[handler]
 }
 // Create an observation and return return vm.$watch(expOrFn, handler, options)
}

// Define and export the stateMixin function and receive the parameter Vueexport function stateMixin (Vue: Class<Component>) {
 // When using the method to declare the object directly, a problem will occur in flow // So the object must be defined programmatically here // flow somehow has problems with directly declared definition object
 // when using , so we have to procedurally build up
 // the object here.
 // Define dataDef object const dataDef = {}
 // Define the get method of dataDef and return the private attribute of Vue instance _data  = function () { return this._data }
 // Define propsDef object const propsDef = {}
 // Define the get method of propsDef and return the private attribute of the Vue instance _props  = function () { return this._props }
 // Define the set method of dataDef and propsDef in non-production environment if (.NODE_ENV !== 'production') {
 // The set method of dataDef receives newData parameters of Object type  = function (newData: Object) {
  // Prompt to avoid overwriting the property $data incoming objects  // It is recommended to use nested data attributes instead  warn(
  'Avoid replacing instance root $data. ' +
  'Use nested data properties instead.',
  this
  )
 }
 // Set the set method of propsDef to read-only  = function () {
  warn(`$props is readonly.`, this)
 }
 }
 // Define the public property $data of the Vue prototype object and assign the value to dataDef (, '$data', dataDef)
 // Define the public property $props of the Vue prototype object and assign the value to propsDef (, '$props', propsDef)

 // Define the $set method of the Vue prototype object and assign it to the set function imported from the observer .$set = set
 // Define the $delete method of the Vue prototype object and assign it to the del function imported from the observer .$delete = del

 // Define the $watch method of Vue prototype object // Receive expOrFn of string or function type, and you can see from the naming that you want to be an expression or function // Receive any type of cb, here it is called a callback function or an object // Receive object type options // Requires return function type .$watch = function (
 expOrFn: string | Function,
 cb: any,
 options?: Object
 ): Function {
 // Assign the instance to the vm variable, the type must be Component const vm: Component = this
 // If cb is pure object type if (isPlainObject(cb)) {
  // Return the createWatcher function  return createWatcher(vm, expOrFn, cb, options)
 }
 // Define the options for the observation target, which is undefined in most cases options = options || {}
 // The user attribute value of the defined options is true, and the identifier is user-defined  = true
 // Create a watcher instance const watcher = new Watcher(vm, expOrFn, cb, options)
 // If the immediate of options is true if () {
  // Call the cb callback function on vm and pass it as a parameter  (vm, )
 }
 // Return unwatchFn function return function unwatchFn () {
  // Execute the() method to clear the observation  ()
 }
 }
}