index.js

import { initMixin } from "./init"
function Vue(options){
      this._init(options)
}
initMixin(Vue)

export default Vue

init.js

import { initState } from "./state"
export function initMixin(Vue){
    Vue.prototype._init=function(options){
        // $options 获取用户的配置
        const vm=this
        vm.$options=options
        initState(vm)
    }
}

state.js

export function initState(vm){
    const opts=vm.$options
    if(opts.data){
        initData(vm)
    }
}
function initData(vm){
    let data=vm.$options.data
    typeof data==='function'?data.call(this):data
    console.log(data)
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./vue"></script>
    <script>
       const vm=new Vue({
        data(){
          return {
            name:'geyao',
            age:20
          } 
        }
       })
    </script>
</body>
</html>

配置文件

{
  "name": "geyaohandvue2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -cw"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "rollup": "^2.79.1",
    "rollup-plugin-babel": "^4.4.0"
  }
}

运行结果

前端歌谣-第玖拾叁课-手写vue2原理-初始化数据1_Vue