vue 响应式原理 Object.defineProperty(obj,‘属性名A‘,options);

目录

  • self
    • 简单讲解
    • 1. 视图影响数据
    • 2. 数据影响视图
    • 3. 视图数据双向影响
    • 页面展示
  • 百度

self

简单讲解

get和set方法是ES5中提供的,因为是方法,所以可以进行判断,get 一般是要通过 return 返回的;而 set 是设置,不用返回

  • Object.defineProperty(obj,'属性名A',options);
  • options:{ set:function(){},get:function(){} }
  • 当获取 obj.'属性名A' 的时候,可以在设置或者获取的时候加一些行为
  • obj.属性名A = '1234'; //赋值会触发set函数
  • obj.属性名A; //获取会触发get函数

1. 视图影响数据

只有 视图影响数据

  • 在 键盘事件 中直接对 对象的属性 进行赋值 就可以 实现改变数据。
<body><!-- 视图 --><input type="text" id="ipt"><script>// 数据var store = {info: ''}var ipt = document.querySelector('#ipt')ipt.addEventListener('keyup', function(e) {// console.log(888);// console.log(e.target.value)store.info = e.target.value})</script>
</body>

2. 数据影响视图

只有 数据影响视图

  • 使用方法 Object.defineProperty() 配置项中 set 方法进行设置
  • 【因为】使用 方法对属性 进行 修改 时,当 属性的值 发生 改变,就会触发 set 方法
  • set 方法中对 input 进行 赋值
  • 就实现了 数据影响视图
<body><!-- 视图 --><input type="text" id="ipt"><script>// 数据var store = {info: ''}var ipt  = document.querySelector("#ipt")Object.defineProperty(store, "info", {set: function(newv) {// console.log(777)console.log(newv)ipt.value = newv}})</script>
</body>

3. 视图数据双向影响

  • 视图影响数据
    1. input 的 value 发生改变 —> 即 视图发生改变
    2. 触发键盘弹起事件,在键盘事件中对属性进行赋值,属性值发生改变,但其实属性值并未真正改变 (1 和 2 是数据响应实现的效果,不是原理)
    3. 【因为】用了 Object.defineProperty() 方法对属性值进行修改,就只能通过方法中配置项中的 get 方法的 return 对属性值进行修改,其他地方修改的属性值没用,只能是知道属性值变了触发 set 方法
    4. set 方法中 使用 中间量对属性改变的值进行保存(set 方法的参数就是改变的属性值)
    5. get 方法中 return 中间量
    6. 就实现了视图影响数据
  • 数据影响视图
    1. 数据发生改变 —> 即 对象的属性发生改变
    2. 触发 方法 Object.defineProperty() 中配置项中的 set 方法(set 方法的参数就是改变的属性值)
    3. set 方法中对 视图进行修改 —> 即 对 inputvalue 进行修改
