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

最新推荐文章于 2024-06-25 09:04:20 发布

置顶 Combarbala

最新推荐文章于 2024-06-25 09:04:20 发布

阅读量275

点赞数 1

CC 4.0 BY-SA版权

分类专栏：挂载组件文章标签： vue

本文链接：https://blog.youkuaiyun.com/Combarlala/article/details/108320664

挂载同时被 2 个专栏收录

1 篇文章

订阅专栏

组件

1 篇文章

订阅专栏

本文深入剖析了如何从零开始构建一个简易版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>