VUE的单向数据流与sync

news/2024/7/10 0:30:38 标签: vue, js

(1)prop的实现

子组件拿到父组件赋值的 attr=> 筛选出 props并保存在子组件的_props里=>_props中的数据逐一复制到子组件的实例上(同时设置get 和 set )

当父组件data更新,渲染函数执行,又会执行上面的赋值。由此就达成了父组件的数据变化时,子组件props更新的效果。

但是很明显,当我们操作子组件中的props时实际上我们是在操作子组件的_props,这完全不会影响到父组件的数据。单纯靠props我们无法做到父子组件的数据双向绑定。

为什么vue要如此实现。在vue1.0的文档上是这么解释的:
在这里插入图片描述
根据文档的解释,这样的单向数据流主要是为了防止子组件意外地改变父组件的状态,防止应用中的数据流变得混乱。

(2).sync的实现

不过vue1.0时官方依然提供了一个能够强制实现双向数据流的办法:.sync修饰符(这个版本的sync的实现,我暂时没找到源码在哪里,有兴趣的可以去翻一下)

这个修饰符在vue2.0的时候被弃用了
在这里插入图片描述
主要是为了避免隐式双向绑定,强制性的要求需要显式的传递一个事件。

不过在vue2.3的时候又被添加了回来,但实现原理有所不同
在这里插入图片描述
从上面的源码可知 vue2.3版本的.sync修饰符只是一个简单地语法糖。

使用时可以理解为将

<child :foo.sync="data"/>

扩展为了

<child :foo="data" @update:foo="val => data = val"/>

所以在使用时需要在子组件中手动触发一个事件,而非直接修改prop

this.$emit('updata:foo',newVal)

总结

从官方文档能够看出,vue对于组件间传值的设计思路,似乎从早期的版本就固定为 propsDown emitUp一直没变,只是在早期版本有.sync这个例外。在后期版本为了规范,删除了能够实现隐式双向绑定的.sync。

而单向数据流的优势也很明显,就是为了防止子组件意外地改变父组件的状态,防止应用中的数据流变得混乱。


http://www.niftyadmin.cn/n/1355276.html

相关文章

div生成图片_手把手教你撸一个能生成抖音风格动图的gif制作平台

前言又到了一周一次的周总结, 笔者基于之前的开源项目 blink , 开发了一款能在线配置故障艺术, 并一键生成gif动图的平台, 这里暂时取名为QT. 接下来笔者将复盘一下该可视化平台的实现步骤以及功能点, 让大家都能做自己的Gif动图生成平台.在线访问地址: 趣图——一款轻量级生成…

用JS实现响应式对象(VUE同原理)

Vue.js 实现响应式的核心是利用了 ES5 的Object.defineProperty&#xff0c;这儿尝试使用Object.defineProperty实现一个响应式对象&#xff0c;帮助理解Vue的深入响应式原理。 直接上代码&#xff1a; let x{}; let value 10; Object.defineProperty(x,v,{get(){console.log(…

echart 数据点可以加链接吗_vue之将echart封装为组件

最近的新项目里&#xff0c;有大量数据图表类的需求&#xff0c;为了增强代码的复用性&#xff0c;减少冗余&#xff0c;我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例&#xff0c;一步步讲解在vue项目中如何使用echart&#xff0c;如何将其封装为能重复调用的…

js防抖

antiShake(func, time) {let timer null;return function() {if (timer ! null) {clearTimeout(timer);}timer setTimeout(func, time);}; }

vim shiftwidth_VIM学习笔记 模式行(Modeline)

程序员对于制表符常常有不同的偏好&#xff0c;有的使用8个空格&#xff0c;而有的则使用4个空格。可以想见&#xff0c;如果使用不同设置的用户操作相同的文件&#xff0c;必将对文本格式造成影响。如果希望针对特定文件应用特定的设置&#xff0c;那么修改全局性的vimrc配置文…

自己封装一个VUE表格组件

直接上源码 <template><table class"my_table" :style"tableStyle"><thead ref"header"><tr :style"theadStyle"><th v-for"(item, index) in new_columns" :key"item.unique || index&qu…

microsoftbarcode控件9.0安装后不显示_AnyCAD Rapid .Net三维控件WinForms集成教程

1 准备工作AnyCAD Rapid .Net三维控件底层基于C&#xff0c;在Windows下依赖Vistual C 运行时库。因此64位版本需要在客户机上安装vc_redist.x64.exe&#xff0c;32位版本需要安装vc_redist.x86.exe。下载&#xff1a;链接:https://pan.baidu.com/s/145y9R11URPu_JennJStz6A 提…

JS处理除法结果

取余数&#xff1a; a%b取整数&#xff1a; parseInt(a/b)向上取整&#xff1a; Math.ceil(a/b)向下取整&#xff1a; Math.floor(a/b)四舍五入&#xff1a; Math.round(a/b)