第142篇:原生js实现响应式原理
好家伙,狠狠地补一下代码量
本篇我们来尝试使用原生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.代码解释
defineReactive
函数用来定义一个响应式属性,其中通过Object.defineProperty
给属性添加 getter 和 setter 方法。在 getter 方法中,会判断Dep.target
是否存在,如果存在则将当前 Watcher 对象添加到依赖容器 Dep 中;在 setter 方法中,更新属性的值,并通过依赖容器 Dep 的notify
方法通知所有依赖的 Watcher 进行更新。Dep
函数是一个简单的依赖容器,其中包含了一个 deps 数组用来存储依赖(Watcher),addDep
方法用来添加依赖,notify
方法用来通知所有依赖进行更新。Watcher
函数用来创建 Watcher 对象,其中包含一个update
方法,用来在属性发生变化时执行相应的更新操作。在初始化响应式数据时,调用
defineReactive
函数定义了一个名为message
的响应式属性。创建了一个 Watcher 对象
watcher
,并在其构造函数中定义了一个回调函数,用来在属性变化时输出消息并更新视图。将
watcher
赋值给Dep.target
,然后访问data.message
,触发依赖收集,将watcher
添加到依赖容器 Dep 中。
5.补充
一张响应式原理图
第142篇:原生js实现响应式原理的更多相关文章
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- Vue.js响应式原理
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
- Vue.js学习 Item12 – 内部响应式原理探究
深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...
- 利用JS去做响应式布局
利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- Vue 源码解读(3)—— 响应式原理
前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...
- vue深入响应式原理
vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...
随机推荐
- C/C++ Qt 使用JSON解析库 [修改篇]
JSON是一种轻量级的数据交换格式,它是基于ECMAScript的一个子集,使用完全独立于编程语言的文本格式来存储和表示数据,简洁清晰的的层次结构使得JSON成为理想的数据交换语言,Qt库为JSON的 ...
- 神经网络优化篇:将 Batch Norm 拟合进神经网络(Fitting Batch Norm into a neural network)
将 Batch Norm 拟合进神经网络 假设有一个这样的神经网络,之前说过,可以认为每个单元负责计算两件事.第一,它先计算z,然后应用其到激活函数中再计算a,所以可以认为,每个圆圈代表着两步的计算过 ...
- 5、后端学习规划:.Net学习 - 学习规划系列文章
.Net是微软发布的一整套的软件编程解决方案.笔者从大学的时代开始就阅读.netframework的书籍了,但是当时没有进行实践.毕业后,笔者去了微软技术中心的公司上班,所以就接触了.net以及C#编 ...
- 为Win12做准备?微软Win11 23H2将集成AI助手:GPT4免费用
微软日前确认今年4季度推出Win11 23H2,这是Win11第二个年度更新. Win11 23H2具体有哪些功能升级,现在还不好说,但它会集成微软的Copilot,它很容易让人想到多年前的" ...
- Vulkan学习苦旅04:创建设备(逻辑设备VkDevice)
设备是对物理设备的一种抽象,使我们更加方便地使用它.更准确地说,应该称其为"逻辑设备",但由于逻辑设备在Vulkan中极为常用,后面几乎所有的API都需要它作为第一个参数,因此在V ...
- 教你用Java实现动态调色板
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用Java编程实战案例,做一个动态调色板.案例界面会出现三个滑动组块以及对应的数值,通过移动滑块可以改变颜色区域的显示.通过实 ...
- public private protected 的辨析
一. public 1.作为类内成员的访问修饰符时,由public修饰的成员数据或者成员函数可以在类外(即派生类内以及实例化的对象后)以及类内进行随意访问 可以看到public成员Data在类外是可访 ...
- MySQL主主同步环境出现1236错误
环境: MySQL 5.7.25 主主架构 故障现象: 发现互相之间的同步均发生异常,两端均出现1236错误,在两个主节点上分别执行show slave status显示的关键信息如下: Master ...
- Asp .Net Core 系列:Asp .Net Core 集成 NLog
简介 NLog是一个基于.NET平台编写的日志记录类库,它可以在应用程序中添加跟踪调试代码,以便在开发.测试和生产环境中对程序进行监控和故障排除.NLog具有简单.灵活和易于配置的特点,支持在任何一种 ...
- Linux--如何查看磁盘的IO(top、iostat)
问题背景: 在性能测试时,虽然测试出了结果,但是我们并不知道瓶颈是源端,还是目标端.例如我做上传和下载性能验证,从Linux服务器上向OSS集群上传和下载文件,虽然测试出了速率,但是并不知道上传是否存 ...