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

最新推荐文章于 2024-09-16 13:17:20 发布

前端歌谣

最新推荐文章于 2024-09-16 13:17:20 发布

阅读量296

点赞数 11

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_41632427/article/details/134664012

版权

歌谣-最强学习合集专栏收录该内容

114 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Vue项目中使用mixins进行实例初始化，以及`initState`函数对数据的处理，通过`index.js`,`init.js`,和`state.js`文件展示了配置和数据初始化的步骤。

摘要由CSDN通过智能技术生成

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"
  }
}