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

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

    lifecycle.js

    1. function Vue(options) {
    2.     // 将选项保存到实例的 $options 属性中
    3.     this.$options = options;
    4.  
    5.     // 若存在 beforeCreate 钩子函数，则调用之
    6.     if (typeof options.beforeCreate === 'function') {
    7.         options.beforeCreate.call(this);
    8.     }
    9.  
    10.     // 判断并保存 data 数据对象
    11.     this._data = typeof options.data === 'function' ? options.data() : options.data;
    12.  
    13.     // 将 data 对象中的属性代理到 Vue 实例上
    14.     this._proxyData();
    15.  
    16.     // 若存在 created 钩子函数，则调用之
    17.     if (typeof options.created === 'function') {
    18.         options.created.call(this);
    19.     }
    20.  
    21.     // 执行挂载操作
    22.     this.$mount(options.el);
    23. }
    24.  
    25. Vue.prototype.$mount = function(el) {
    26.     // 将目标元素保存到实例的 $el 属性中
    27.     this.$el = document.querySelector(el);
    28.  
    29.     // 若存在 beforeMount 钩子函数，则调用之
    30.     if (typeof this.$options.beforeMount === 'function') {
    31.         this.$options.beforeMount.call(this);
    32.     }
    33.  
    34.     // 调用 render 方法渲染模板
    35.     this.render();
    36.  
    37.     // 若存在 mounted 钩子函数，则调用之
    38.     if (typeof this.$options.mounted === 'function') {
    39.         this.$options.mounted.call(this);
    40.     }
    41. };
    42.  
    43. Vue.prototype._proxyData = function() {
    44.     var self = this;
    45.     // 遍历 data 对象的属性，并将其代理到 Vue 实例上
    46.     Object.keys(this._data).forEach(function(key) {
    47.         Object.defineProperty(self, key, {
    48.             get: function() {
    49.                 return self._data[key];
    50.             },
    51.             set: function(newValue) {
    52.                 self._data[key] = newValue;
    53.                 // 若存在 beforeUpdate 钩子函数，则调用之
    54.                 if (typeof self.$options.beforeUpdate === 'function') {
    55.                     self.$options.beforeUpdate.call(self);
    56.                 }
    57.                 // 重新渲染模板
    58.                 self.render();
    59.                 // 若存在 updated 钩子函数，则调用之
    60.                 if (typeof self.$options.updated === 'function') {
    61.                     self.$options.updated.call(self);
    62.                 }
    63.             }
    64.         });
    65.     });
    66. };
    67.  
    68. Vue.prototype.render = function() {
    69.     // 调用 render 函数生成模板字符串，并更新目标元素的内容
    70.     if (typeof this.$options.render === 'function') {
    71.         this.$el.innerHTML = this.$options.render.call(this);
    72.     }
    73. };
    74.  
    75. // 使用示例
    76. var app = new Vue({
    77.     el: '#app',  // Vue 实例挂载的目标元素
    78.     data: {      // 数据对象
    79.         message: 'Hello, Vue!'    // 文本数据
    80.     },
    81.     beforeCreate: function() {
    82.         console.log('beforeCreate hook');
    83.     },
    84.     created: function() {
    85.         console.log('created hook');
    86.     },
    87.     beforeMount: function() {
    88.         console.log('beforeMount hook');
    89.     },
    90.     mounted: function() {
    91.         console.log('mounted hook');
    92.     },
    93.     beforeUpdate: function() {
    94.         console.log('beforeUpdate hook');
    95.     },
    96.     updated: function() {
    97.         console.log('updated hook');
    98.     },
    99.     render: function() {
    100.         return '
      ' + this.message + '
      '      ;
    101.     }
    102. });

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

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

    index.html

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Vuetitle>
    7.   head>
    8.   <body>
    9.     <div id="app">div>
    10.     <script src="./lifecycle.js">script>
    11.   body>
    12. html>

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

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

    效果图：

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

    index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9.  
    10. <body>
    11.     <div id="app">div>
    12.     <script>
    13.         // 定义 Vue 类
    14.         function Vue(options) {
    15.             // 保存选项为实例的属性
    16.             this.$options = options;
    17.             // 判断传入的 data 是函数还是对象，并保存到 _data 属性上
    18.             this._data = typeof options.data === 'function' ? options.data() : options.data;
    19.             // 调用编译模板的方法
    20.             this._compileTemplate();
    21.         }
    22.  
    23.         // 原型方法：编译模板
    24.         Vue.prototype._compileTemplate = function () {
    25.             var self = this;
    26.             // 获取模板字符串
    27.             var template = this.$options.template || '';
    28.  
    29.             // 定义一个函数用于对表达式进行求值
    30.             var evalExpression = function (expression) {
    31.                 // 使用 with 关键字将 data 对象的属性添加到作用域中，并求解表达式
    32.                 with (self._data) return eval(expression);
    33.             }
    34.  
    35.             // 将模板中的双括号表达式替换成 data 对应属性的值
    36.             var compiledTemplate = template.replace(/\{\{(.*?)\}\}/g, function (match, expression) {
    37.                 var value = evalExpression(expression);
    38.                 return value !== undefined ? value : '';
    39.             });
    40.  
    41.             // 获取目标元素，并将编译后的模板插入其中
    42.             var element = document.querySelector(this.$options.el);
    43.             element.innerHTML = compiledTemplate.trim();
    44.  
    45.             // 处理带有 v-model 属性的元素，实现数据的双向绑定
    46.             element.querySelectorAll('[v-model]').forEach(function (element) {
    47.                 var value = element.getAttribute('v-model');
    48.                 element.value = self._data[value];
    49.                 element.addEventListener('input', function (event) {
    50.                     self._data[value] = event.target.value;
    51.                 });
    52.             });
    53.  
    54.             // 处理带有 v-text 属性的元素，实现数据的单向绑定
    55.             element.querySelectorAll('[v-text]').forEach(function (element) {
    56.                 var value = element.getAttribute('v-text');
    57.                 element.textContent = self._data[value];
    58.                 // 使用 defineProperty 方法定义 data 对象对应属性的 getter 和 setter
    59.                 Object.defineProperty(self._data, value, {
    60.                     get: function () {
    61.                         return this[value]
    62.                     },
    63.                     set: function (newValue) {
    64.                         element.textContent = newValue;
    65.                     }
    66.                 });
    67.             });
    68.         };
    69.  
    70.         // 使用示例
    71.         var app = new Vue({
    72.             el: '#app',  // Vue 实例挂载的目标元素
    73.             data: {      // 数据对象
    74.                 message: 'Hello, Vue!',    // 文本数据
    75.                 inputValue: 'ChatGPT'      // 输入数据
    76.             },
    77.             template:     // 模板字符串
    78.                 `
    79.           
    80.             
      {{ message }}
    81.             
    82.             
    83.
  • `
  • });
  • script>
  • body>
  • html>

    • 效果图：

    注解：

    • js中with 语句的作用

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

    1. var person = {
    2.   name: 'Alice',
    3.   age: 25,
    4.   greet: function() {
    5.     console.log('Hello, ' + this.name + '!');
    6.   }
    7. };
    8.  
    9. with (person) {
    10.   console.log(name);  // 直接访问属性，输出: Alice
    11.   console.log(age);   // 直接访问属性，输出: 25
    12.   greet();            // 直接调用方法，输出: Hello, Alice!
    13. }
    • template.replace(/\{\{(.*?)\}\}/g, function (match, expression) { ... })

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

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

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

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

    index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9.  
    10. <body>
    11.     <div id="app">div>
    12.     <script>
    13.         // 定义 Vue 类
    14.         function Vue(options) {
    15.             // 将 data、computed 和 watch 选项保存到实例中
    16.             this._data = options.data;
    17.             this._computed = options.computed;
    18.             this._watch = options.watch;
    19.  
    20.             // 数据代理
    21.             this._proxyData();
    22.             // 创建计算属性
    23.             this._createComputed();
    24.             // 创建监听器
    25.             this._createWatchers();
    26.         }
    27.  
    28.         // 数据代理，将 data 中的属性代理到 Vue 实例上，实现直接访问和修改数据
    29.         Vue.prototype._proxyData = function () {
    30.             var self = this;
    31.             Object.keys(this._data).forEach(function (key) {
    32.                 Object.defineProperty(self, key, {
    33.                     get: function () {
    34.                         return self._data[key];
    35.                     },
    36.                     set: function (newValue) {
    37.                         self._data[key] = newValue;
    38.                     }
    39.                 });
    40.             });
    41.         };
    42.  
    43.         // 创建计算属性
    44.         Vue.prototype._createComputed = function () {
    45.             var self = this;
    46.             var computed = this._computed || {};
    47.  
    48.             Object.keys(computed).forEach(function (key) {
    49.                 Object.defineProperty(self, key, {
    50.                     get: function () {
    51.                         return computed[key].call(self);
    52.                     }
    53.                 });
    54.             });
    55.         };
    56.  
    57.         // 创建监听器
    58.         Vue.prototype._createWatchers = function () {
    59.             var self = this;
    60.             var watch = this._watch || {};
    61.  
    62.             Object.keys(watch).forEach(function (key) {
    63.                 var callback = watch[key];
    64.                 var value = self._data[key];
    65.  
    66.                 Object.defineProperty(self._data, key, {
    67.                     get: function () {
    68.                         return value;
    69.                     },
    70.                     set: function (newValue) {
    71.                         value = newValue;
    72.                         callback.call(self, newValue);
    73.                     }
    74.                 });
    75.             });
    76.         };
    77.  
    78.         // 使用示例
    79.         // 创建一个 Vue 实例
    80.         var app = new Vue({
    81.             // 初始化数据
    82.             data: {
    83.                 message: 'Hello, Vue!',
    84.                 firstName: 'John',
    85.                 lastName: 'Doe'
    86.             },
    87.             // 定义计算属性
    88.             computed: {
    89.                 fullName: function () {
    90.                     return this.firstName + ' ' + this.lastName;
    91.                 }
    92.             },
    93.             // 定义监听器
    94.             watch: {
    95.                 message: function (newValue) {
    96.                     console.log('Message changed:', newValue);
    97.                 }
    98.             }
    99.         });
    100.  
    101.         console.log(app.message);       // 输出: Hello, Vue!
    102.         app.message = 'Hello, Vue.js!'; // 输出: Message changed: Hello, Vue.js!
    103.         console.log(app.message);       // 输出: Hello, Vue.js!
    104.         console.log(app.fullName);      // 输出: John Doe
    105.         app.message = 'New message';    // 输出: Message changed: New message
    106.     script>
    107. body>
    108.  
    109. html>

    效果图：

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9.  
    10. <body>
    11.     <div id="app">div>
    12.     <script>
    13.         // 定义事件总线类
    14.         function EventBus() {
    15.             this._events = {};
    16.         }
    17.  
    18.         // 事件总线订阅方法，用于注册事件回调函数
    19.         EventBus.prototype.on = function (eventName, callback) {
    20.             if (!this._events[eventName]) {
    21.                 this._events[eventName] = [];
    22.             }
    23.             this._events[eventName].push(callback);
    24.         };
    25.  
    26.         // 事件总线触发方法，用于触发事件并调用相应的回调函数
    27.         EventBus.prototype.emit = function (eventName, payload) {
    28.             if (this._events[eventName]) {
    29.                 this._events[eventName].forEach(function (callback) {
    30.                     callback(payload);
    31.                 });
    32.             }
    33.         };
    34.  
    35.         // 定义 Vue 类
    36.         function Vue(options) {
    37.             // 初始化数据
    38.             this._data = typeof options.data === 'function' ? options.data() : options.data;
    39.             // 记录方法
    40.             this._methods = options.methods;
    41.             // 创建事件总线实例
    42.             this._eventBus = new EventBus();
    43.  
    44.             // 对数据进行代理，使得可以直接通过 this.xxx 访问和修改数据
    45.             this._proxyData();
    46.             // 对方法进行代理，使得可以通过 this.xxx 调用方法
    47.             this._proxyMethods();
    48.         }
    49.  
    50.         // 数据代理，将 data 中的属性添加到 Vue 实例中，实现直接访问和修改数据
    51.         Vue.prototype._proxyData = function () {
    52.             var self = this;
    53.             Object.keys(this._data).forEach(function (key) {
    54.                 Object.defineProperty(self, key, {
    55.                     get: function () {
    56.                         return self._data[key];
    57.                     },
    58.                     set: function (newValue) {
    59.                         self._data[key] = newValue;
    60.                     }
    61.                 });
    62.             });
    63.         };
    64.  
    65.         // 方法代理，将 methods 中的方法添加到 Vue 实例中，实现通过 this.xxx 调用方法
    66.         Vue.prototype._proxyMethods = function () {
    67.             var self = this;
    68.             var methods = this._methods;
    69.             if (methods) {
    70.                 Object.keys(methods).forEach(function (key) {
    71.                     self[key] = methods[key].bind(self);
    72.                 });
    73.             }
    74.         };
    75.  
    76.         // 发布事件，触发相应的事件回调函数
    77.         Vue.prototype.$emit = function (eventName, payload) {
    78.             this._eventBus.emit(eventName, payload);
    79.         };
    80.  
    81.         // 订阅事件，注册事件回调函数
    82.         Vue.prototype.$on = function (eventName, callback) {
    83.             this._eventBus.on(eventName, callback);
    84.         };
    85.  
    86.         // 创建一个 Vue 实例
    87.         var app = new Vue({
    88.             // 初始化数据
    89.             data: {
    90.                 message: 'Hello, Vue!'
    91.             },
    92.             // 定义方法
    93.             methods: {
    94.                 greet: function () {
    95.                     this.$emit('greet', this.message);
    96.                 },
    97.                 updateMessage: function (newMessage) {
    98.                     this.message = newMessage;
    99.                 }
    100.             },
    101.         });
    102.  
    103.         // 注册 greet 事件的回调函数
    104.         app.$on('greet', function (message) {
    105.             console.log('Greet:', message);
    106.         });
    107.  
    108.         // 调用 greet 方法，触发 greet 事件
    109.         app.greet(); // 输出: Greet: Hello, Vue!
    110.  
    111.         // 调用 updateMessage 方法，修改 message 的值
    112.         app.updateMessage('Hello, World!');
    113.  
    114.         // 再次调用 greet 方法，触发 greet 事件，并输出修改后的 message
    115.         app.greet(); // 输出: Greet: Hello, World!
    116.     script>
    117. body>
    118.  
    119. html>

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9.  
    10. <body>
    11.     <div id="app">div>
    12.     <script>
    13.         // 定义 Vue 构造函数
    14.         function Vue(options) {
    15.             this.$options = options;
    16.             this._data = typeof options.data === 'function' ? options.data() : options.data;
    17.             this._components = options.components || {};
    18.  
    19.             // 代理 data 属性到 Vue 实例上
    20.             this._proxyData();
    21.  
    22.             // 编译模板
    23.             this._compileTemplate();
    24.  
    25.             // 代理组件
    26.             this._proxyComponents();
    27.         }
    28.  
    29.         // 将 data 对象的属性代理到 Vue 实例上
    30.         Vue.prototype._proxyData = function () {
    31.             var self = this;
    32.             Object.keys(this._data).forEach(function (key) {
    33.                 Object.defineProperty(self, key, {
    34.                     get: function () {
    35.                         return self._data[key];
    36.                     },
    37.                     set: function (newValue) {
    38.                         self._data[key] = newValue;
    39.                     }
    40.                 });
    41.             });
    42.         };
    43.  
    44.         // 编译模板
    45.         Vue.prototype._compileTemplate = function () {
    46.             var self = this;
    47.             var el = this.$options.el;
    48.             var template = this.$options.template || '';
    49.  
    50.             // 使用 evalExpression 函数执行模板中的表达式
    51.             var evalExpression = function (expression) {
    52.                 with (self) return eval(expression);
    53.             }
    54.  
    55.             // 替换模板中的双花括号表达式为对应的数据值
    56.             var compiledTemplate = template.replace(/\{\{(.*?)\}\}/g, function (match, expression) {
    57.                 var value = evalExpression(expression);
    58.                 return value !== undefined ? value : '';
    59.             });
    60.  
    61.             // 将编译后的模板插入目标元素中
    62.             var element = el ? document.querySelector(el) : document.createElement('div');
    63.             element.innerHTML = compiledTemplate.trim();
    64.             this.$el = el ? element : element.childNodes[0];
    65.         };
    66.  
    67.         // 代理组件
    68.         Vue.prototype._proxyComponents = function () {
    69.             var self = this;
    70.             var components = this._components;
    71.  
    72.             // 遍历组件对象，创建组件实例并进行代理
    73.             Object.keys(components).forEach(function (componentName) {
    74.                 var component = new Vue(components[componentName]);
    75.  
    76.                 // 查询所有组件标签，并将子组件的内容替换到对应的插槽中
    77.                 self.$el.querySelectorAll(componentName).forEach(function (element) {
    78.                     component.$el.querySelectorAll('slot').forEach(function (slot) {
    79.                         slot.innerHTML = element.innerHTML;
    80.                     });
    81.                     element.innerHTML = component.$el.outerHTML;
    82.                 });
    83.             });
    84.         };
    85.  
    86.         // 使用示例
    87.         var HelloComponent = {
    88.             data: function () {
    89.                 return {
    90.                     name: 'John'
    91.                 };
    92.             },
    93.             template: `
    94.     
    95.       
      {{ name }}
    96.       
    97.
  • `
  • };
  • // 创建 Vue 实例
  • var app = new Vue({
  • el: '#app',
  • data: {
  • message: 'Hello, Vue!'
  • },
  • components: {
  • HelloComponent
  • },
  • template: `

  • {{ message }}

  • `
  • });
  • script>
  • body>
  • html>

  • 相关阅读:
    遥测、遥信、遥控、定值？IEC61850？-----极简记录
    【考研线代】六. 二次型
    MySQL主从同步
    SpringCloud01
    23种设计模式（四）单例模式（阁瑞钛伦特软件-九耶实训）
    Pytorch 实战 LESSON 8 单层回归神经网络 & Tensor新手避坑指南
    【PAT甲级 - C++题解】1078 Hashing
    浅谈postman设置token依赖步骤
    Mysql的基本命令
    [附源码]Python计算机毕业设计Django高校体育场馆管理系统
  • 原文地址：https://blog.csdn.net/weixin_52479803/article/details/132290331