vue数据的双向绑定和单向数据流

最新推荐文章于 2024-05-07 06:48:30 发布
最新推荐文章于 2024-05-07 06:48:30 发布
阅读量662 收藏
点赞数
分类专栏： 前端--vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42303885/article/details/85259797
版权

先看要实现的效果：

再贴代码：

<!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>
  <div id="app">
    <input type="text" id="inp" oninput="changeValue(value)">
    <p>message is:&nbsp;<span id="spa">{{msg}}</span></p>
  </div>
  <script>
    let tpl = document.getElementById('spa').innerText;
    let updateView = (data) => {
      let html = tpl.replace(/{{(.*)}}/, (match, $1) => {
        return data[$1] || '';
      });
      document.getElementById('spa').innerText = html;
    }
    let data = {
      msg: '',
      _data: {}
    }
    Object.defineProperty(data, 'msg', {
      get() {
        return this._data.msg;
      },
      set(value) {
        this._data.msg = value;
        updateView(this);
      }
    })
    data.msg = '';
    let changeValue = (value) => {
      data.msg = value;
    }
  </script>
</body>

</html>

下面是网上抄的其他人的，链接已经不详了。

单向数据流：
单向数据流指只能从一个方向修改数据，姑且我们可以这样理解，一个父组件下有两个子组件1和子组件2，父组件可以向子组件传递数据。假如子组件都获取到了父组件的name，在子组件1中对name重新修改之后，子组件2和父组件中的值并不会发生改变，这正是因为Vue中的机制是单向数据流，子组件不能直接改变父组件的状态。但反过来，如果是父组件中的name修改了，当然两个子组件中的name也就改变了。

