Vue数据变化侦测的原理解析,手把手教你手写响应式

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 学Vue的应该都知道Vue最大的特点的数据驱动视图,那么你是否了解Vue数据变化是如何侦测到的呢?能否手写实现响应式原理呢?这一块是面试中经常会问到的地方,也是我们学好vue必须要了解的一个点,这篇就通过小例子带大家理解这个内容

前言

学Vue的应该都知道Vue最大的特点的数据驱动视图,那么你是否了解Vue数据变化是如何侦测到的呢?能否手写实现响应式原理呢?这一块是面试中经常会问到的地方,也是我们学号vue必须要了解的一个点,这篇就通过小例子带大家理解这个内容

数据驱动视图

刚刚说了Vue最大的特点的数据驱动视图。
这里我们可以把数据理解为状态,视图就是用户可以直接看到的页面。

    UI = render(state)
    这个公式理解为:state是输入,UI是输出,状态变化也变随之变化,这种特性就要数据驱动视图。
    如果说想要知道数据在什么时候被读取或者被改写,很简单,JS为我们提供了一个Object.difineProperty方法。具体如何实现和使用,继续往下看

Object.difineProperty

我先来写个简单的对象

<script>
    let home = {
        'brand': 'BGY',
        'price': 5000
    }
</script>

运行打开,我们可以在控制台输入,取到hone对象和它的属性值都没有问题

在这里插入图片描述
那么我们在读取或者是修改时,如何让hone对象告诉我们发生了操作呢?这里就需要用到了Object.difineProperty,我们来修改一下代码:
get就是拿数据,set就是修改数据

<script>
    // let home = {
    //     'brand': 'BGY',
    //     'price': 5000
    // }
    let home = {}
    let val = 5000
    Object.defineProperty(home, 'price', {
        get() {
            console.log('price属性被读取了')
            return val
        },
        set(newVal) {
            console.log('peice属性被修改了')
            return newVal
        }
    })
</script>

我们再来运行试一下,此时hone已经变为可观测的了
在这里插入图片描述

手写实现Vue响应式

上面我们已经了解了Object.difineProperty方法的使用,能够将变量变为可观测,下面一起来手写一个Vue响应式

  1. 我们先来写一个输入框,并且将输入框内容展示到下方p标签里。先把对象里的内容变为可观测形式
<input type="text" id="inp">
<p id="text"></p>
<script>
    let obj = {}
    Object.defineProperty(obj, 'val', {
        get() {
            console.log('val属性被读取了')
            return val
        },
        set(newVal) {
            console.log('val属性被修改了')
            return newVal
        }
    })
</script>
  1. 下面我们要把set中最新的值newVal赋值进行,然后监听input的键盘事件,把对应的目标值赋给对象的val.

这里使用addEventListener的方法,读取到它的target属性,并将它赋值给obj.val,并在set方法中对新的值赋值进去

<input type="text" id="inp">
<p id="text"></p>
<script>
    let obj = {}
    Object.defineProperty(obj, 'val', {
        get() {
            console.log('val属性被读取了')
            return val
        },
        set(newVal) {
            console.log('val属性被修改了')
            val = newVal
                document.getElementById('text').innerHTML = newVal
        }
    })
    document.addEventListener('keyup', function(e) {
         console.log(e.target.value)
         obj.val = e.target.value
     })
</script>

下面一起来看看效果,实现了响应式的简易版
在这里插入图片描述

相关文章
|
2月前
|
存储 缓存 算法
HashMap深度解析:从原理到实战
HashMap,作为Java集合框架中的一个核心组件,以其高效的键值对存储和检索机制,在软件开发中扮演着举足轻重的角色。作为一名资深的AI工程师,深入理解HashMap的原理、历史、业务场景以及实战应用,对于提升数据处理和算法实现的效率至关重要。本文将通过手绘结构图、流程图,结合Java代码示例,全方位解析HashMap,帮助读者从理论到实践全面掌握这一关键技术。
110 14
|
3月前
|
运维 持续交付 云计算
深入解析云计算中的微服务架构:原理、优势与实践
深入解析云计算中的微服务架构:原理、优势与实践
128 3
|
2天前
|
机器学习/深度学习 算法 数据挖掘
解析静态代理IP改善游戏体验的原理
静态代理IP通过提高网络稳定性和降低延迟,优化游戏体验。具体表现在加快游戏网络速度、实时玩家数据分析、优化游戏设计、简化更新流程、维护网络稳定性、提高连接可靠性、支持地区特性及提升访问速度等方面,确保更流畅、高效的游戏体验。
43 22
解析静态代理IP改善游戏体验的原理
|
2天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
1月前
|
机器学习/深度学习 自然语言处理 搜索推荐
自注意力机制全解析:从原理到计算细节,一文尽览!
自注意力机制(Self-Attention)最早可追溯至20世纪70年代的神经网络研究,但直到2017年Google Brain团队提出Transformer架构后才广泛应用于深度学习。它通过计算序列内部元素间的相关性,捕捉复杂依赖关系,并支持并行化训练,显著提升了处理长文本和序列数据的能力。相比传统的RNN、LSTM和GRU,自注意力机制在自然语言处理(NLP)、计算机视觉、语音识别及推荐系统等领域展现出卓越性能。其核心步骤包括生成查询(Q)、键(K)和值(V)向量,计算缩放点积注意力得分,应用Softmax归一化,以及加权求和生成输出。自注意力机制提高了模型的表达能力,带来了更精准的服务。
|
2月前
|
存储 物联网 大数据
探索阿里云 Flink 物化表:原理、优势与应用场景全解析
阿里云Flink的物化表是流批一体化平台中的关键特性,支持低延迟实时更新、灵活查询性能、无缝流批处理和高容错性。它广泛应用于电商、物联网和金融等领域,助力企业高效处理实时数据,提升业务决策能力。实践案例表明,物化表显著提高了交易欺诈损失率的控制和信贷审批效率,推动企业在数字化转型中取得竞争优势。
115 16
|
2月前
|
网络协议 安全 网络安全
探索网络模型与协议:从OSI到HTTPs的原理解析
OSI七层网络模型和TCP/IP四层模型是理解和设计计算机网络的框架。OSI模型包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层,而TCP/IP模型则简化为链路层、网络层、传输层和 HTTPS协议基于HTTP并通过TLS/SSL加密数据,确保安全传输。其连接过程涉及TCP三次握手、SSL证书验证、对称密钥交换等步骤,以保障通信的安全性和完整性。数字信封技术使用非对称加密和数字证书确保数据的机密性和身份认证。 浏览器通过Https访问网站的过程包括输入网址、DNS解析、建立TCP连接、发送HTTPS请求、接收响应、验证证书和解析网页内容等步骤,确保用户与服务器之间的安全通信。
166 3
|
3月前
|
存储 供应链 算法
深入解析区块链技术的核心原理与应用前景
深入解析区块链技术的核心原理与应用前景
96 0
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
6天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
54 12

热门文章

最新文章

推荐镜像

更多