简易Vue挂载组件实例,记录一下

本文深入剖析了如何从零开始构建一个简易版Vue.js框架,通过定义核心构造函数及其实现,包括数据响应式处理、方法绑定以及生命周期钩子的调用。此框架虽精简,却涵盖了Vue的基本原理,适合初学者理解Vue的内部运作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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>
  <script>
    function Vue(options) {
      let me = this;
      this.#el = options.el // 挂载的dom
      void (function _setData() { // 私有方法:设置实例data
        if (Object.keys(options.data()).length < 1) return;
        Object.keys(options.data()).forEach((x) => {
          me[x] = options.data()[x];
        });
      })();
      void (function _setMethods() { // 私有方法:设置实例metods
        Object.keys(options.methods).forEach((x) => {
          me[x] = options.methods[x].bind(me);
        });
      })();
      options.created.call(this); 绑定当前作用域
      options.mounted.call(this); 绑定当前作用域
    }
    Vue.prototype.$setData = function (key, val) { // 原型链中设置function
      this[key] = val; 
    };
    let options = {
      el: "#divBody",
      data() {
        return {
          c: 3,
        };
      },
      created() {
        this.$setData("a", 1);
        this.getData();
      },
      mounted() {
        this.$setData("b", { b: this.a + 1 });
      },
      methods: {
        getData() {
          console.log(this);
        },
      },
    };
    let VueChildren = new Vue(options); // 组件实例
  </script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值