好家伙,狠狠地补一下代码量

 

本篇我们来尝试使用原生js实现vue的响应式

使用原生js,即代表没有v-bind,v-on,也没有v-model，所有语法糖我们都用原生实现

1.给输入框绑个变量

<body>

    <input id="input_1"></input>

</body>

<script>

    let datavalue = "66666"

    const input_1 = document.getElementById("input_1")

    input_1.value = datavalue

    input_1.addEventListener('input', function(e) {

        datavalue = e.target.value

        console.log(datavalue)

    })

</script>

 

诶,似乎这样就完成了

但我们要让他更像vue

2.加上Dep,Watcher

<!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>

<body>

    <input id="input_1"></input>

</body>

<script>

    // 模拟 Vue 实例

    let data = {

        message: 'Hello'

    };

    const input_1 = document.getElementById("input_1")

    input_1.value = data.message

    input_1.addEventListener('input', function (e) {

        e.target.value = data.message

        console.log(datavalue)

    })

    function defineReactive(obj, key, value) {

        let dep = new Dep(); // 依赖容器

        Object.defineProperty(obj, key, {

            get: function () {

                if (Dep.target) {

                    dep.addDep(Dep.target);

                }

                return value;

            },

            set: function (newValue) {

                value = newValue;

                dep.notify();

            }

        });

    }

    // 依赖容器

    function Dep() {

        this.deps = [];

        this.addDep = function (dep) {

            this.deps.push(dep);

        };

        this.notify = function () {

            this.deps.forEach(dep => {

                dep.update();

            });

        };

    }

    Dep.target = null;

    // Watcher

    function Watcher(updateFunc) {

        this.update = updateFunc;

    }

    // 初始化响应式数据

    defineReactive(data, 'message', data.message);

    // 模拟 Watcher

    let watcher = new Watcher(function () {

        console.log('Message updated:', data.message);

        input_1.value = data.message

    });

    // 模拟视图更新

    Dep.target = watcher;

    data.message; // 触发依赖收集

    setTimeout(() => {

        data.message = '6666'; //触发更新

    }, 1000)

</script>

</html>

3.效果图

 

4.代码解释

  1. defineReactive 函数用来定义一个响应式属性，其中通过 Object.defineProperty 给属性添加 getter 和 setter 方法。在 getter 方法中，会判断 Dep.target 是否存在，如果存在则将当前 Watcher 对象添加到依赖容器 Dep 中；在 setter 方法中，更新属性的值，并通过依赖容器 Dep 的 notify 方法通知所有依赖的 Watcher 进行更新。

  2. Dep 函数是一个简单的依赖容器，其中包含了一个 deps 数组用来存储依赖（Watcher），addDep 方法用来添加依赖，notify 方法用来通知所有依赖进行更新。

  3. Watcher 函数用来创建 Watcher 对象，其中包含一个 update 方法，用来在属性发生变化时执行相应的更新操作。

  4. 在初始化响应式数据时，调用 defineReactive 函数定义了一个名为 message 的响应式属性。

  5. 创建了一个 Watcher 对象 watcher，并在其构造函数中定义了一个回调函数，用来在属性变化时输出消息并更新视图。

  6. 将 watcher 赋值给 Dep.target，然后访问 data.message，触发依赖收集，将 watcher 添加到依赖容器 Dep 中。

5.补充

一张响应式原理图

 

第142篇:原生js实现响应式原理的更多相关文章

  1. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  2. Vue.js响应式原理

      写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...

  3. Glide.js：响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

  4. Vue.js学习 Item12 – 内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...

  5. 利用JS去做响应式布局

    利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...

  6. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  7. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  8. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  9. Vue 源码解读（3）—— 响应式原理

    前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...

  10. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...

随机推荐

  1. 史上最大电池！小米智能家庭屏Pro 8图赏

    今天小米智能家庭屏 Pro 8正式开售,集智能家居中控,智能网关以及娱乐教育三大功能为一体,首发749元. 它是一款全新的智能生态产品中控屏,配备了7500mAh大容量电池以及通用性更好的USB Ty ...

  2. P4145 上帝造题的七分钟 2 / 花神游历各国 题解

    题目链接:上帝造题的七分钟2/花神游历各国 差不多的题:[Ynoi Easy Round 2023] TEST_69 注意到对某个点来说暴力单点即为反复的:\(x=\sqrt{x}\),最终为 \(1 ...

  3. 2022年“腾讯杯”大学生程序设计竞赛 死去的 Elo 突然开始攻击我 题解

    题目链接:死去的 Elo 突然开始攻击我 容易知道,如果暴力对某个区间而言进行查询,我们可以考虑使用并查集,开一个桶,每次添加一个数 \(val\),那么如果已经存在了 \(val-1\) 或者 \( ...

  4. XmlDocument 解决 Clone、CloneNode、ImportNode 等节点克隆后的标签自闭合问题

    前言: 这两天在对 Taurus.Mvc 做 html 加载性能优化时,发现存在这个问题. 具体优化的是 CYQ.Data 组件的 XHtmlAction 相关类. 问题过程: 之前 XmlDocum ...

  5. 小结_第一个Java程序

    总结: 1. Java程序的编写与执行: 步骤1: 编写. 在后缀名为.java的文件中编写Java代码,该文件称为源文件 步骤2: 编译. 针对后缀名为.java源文件进行编译,生成字节码文件. 格 ...

  6. 洛谷P2415 集合求和（数学问题，使用集合子集求和公式）

    可以知道对于一个有n个数据的集合,其子集个数有2^n个 至于证明可以这样理解,对于n个数据,其子集就是对数据进行组和,而对于每个位置上的数据,组合时仅有两种状态即有此数据或无此数据,也就是有两种可能, ...

  7. 《ASP.NET Core 与 RESTful API 开发实战》-- （第7章）-- 读书笔记（中）

    第 7 章 高级主题 7.2 并发 当两个用户获取同一个资源后,再同时修改该资源,就会导致并发问题 常见实现并发的方法有以下两种: 保守式并发控制,每次修改资源,都锁定资源 开放式并发控制,每次修改资 ...

  8. NC16666 [NOIP2006]开心的金明

    题目链接 题目 题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只 ...

  9. 多层PCB的制造工艺流程

    多层PCB的制造工艺流程 多层板制造方法有电镀通孔法以及高密度增层法两种,都是通过不同工艺的组合来实现电路板结构.其中目前采用最多的是电镀通孔法,电镀通孔法经过超过半个世纪的发展与完善,电镀通孔法无论 ...

  10. maven打包更改版本号

    引入依赖 <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>versions-mave ...