参考：【Vue】vue 单向绑定& 双向绑定 - vickylinj - 博客园

在react中是单向数据绑定，而Vue.js 最显著的特点就是响应式和数据驱动，也就是将Model和View进行单向绑定或者双向绑定。

单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

1.单向绑定

1.1插值形式

插值形式就是{{data}}的形式，它使用的是单向绑定。

单向数据绑定的实现思路：

①　所有数据只有一份

②　一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data)

③　若用户在页面上做了更新，就手动收集(双向绑定是自动收集)，合并到原有的数据中。

<body>
<div id="vm"><p>Hello, {{name}}!</p><p>You are {{age}} years old!</p>
</div>
</body><script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">var vm = new Vue({el: '#vm',data: {name: 'DroidMind',age: 18}});
</script>

打开浏览器console，在控制台输入vm.name = 'Bob'，执行上述代码，可以观察到页面立刻发生了变化，原来的Hello,DroidMind!自动变成了Hello, Bob!。Vue作为MVVM框架会自动监听Model的任何变化，在Model数据变化时，更新View的显示。这种Model到View的绑定就是单向绑定。

1.2v-bind形式

<body>
<div id="vm"><p v-bind:class="classed">Hello, {{name}}!</p>
</div>
</body><script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">var vm = new Vue({el: '#vm',data: {name: 'DroidMind',classed: 'red'}});
</script><style>.red {background: red;}.blue {background: blue;}
</style>

vm.classed的初始值为red，此时<p>的样式属性对应的是.red，此时背景就为红色，我们可以通过在浏览器的控制台输入vm.classed='bule'，此时背景就自动变成了蓝色。可以看到通过对class属性进行绑定我们就可以动态的改变class对应的样式，这个都是通过Model的操作完成的，没有设置任何的DOM操作。

2.双向绑定

v-model形式

数据的双向绑定是vue实现的一大功能。

使用v-model指令，实现视图和数据的双向绑定。

所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。

v-model主要用在表单的input输入框，完成视图和数据的双向绑定。

v-model只能用在"input、select、textarea"这些表单元素上。

双向绑定的缺点：不知道data什么时候变了，也不知道是谁变了，变化后也不会通知，当然可以watch来监听data的变化，但这复杂，还不如单向绑定。

<body>
<form id="vm" action="#"><p><input v-model="email"></p><p><input v-model="name"></p>
</form></body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">var vm = new Vue({el: '#vm',data: {email: '',name: ''}});
</script>

我们可以在表单中输入内容，然后在浏览器console中用vm.$data查看Model的内容，也可以用vm.name查看Model的name属性，它的值和FORM表单对应的<input>是一致的。如果在浏览器console中用JavaScript更新Model，例如，执行vm.name='Bob'，表单对应的<input>内容就会立刻更新。可以看到通过v-model实现了表单数据和Model数据的双向绑定。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件，实际只是语法糖，所以vue跟react一样是单向绑定：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

3.`状态管理`

其实无论是vue还是react其实还是提倡单向数据流去管理状态，这一点在vuex和redux状态管理器上体现的很明显。

“单向数据流”理念的极简示意：

state：驱动应用的数据源。view：以声明方式将 state 映射到视图。 actions：响应在 view 上的用户输入导致的状态变化

3.1 单向数据流过程：
简单的单向数据流（unidirectional data flow）是指用户访问View，View发出用户交互的Action，在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据总是清晰的单向进行流动，便于维护并且可以预测。

3.2 vuex和redux解决什么问题：
虽然vue和react框架本身有自己状态管理，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

(1)多个视图依赖于同一状态
(2)来自不同视图的行为需要变更同一状态

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

vue 单向绑定双向绑定相关推荐

剖析Vue原理实现双向绑定MVVM
本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋, ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
[vue] 什么是双向绑定？原理是什么？
[vue] 什么是双向绑定?原理是什么? 双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式.其实可以简单的理解为change和bind的结合.目前双向数据绑定都是基于 ...
Vue 3.0双向绑定原理的实现
proxy方法 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过new Proxy()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. Vu ...
vue 如何取消双向绑定
vue中的双向绑定,在单页面中使用起来非常便利,表单数据和对象保持数据一致,但是在某些应用场景下,比如弹窗,我们需要取消双向绑定功能,否则会出现,当我们修改弹窗数据的时候,父页面的数据同步修改的现象, ...
vue取消数据双向绑定问题
如图,由于vue数据的双向绑定,给waterSetInfo拼接单位的时候,会将res.data也进行赋值,导致waterSet里面的结果不对,同一个对象多处使用问题解决方案: 深拷贝的方法:JSON ...
Vue数据绑定以及双向绑定原理分析
效果分析已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最 ...
Vue 父子组件双向绑定传值
最简单的双向绑定(单文件中)就是表单元素的v-model了,如果同时设置v-model和value,value属性无效. 自定义v-model:(不推荐) child: <template> ...

vue 单向绑定双向绑定

参考：【Vue】vue 单向绑定& 双向绑定 - vickylinj - 博客园

1.单向绑定

1.1插值形式

1.2v-bind形式

2.双向绑定

v-model形式

3.`状态管理`

vue 单向绑定双向绑定相关推荐

最新文章

热门文章

vue 单向绑定 双向绑定

参考：【Vue】vue 单向绑定& 双向绑定 - vickylinj - 博客园

1.单向绑定

1.1插值形式

1.2v-bind形式

2.双向绑定

v-model形式

3.状态管理

vue 单向绑定 双向绑定相关推荐

最新文章

热门文章

vue 单向绑定双向绑定

3.`状态管理`

vue 单向绑定双向绑定相关推荐