• 第142篇:原生js实现响应式原理

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

     

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

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

     

    1.给输入框绑个变量

    复制代码
    
    id="input_1">
    复制代码

     

    诶,似乎这样就完成了

    但我们要让他更像vue

     

    2.加上Dep,Watcher

    复制代码
    
"en">
<head>
    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    Document
head>

    id="input_1">
    复制代码

     

    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.补充

    一张响应式原理图

     

  • 相关阅读:
    ThingsBoard开源物联网平台介绍
    JavaScript中多种获取数组最后一个元素的策略。
    【linux】自定义nameserver
    【已解决】vue项目之爆红红红红······
    Java文件上传及下载
    【Linux】进程控制
    鲜花植物配送商城小程序的作用是什么
    系统编程 day08 信号函数（信号量的使用方法，申请信号量初始化信号量 销毁信号的函数 (signal 信号捕捉函数）
    企业级的商用远程控制软件有哪些
    字符设备和杂项设备总结
  • 原文地址：https://www.cnblogs.com/FatTiger4399/p/18066047