双向绑定原理

最新推荐文章于 2024-08-27 16:14:09 发布

白萝卜皮儿

最新推荐文章于 2024-08-27 16:14:09 发布

阅读量9.1k

点赞数 4

分类专栏： vue 文章标签：双向绑定

本文链接：https://blog.csdn.net/lh408684474/article/details/90714409

版权

本文介绍了双向绑定的概念，从MVC和MVVM架构模式的区别入手，解析了单向绑定与双向绑定的差异。接着，讨论了双向绑定在UI控件和组件间通信中的应用场景，并通过一个例子展示了如何模仿实现双向绑定，特别是利用Object.defineProperty来建立属性间的联动关系。

摘要由CSDN通过智能技术生成

适合读者：
了解 MV* 架构模式
希望了解双向绑定原理

从MVC、MVVM说起

参考阮一峰老师的文章：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

MVC
流程：View根据Model展示页面，当页面发生操作时（commander），View传递指令到Controller层，Controller层根据commander对Model做出修改，Model发生变化后，通知View重新渲染。
在这里插入图片描述
流程：Model传递到ViewModel层进行对应逻辑运算后同步到View上，同时View与ViewModel绑定，View的任何变动都反映在ViewModel上，ViewModel变更时，会通知Model做出变更。View与Model层不发生通信。

单向绑定与双向绑定

从上边MVC与MVVM模型图可以看出，MVC模型根据Model渲染View，Model向View单向通信，理解为单向绑定；
MVVM模型View与ViewModel绑定，双方的任何变更均能反映到另一方，View的任何变更由ViewModel向Model通报，同时Model的变更向ViewModel通报，ViewModel与View同步。

双向绑定的应用场景

一句话概括：双向绑定试用于所有UI控件，对非UI控件，当组件间通信时，可采用双向绑定，也可采用单向绑定。
参考文章：单、双向绑定分析对比 https://www.wang1314.com/doc/topic-20437069-1.html

模仿双向绑定

<template>
  <div class="hello">
    <p> 双向绑定</p>
    <h1>{
   {
   price}}</h1>
    <h1>{
   {
    tax }}</h1>
    <h1>{
   {
    total }}</h1>
    <input v-model="price"/>
    <button @click = "clickBtn()">改变价格</button>
  </div>
</template>
<script>
	export default {
   
	  name: 'HelloWorld',
	  data: function (){
   
	    return {
   
	      price: 10,
	      count<