Initialize data
Environment construction: The first step in learning Vue source code of the rookie, rollup environment construction step
The core of responsive data is that when the data changes, the data changes can be monitored, and the data values and changes can be monitored. First, the first step is to create a Vue instance.
Create a Vue instance
//dist/
//Create an instance with Vueconst vm = new Vue({
data(){
return {
name:'ione',
age:18
}
}
})
After creating the Vue instance, you need to have a class to proxy the data in data, but in Vue, you do not directly use class to build a class, because writing in this way will couple all methods together (the characteristics of the class), so Vue itself uses a constructor to extend the method through the constructor.
Constructor extension method
//src/
import { initMixin } from "./init";
function Vue(options){
this._init(options)
}
initMixin(Vue) // Extended init method (will write later)export default Vue
After getting the options option, you need to do an initialization, and you need to add a method to use it for initialization. But if there are many functions, it will be very messy, so you need to split it into two files
export function initMixin(Vue) { //Add an init method to Vue ._init = function (options) { // Used to initialize data }}
In this way, the initMixin method can be called directly. This method can extend these prototype methods into functions and extend functions on the circle through functions.
When using it, you can extend some properties on the current instance, such as vm.$optios in Vue, which is used to obtain user configuration, and then the initialization state is required.
Initialization status
//src/
import { initState } from "./state"
export function initMixin(Vue) { //Add an init method to Vue ._init = function (options) { // Used to initialize data // All properties starting with $ will be considered Vue, such as $nextTick() const vm = this
vm.$options = options // Mount the user's properties on the instance // Initialization status (processed by props, methods, data, etc.) This is worth all instances in the prototype initState(vm)
}
}
The initState method can split it into a new file, hijack the data through the initState method, determine whether the data exists, and then call the initData method to proxy the data.
Call the initData method to proxy the data
//
/src/
export function initState(vm){
// hijacking of data const opts = vm.$options //Get all options if (){
initData(vm)
}
}
function initData(vm){
// Proxy the data let data = vm.$
// data can be a function or object, the root instance can be an object, component data must have a potential function data = typeof data === 'function' ? (vm) : data
(data); // {name: 'iDongdong', age: 18}}
Execute When the console outputs {name: 'iDong', age: 18}, it means that the initialization data is completed
The above is the detailed content of data initialization for Vue source code learning. For more information about Vue data initialization, please pay attention to my other related articles!