揭秘min-vue：从零实现Vue数据响应式原理

2024-02-22 10:22:06

手写一个min-vue

Vue.js凭借其数据响应式系统和虚拟DOM技术，一跃成为最受欢迎的前端框架之一。为了深入理解Vue的运作原理，我们将尝试从头开始构建一个精简版的Vue框架，即min-vue。

准备工作

首先，我们需要准备一个HTML文件，以便验证我们编写的功能是否正常。

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>

    <script src="min-vue.js"></script>
  </body>
</html>

然后，我们在index.html中引入我们即将编写的js文件：

<script src="min-vue.js"></script>

创建min-vue

现在，我们开始创建min-vue.js文件，并逐步实现Vue的核心功能。

// 定义min-vue对象
const minVue = {
  // 初始化函数
  init(options) {
    this.$el = document.querySelector(options.el);
    this.$data = options.data;
    this.$methods = options.methods;

    // 监听data中的属性变化
    this.observe(this.$data);

    // 将data中的属性代理到this上
    this.proxyData(this.$data);

    // 编译模板
    this.compile(this.$el);
  },

  // 监听data中的属性变化
  observe(data) {
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key]);
    });
  },

  // 定义响应式属性
  defineReactive(data, key, val) {
    const dep = new Dep();

    Object.defineProperty(data, key, {
      get() {
        dep.depend();
        return val;
      },
      set(newVal) {
        if (val === newVal) return;

        val = newVal;
        dep.notify();
      }
    });
  },

  // 将data中的属性代理到this上
  proxyData(data) {
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        get() {
          return this.$data[key];
        },
        set(newVal) {
          this.$data[key] = newVal;
        }
      });
    });
  },

  // 编译模板
  compile(el) {
    // ...
  }
};

至此，我们已经创建了一个基本的min-vue框架，它能够监听data中的属性变化，并将其代理到this上，同时可以编译模板，将数据渲染到视图中。

使用min-vue

接下来，我们使用min-vue来创建一个简单的应用：

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="greet">Greet</button>
</div>

const app = new minVue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  },
  methods: {
    greet() {
      this.message = 'Hello, Vue!'
    }
  }
});