这篇文章主要为大家介绍了Vue源码学习之数据初始化实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
初始化数据
响应式数据的核心就是，数据变化了可以监听到数据变化了，数据的取值和更改值可以监测到,首先第一步需要创建一个Vue实例
创建Vue实例
//dist/index.html //用Vue创造一个实例 const vm = new Vue({ data(){ return { name:'i东东', age:18 } } }) 创造完 Vue实例，紧接着就需要有一个类去代理data中的数据，但是在Vue中并没有直接去用class去构建一个类，因为这样写会将所有的方法都耦合在一起(类的特点)，所以Vue本身采用了一个构造函数，通过构造函数去扩展方法。
构造函数扩展方法
//src/index.js import { initMixin } from "./init"; function Vue(options){ this._init(options) } initMixin(Vue) // 扩展了init方法 (后面会写) export default Vue 在拿到options选项之后需要做一个初始化，就需要加一个方法来用于初始化。但是如果功能一多，就很比较乱，所以就需要把它拆成两个文件
export function initMixin(Vue) { //给Vue增加init方法 Vue.prototype._init = function (options) { //用来初始化数据 } } 这样就可以直接在index.js中调用initMixin方法,这种方法，就可以把这些原型方法扩展成一个个函数，通过函数的方式在圆形上去扩展功能。
在用的时候就可以在当前实例上扩展一些属性，比如Vue中的vm.$optios,就是用来获取用户配置的,紧接着就需要进行初始化状态
初始化状态
//src/init.js import { initState } from "./state" export function initMixin(Vue) { //给Vue增加init方法 Vue.prototype._init = function (options) { //用来初始化数据 // 所有以$开头的都会被认为是Vue的属性，比如$nextTick() const vm = this vm.$options = options // 将用户的属性挂载到实例上 // 初始化状态(props,methods,data等进行处理)原型中的this值得都是实例 initState(vm) } } initState方法可以将它进行拆分到一个新的文件中,通过initState方法对数据进行劫持，判断数据是否存在，然后调用initData方法对数据进行代理
调用initData方法对数据进行代理
// /src/state.js export function initState(vm){ // 对数据需要进行劫持 const opts = vm.$options //获取所有选项 if (opts.data){ initData(vm) } } function initData(vm){ // 对数据进行代理 let data = vm.$options.data // data可以是函数或者对象，根实例可以是对象，组件data必须势函数 data = typeof data === 'function' ? data.call(vm) : data console.log(data); // {name: 'i东东', age: 18} } 执行index.html 当控制台输出{name: 'i东东', age: 18}就表示初始化数据完成
以上就是Vue源码学习之数据初始化的详细内容，更多关于Vue 数据初始化的资料请关注0133技术站其它相关文章！
以上就是Vue源码学习之数据初始化的详细内容，更多请关注0133技术站其它相关文章！