ccopcx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的单向数据流和双向数据绑定
Y0admin的博客
07-23 1216
Vue 的数据流本质上是单向数据流，而我们平时说的双向数据绑定，只是Vue的一个语法糖，也就是说，Vue在数据流方面既可以实现单向数据流也可以实现双向数据绑定。 双向数据绑定实现原理： <input type="text" :value="content" @input="onInput"> <script> export default{ data: { return: {content:"hello"} }, methods: { .
vue中单向数据流和双向绑定
weixin_43310551的博客
05-19 503
https://blog.csdn.net/dkr380205984/article/details/82185740
vue2和vue3的区别
m0_46318298的博客
02-14 309
vue2和vue3的区别
React的单向数据流与Vue的双向绑定
Programme_的博客
08-23 2411
小结： React遵循从上到下的数据流向，即单向数据流。 1、单向数据流并非‘单向绑定’，甚至单向数据流与绑定没有‘任何关系’。对于React来说，单向数据流（从上到下）与单一数据源这两个原则，限定了React中要想在一个组件中更新另一个组件的状态 （类似于Vue的平行组件传参，或者是子组件向父组件传递参数），需要进行状态提升。即将状态提升到他们最近的祖先组件中。子组件中Change了状态，触发父组件状态的变更，父组件状态的变更， 影响到了另一个组件的显示（因为传递给另一个组件的...
vue单向数据流和双向数据流的实现
最新发布
codedadi的博客
05-07 493
在上面的例子中，v-model 指令在输入字段和 Vue 实例的 message 数据属性之间创建了一个双向绑定。Vue.js 中没有直接提供双向数据流的官方解决方案，因为单向数据流更容易管理和追踪数据变化。需要注意的是，v-model 实际上是语法糖，它背后是 value 属性和 input 事件的组合。因此，v-model 并不是真正的双向数据流，而是单向数据流加上事件监听的组合。在单向数据流中，数据从父组件流向子组件，子组件不能直接修改父组件传递的数据。// '子组件的数据'
什么是vue单向数据流（详解）
热门推荐
object not found的博客
08-25 2万+
上述子组件中的currentValue是实际input组件的值，他的值是根据父组件传入的值得出的，input标签组件的change事件来触发父组件的change事件，从而改变传入子组件props中value的值。这就解释了单项数据流，父組件通过props向子组件传递值，子组件通过emit事件来通知父组件修改值，子组件不在自身对父组件传递过来的props做任何修改，都是通过父组件来更新props,从而达到子组件更新自身状态。额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
Vue 单向数据流与双向数据流
Keep_Doing的博客
04-05 2062
【本文偏向概念上的区分】 单向数据流 vs 双向数据流 数据流指的是组件之间的数据流动。 虽然vue有双向绑定v-model，但是vue父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改。 优点是所有状态的改变可记录、可跟踪，源头易追溯; 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性 vue支持单向绑定和双向绑定 单向绑定：插值形式{{data
Vue单向数据流
weixin_58155690的博客
06-30 4761
Vue 的单向数据流
深入理解Vue 单向数据流的原理
08-28
与单向数据流对应的是双向数据流（也叫双向绑定）。在双向数据流中，Model（可以理解为状态的集合）中可以修改自己或其他Model的状态，用户的操作（如在输入框中输入内容）也可以修改状态。这使改变一个状态有可能会...
Vue.js单向绑定和双向绑定实例分析
10-18
为了解决这些问题，开发者可以选择使用单向数据流（如Vuex状态管理）或通过`v-model`的修饰符来限制双向绑定的范围。同时，可以使用`watch`对象来监听数据变化，以执行特定的操作或进行验证。 总结来说，Vue.js的...
轻松理解vue的双向数据绑定问题
08-28
单向数据绑定指的是我们先把模板写好，然后把模板和数据整合到一起形成 HTML 代码，然后把这段 HTML 代码插入到文档流里面。 然而，单向数据绑定有其缺点，即 HTML 代码一旦生成完以后，就没有办法再变了，如果有新...
Vue props 单向数据流的实现
10-17
总的来说，Vue props的单向数据流是一种有效的组件间通信方式，它强调了数据流动的单一方向，帮助开发者构建更加稳定和易于理解的组件结构。通过合理利用props、data以及计算属性，可以实现高效且可维护的组件通信。...
vue自定v-model实现表单数据双向绑定问题
10-18
1. **单向数据绑定**：使用`:value`指令将组件的`price`属性绑定到输入框的`value`属性上。这意味着当`price`的值改变时，输入框的显示值也会更新。 ```html ``` 2. **事件监听**：通过监听`input`事件，当用户...
vue中props通信实现双向数据流
Linho的博客
04-26 1026
vue中组件通过props进行组件通信的时候，props是单向数据流的，也就是只能通过父组件改变值传入到子组件，不能通过子组件改变父组件中的值，但我们实际开发中，有一些场景是需要实现双向数据流的props的，比如我们自定义一个dialog弹窗组件： 1.使用object类型的props传值 //弹窗组件dialog <template> <div class="dialo...
115、Vue和React的区别
sunnnnh的博客
10-04 699
目录 1. Vue和React中diff算法区别 2.数据流的不同 3.组件通信的区别 4、渲染过程不同 5、Vuex和Redux的区别 6、框架本质不同 7、模板渲染方式的不同 8、路由跳转的方式不同 9、构建工具不同 10、HoC和mixins 11、使用场景 12、总结 1. Vue和React中diff算法区别 vue和react的diff算法，都是忽略跨级比较，只做同级比较。vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点...
双向数据绑定 和 单向数据流的理解
subsistent的博客
02-22 263
和 Vue 相比 React 并没有提供向 v-model 这样的指令来实现文本框的数据流双向绑定，因为react的设计思路就是单向数据流，所以我们需要借助 onChange 和 setState 来实现一个双向的数据流，当数据发生变化的时候，用户界面发生相应的变化，双向数据绑定，带来双向数据流；而提到双向数据绑定，大家想到的可能会是 Vue 框架，因为 Vue 使用的是 MVVM 设计模式，其核心思想就是使用 Viewmodel 把 view 和 model 结合起来的一个双向数据绑定；
vue与react 数据流设计理念
weixin_42657666的博客
12-15 1235
这意味着数据只能由父组件流向子组件，而子组件不能直接修改父组件的数据。如果想要修改数据，需要通过回调函数的方式将修改后的数据传递给父组件。这种数据流模型使得数据变更的追踪更加明确，提高了应用的可维护性。总的来说，双向数据流适合简单的表单和用户输入场景，而单向数据流适用于复杂的应用场景，对于大型应用的维护和扩展更加友好。这意味着数据可以从父组件流向子组件，并且子组件对数据的修改也可以反向影响父组件。在前端框架中，数据流是描述数据在组件间传递的方式。它决定了数据的更新方式以及组件之间的依赖关系。
什么是Vue.js中的单向数据流（one-way data flow）？为什么它重要？
官方推荐
11-15 1326
什么是Vue.js中的单向数据流（one-way data flow）？为什么它重要？
Vue子组件修改父组件值
西格玛猫
02-23 723
父组件 <template> <div> <Child :obj="obj" /> </div> <template> <script> import Child from './Child ' export default{ components: {Child }, data() { return { obj:{ a:1, b:2 } } } } </script>
vue 是双向绑定，react 数据流动是单向的
07-13
实际上，React 和 Vue 都支持双向数据绑定。 在 Vue 中，你可以使用 `v-model` 指令来实现双向数据绑定。这允许你将表单输入元素（如 input、textarea、select）与 Vue 实例的数据进行绑定，当用户在表单元素中输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值