【js&vue】联合gtp仿写一个简单的vue框架，以此深度学习JavaScript

用 gtp 学习 Vue 生命周期的原理

lifecycle.js

function Vue(options) {
    // 将选项保存到实例的 $options 属性中
    this.$options = options;

    // 若存在 beforeCreate 钩子函数，则调用之
    if (typeof options.beforeCreate === 'function') {
        options.beforeCreate.call(this);
    }

    // 判断并保存 data 数据对象
    this._data = typeof options.data === 'function' ? options.data() : options.data;

    // 将 data 对象中的属性代理到 Vue 实例上
    this._proxyData();

    // 若存在 created 钩子函数，则调用之
    if (typeof options.created === 'function') {
        options.created.call(this);
    }

    // 执行挂载操作
    this.$mount(options.el);
}

Vue.prototype.$mount = function(el) {
    // 将目标元素保存到实例的 $el 属性中
    this.$el = document.querySelector(el);

    // 若存在 beforeMount 钩子函数，则调用之
    if (typeof this.$options.beforeMount === 'function') {
        this.$options.beforeMount.call(this);
    }

    // 调用 render 方法渲染模板
    this.render();

    // 若存在 mounted 钩子函数，则调用之
    if (typeof this.$options.mounted === 'function') {
        this.$options.mounted.call(this);
    }
};

Vue.prototype._proxyData = function() {
    var self = this;
    // 遍历 data 对象的属性，并将其代理到 Vue 实例上
    Object.keys(this._data).forEach(function(key) {
        Object.defineProperty(self, key, {
            get: function() {
                return self._data[key];
            },
            set: function(newValue) {
                self._data[key] = newValue;
                // 若存在 beforeUpdate 钩子函数，则调用之
                if (typeof self.$options.beforeUpdate === 'function') {
                    self.$options.beforeUpdate.call(self);
                }
                // 重新渲染模板
                self.render();
                // 若存在 updated 钩子函数，则调用之
                if (typeof self.$options.updated === 'function') {
                    self.$options.updated.call(self);
                }
            }
        });
    });
};

Vue.prototype.render = function() {
    // 调用 render 函数生成模板字符串，并更新目标元素的内容
    if (typeof this.$options.render === 'function') {
        this.$el.innerHTML = this.$options.render.call(this);
    }
};

// 使用示例
var app = new Vue({
    el: '#app',  // Vue 实例挂载的目标元素
    data: {      // 数据对象
        message: 'Hello, Vue!'    // 文本数据
    },
    beforeCreate: function() {
        console.log('beforeCreate hook');
    },
    created: function() {
        console.log('created hook');
    },
    beforeMount: function() {
        console.log('beforeMount hook');
    },
    mounted: function() {
        console.log('mounted hook');
    },
    beforeUpdate: function() {
        console.log('beforeUpdate hook');
    },
    updated: function() {
        console.log('updated hook');
    },
    render: function() {
        return '
' + this.message + '
';
    }
});

注解：
this.$options.beforeMount.call(this);与 this.$options.beforeMount();有什么区别：

• call(this) 的作用是将当前对象（this）作为参数传递给 beforeMount 方法，使得在 beforeMount 方法内部可以通过 this 访问到当前对象的上下文
• 直接调用了 beforeMount 方法，没有指定上下文 

index.html

在浏览器查看渲染结果，并在控制台查看日志输出

另外，我们可以在控制输入 app.message = 'ChatGPT' 来验证数据绑定以及页面更新机制

效果图：

用 gtp 学习 Vue 模板语法和指令的原理

index.html

效果图：

注解：

• js中with 语句的作用

with语句的作用是简化代码，使得可以在该作用域内直接访问对象的属性和方法，而无需重复使用对象名字的前缀

var person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log('Hello, ' + this.name + '!');
  }
};

with (person) {
  console.log(name);  // 直接访问属性，输出: Alice
  console.log(age);   // 直接访问属性，输出: 25
  greet();            // 直接调用方法，输出: Hello, Alice!
}

• template.replace(/\{\{(.*?)\}\}/g, function (match, expression) { ... })

是一个正则表达式替换的方法，用于处理模板中的双花括号表达式 {{expression}}，回调函数接收两个参数：

  match：匹配到的整个字符串，即 {{expression}}。

  expression：匹配到的表达式，即 expression。

 用 gtp 学习 Vue 数据监听和计算属性的原理

index.html

效果图：

用 gtp 学习 Vue 事件处理和方法的原理

用 gtp 学习 Vue 插槽（slot）的原理