<!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 type="text" id="ipt" /><!-- <span id="content"></span> --><script>/** ** 数据 ****/var store = {info: ''}var tempvar ipt = document.querySelector('#ipt')var content = document.querySelector('#content')ipt.addEventListener('keyup', function(e) {console.log('"触发键盘事件"----', '触发键盘事件')store.info = e.target.value// content.innerText = 'input中数据:' + store.info})Object.defineProperty(store, 'info', {/**** set 方法 该属性值发生改变就会触发 ****/set: function(newv) {console.log('set方法调用------', 'set方法调用')console.log('set方法中 newv ------', newv)ipt.value = newv// store.info = newvtemp = newv},/**** get 方法 用该属性的时候触发 ****/get: function() {console.log('get方法调用------', 'get方法调用')// getter 要有 returnreturn temp}})</script></body>
</html>

页面展示

在这里插入图片描述

百度

vue.js利用Object.defineProperty实现双向绑定

  • 在Vue.js中,可以使用Object.defineProperty来实现数据的响应式,从而实现双向绑定。以下是一个简单的示例,展示如何使用Object.defineProperty来创建一个简单的双向绑定输入框:
<!DOCTYPE html>
<html><head><title>Vue.js 双向绑定示例</title></head><body><div id="app"><input v-model="message" placeholder="编辑我" /><p>输入的消息是: {{ message }}</p></div><script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script><script>var vm = new Vue({el: '#app',data: {message: ''}})// 使用Object.defineProperty实现响应式let data = {}Object.defineProperty(data, 'message', {get() {return vm.message},set(newValue) {vm.message = newValue}})// 当输入框的值变化时,data.message也会更新// 当data.message更新时,Vue的响应式系统会更新视图</script></body>
</html>

在这里插入图片描述

在这个例子中,我们创建了一个Vue实例,并通过v-model指令绑定了输入框到message数据属性。同时,我们使用Object.defineProperty监听data.message的变化,并在其发生变化时更新Vue实例的响应式数据。这样,无论是视图层的更新还是数据层的更新,都会同步到彼此,实现了所谓的双向绑定。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/787213.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GT收发器第六篇_GT channel内部时钟关系

文章目录 一、TX端时钟二、RX端时钟 一、TX端时钟 TX端可分为4个区域&#xff0c;分别为FPGA TX接口、PCS靠FPGA侧、PCS靠PMA侧、PMA&#xff0c;如下图。GTX/GTH发射器包括TXBUFFER和TX相位校准电路&#xff0c;以解决时钟域之间的相位差。TX相位校准电路用于TXBUFFER被旁路时…

书生·浦语大模型开源体系(二)笔记

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

【tensorflow框架神经网络实现鸢尾花分类_Keras】

文章目录 1、前言2、鸢尾花分类3、结果打印 1、前言 【tensorflow框架神经网络实现鸢尾花分类】一文中使用自定义的方式&#xff0c;实现了鸢尾花数据集的分类工作。在这里使用tensorflow中的keras模块快速、极简实现鸢尾花分类任务。 2、鸢尾花分类 import tensorflow as t…

营销日历丨2024年4月营销日历火热出炉!四月热点抢先看

4月1日 愚人节 愚人节是一个充满欢乐和恶搞的节日&#xff0c;品牌可以巧妙地利用这个节点来开展一些有趣的营销活动。在这个特殊的日子里&#xff0c;品牌可以走“愚人”的恶搞路线&#xff0c;但需要注意的是&#xff0c;营销活动要把握好尺度&#xff0c;避免过度恶搞&#…

STM32F103通过labview上位机上传温湿度数据到OneNET物联网平台

资料下载地址&#xff1a;STM32F103通过labview上位机上传温湿度数据到OneNET物联网平台 本实验通过两个STM32单片机设备分别测量室内外的温湿度&#xff0c;并把数据发送到上位机上传到ONENET物联网平台。 大体数据传输流程如下&#xff1a; 首先是注册OneNET平台账号&#…

Docker Desktop 在 Windows 上的安装和使用

目录 1、安装 Docker Desktop 2、使用 Docker Desktop &#xff08;1&#xff09;运行容器 &#xff08;2&#xff09;查看容器信息 &#xff08;3&#xff09;数据挂载 Docker Desktop是Docker的官方桌面版&#xff0c;专为Mac和Windows用户设计&#xff0c;提供了一个简…

Axure RP 9下载教程,产品经理实战指南!

Axure rp 9是产品经理必备的专业快速原型设计工具。Axure rp 9可快速高效地创建产品原型图&#xff0c;绘制APP和网页原型图、框架图、结构图等。但是Axuree rp 9下载在用户体验中的缺陷也相对明显&#xff0c;其设置交互方式相对繁琐&#xff0c;可视化不足、条件判断、变量、…

泰克Tektronix MDO3054混合域示波器

181/2461/8938产品概述&#xff1a; Tektronix MDO3054 示波器&#xff0c;混合域&#xff0c;500 MHz&#xff0c;4 通道&#xff0c;5 GS/s 泰克 MDO3054 混合域示波器是终极 6 合 1 集成示波器&#xff0c;包括可选的集成频谱分析仪、任意函数发生器、逻辑分析仪、协议分析…

KNN算法 | K邻近:基础概念

目录 一. KNN算法原理二. KNN算法三要素1. K值的选择2. 距离2.1 欧氏距离2.2 曼哈顿距离(城市街区距离)2.3 切比雪夫距离(棋盘距离)2.4 闵可夫斯基距离2.5 标准化欧式距离2.6 余弦距离欧氏距离与余弦距离对比 3. 决策规则3.1 KNN分类任务多数表决法加权多数表决法 3.2 KNN回归任…

26番外1 对PE启动U盘的思考:制作启动盘,真的不用格式化!!!

番外1 对PE启动U盘的思考 我们在使用官方软件工具(如微PE工具箱)制作任何一个启动U盘的时候,他们总会提示我们:U盘需要格式化!!请备份好自己的数据!! 我一直在思考:为什么一定要格式化呢?需要格式化吗? 为了解决这个问题,我开始思考启动盘的本质. 启动盘的本质是什么?它怎么…

Android 自定义View 测量控件宽高、自定义viewgroup测量

1、View生命周期以及View层级 1.1、View生命周期 View的主要生命周期如下所示&#xff0c; 包括创建、测量&#xff08;onMeasure&#xff09;、布局&#xff08;onLayout&#xff09;、绘制&#xff08;onDraw&#xff09;以及销毁等流程。 自定义View主要涉及到onMeasure、…

风险与收益

风险与收益 影响资产需求的主要因素财富总量预期收益率资产的流动性影响流动性的主要因素 风险 如何降低风险系统风险和非系统风险机会集合与有效集合资产组合理论 影响资产需求的主要因素 影响资产需求的主要因素包括&#xff1a;财富总量、预期收益率、资产的流动性和风险。…

bashplotlib,一个有趣的 Python 库!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个有趣的 Python 库 - bashplotlib。 Github地址&#xff1a;https://github.com/glamp/bashplotlib 在 Python 中&#xff0c;绘制图形通常需要使用专门的绘图库&#xff0…

【Redis】redis集群模式

概述 Redis集群&#xff0c;即Redis Cluster&#xff0c;是Redis 3.0开始引入的分布式存储方案。实际使用中集群一般由多个节点(Node)组成&#xff0c;Redis的数据分布在这些节点中。集群中的节点分为主节点和从节点&#xff1a;只有主节点负责读写请求和集群信息的维护&#…

整数删除,蓝桥杯训练题

题目描述: 给定一个长度为 N 的整数数列&#xff1a;A1,A2,…,AN。 你要重复以下操作 K 次&#xff1a; 每次选择数列中最小的整数&#xff08;如果最小值不止一个&#xff0c;选择最靠前的&#xff09;&#xff0c;将其删除&#xff0c;并把与它相邻的整数加上被删除的数值。 …

【4月2日更新】低至50元/年 京东云 阿里云 腾讯云服务器价格对比表 幻兽帕鲁 雾锁王国 我的世界 饥荒 通用

更新日期&#xff1a;4月2日 本文纯原创&#xff0c;侵权必究 【云服务器推荐】价格对比&#xff01;阿里云 京东云 腾讯云 选购指南视频截图 《最新对比表》已更新在文章头部—腾讯云文档&#xff0c;文章具有时效性&#xff0c;请以腾讯文档为准&#xff01; 【腾讯文档实…

Anaconda中利用conda创建、激活、删除、添加新环境

一、利用conda创建新环境 学多了&#xff0c;发现学习一些命令就跟学英语语法一样&#xff0c;比如利用conda 创建新环境&#xff0c;语法如下&#xff1a; conda create -n 新环境的名字 -n为--name的简写。利用我需要创建一个新的环境&#xff0c;取名为pycaret&#xff0c…

基于springboot的房屋租赁系统平台

功能描述 流程&#xff1a;房主登陆系统录入房屋信息》发布租赁信息&#xff08;选择房屋&#xff09;》租客登陆系统浏览租赁信息》和房主联系、看房&#xff08;根据租赁信息单的电话线下沟通&#xff09;》房主发起签约&#xff08;生成邀请码&#xff09;》租客登陆系统根…

【洛谷 P8700】[蓝桥杯 2019 国 B] 解谜游戏 题解(字符串+映射+周期性)

[蓝桥杯 2019 国 B] 解谜游戏 题目背景 题目描述 小明正在玩一款解谜游戏。谜题由 24 24 24 根塑料棒组成&#xff0c;其中黄色塑料棒 4 4 4 根&#xff0c;红色 8 8 8 根&#xff0c;绿色 12 12 12 根 (后面用 Y 表示黄色、R 表示红色、G 表示绿色)。初始时这些塑料棒排…

QML嵌套页面的实现学习记录

StackView是一个QML组件&#xff0c;用于管理和显示多个页面。它提供了向前和向后导航的功能&#xff0c;可以在堆栈中推入新页面&#xff0c;并在不需要时将页面弹出。 ApplicationWindow {id:rootvisible: truewidth: 340height: 480title: qsTr("Stack")// 抽屉:…