单向vs双向绑定 区别/场景 | Vue
自然卷哈利
2021年05月11日 15:00
收录于文集
共24篇

以下内容为方便复习而整理的相关博文的笔记，如有侵权请马上联系删除

参考文章来源1：https://blog.csdn.net/u012207345/article/details/81737509

参考文章来源2：https://www.zhihu.com/question/49964363

参考文章来源3：https://www.cnblogs.com/webcabana/p/11077628.html

参考文章来源4：https://www.cnblogs.com/vickylinj/p/13707112.html

概念区别

● 单向绑定

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

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

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

        ①　所有数据只有一份

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

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

        Vue作为MVVM框架会自动监听Model的任何变化，在Model数据变化时，更新View的显示。这种Model到View的绑定就是单向绑定。

        (2) v-bind形式

            利用单向绑定修改样式属性

            可以看到通过对class属性进行绑定我们就可以动态的改变class对应的样式，这个都是通过Model的操作完成的，没有设置任何的DOM操作。

● 双向绑定

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

    实现视图和数据的双向绑定。

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

    v-model

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

        只能用在"input、select、textarea&#​34;这些表单元素上。

    缺点

        不知道data什么时候变了，也不知道是谁变了，变化后也不会通知，

        当然可以watch来监听data的变化，但这复杂，还不如单向绑定。

    v-model="message&#​34;  等价于  

    v-bind:value="message&#​34; + v-on:input="message=$event.target.value&#​34;

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

    ● text 和 textarea 元素使用  property 和  事件；

    ● checkbox 和 radio 使用  property 和  事件；

    ● select 字段将  作为 prop 并将  作为事件。

优缺点

● 单向绑定    

    优点

        所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。

        同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。

    缺点

        代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码。

        同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。

● 双向绑定

    优点

        在表单交互较多的场景下，会简化大量业务无关的代码。

    缺点

        由于都是“暗箱操作”，我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心)，潜在的行为太多也增加了出错时 debug 的难度。

        同时由于组件数据变化来源入口变得可能不止一个，新手玩家很容易将数据流转方向弄得紊乱，如果再缺乏一些“管制”手段，最后就很容易因为一处错误操作造成应用雪崩。

场景区别

● 单向绑定

    使得数据流也是单向的，对于复杂应用来说这是实施统一的状态管理（如redux）的前提。

    单向数据流其实是没有状态的, 这使得单向绑定能够避免状态管理在复杂度上升时产生的各种问题, 程序的调试会变得相对容易, 但强制要求编码时设计思维的一致性.

    如果你的程序需要一个统一的数据源, 应该选择单向数据流, 所有的数据变化都是可观测的, 数据自上而下流动, 即使出问题也很容易找到源头.

● 双向绑定

    在一些需要实时反应用户输入的场合会非常方便（比如多级联动菜单）。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。

    双向数据流是自动管理状态的, 但是在实际应用中会有很多不得不手动处理状态变化的逻辑, 使得程序复杂度上升, 难以调试, 但程序各个部分自成一体, 不强制要求一致的编码.

    如果你的程序本身有多个数据源, 或者是程序的逻辑本身会产生很多的副作用, 应该选择双向绑定的程序, 将大项目分化为小项目, 逐个击破.

什么是setter、getter

答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义

代码块
JavaScript
自动换行
复制代码
对象有两种属性：
（1）数据属性，就是我们经常使用的属性
（2）访问器属性，也称存取器属性（存取器属性就是一组获取和设置值的函数）
复制成功

代码

代码块
JavaScript
自动换行
复制代码
const obj = {a:1, b:2}
console.log(obj)
复制成功

打印

数据属性就是a和b；

　　get和set就是关键字 它们后面各自对应一个函数，

        这个函数就是上面红字部分所讲的，存储器属性。

　　get对应的方法称为getter，负责获取值，它不带任何参数。

        set对应的方法为setter，负责设置值，在它的函数体中，一切的return都是无效的。

面试 前端 应用场景 单向绑定 双向绑定 v-bind v-on v-model
cv11238056