✨什么是数据双向绑定

我们先从单向绑定切入单向绑定非常简单 
    
    
 ，就是把Model绑定到View 
    
    
 。

什么是双向绑定呢？当我们用JavaScript代码更新Model时
     


     


     ，View就会自动更新 




 




 




，在单向绑定的基础上 

   

   

，用户更新了View
     

     

     ，Model的数据也自动被更新了  




  




  



，这种情况就是双向绑定
     


     


     。

✨数据双向绑定的原理

数据双向绑定的原理之前 


  


  


，我们先来了解一下什么是MVVM 




 




 




。

MVVM是一种设计思想
     
     
    ，它是Model-View-ViewModel的缩写 

   

   

。它也是MVC的增强版
     

     

     。

Model是代表数据模型   




   




   


，也可以在Model中定义数据修改和操作的业务逻辑  




  




  



。 View是代表UI组件 



 



 



，它负责将数据模型转化成UI展现出来 


  


  


。 ViewModel是一个同步View和Model的对象
     
     
    。

ViewModel的主要职责：

数据变化后更新视图 视图变化后更新数据

当然             ，它还有两个主要部分组成

监听器（Observer）：对所有数据的属性进行监听 解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

✨Vue数据双向绑定原理

Vue是采用数据劫持结合发布者-订阅者模式的方式
    




    




    

，通过使用ES5中的Object.defineProperty()方法来劫持各个属性的setter














，getter             ，在数据变动时发布消息给订阅者
     



     



     
，触发相应的监听回调来渲染视图   




   




   


。

Object.defineProperty()允许在对象上定义新的属性














，以及修改或删除现有属性的特性 
    
    
 ，其中包括get 
    
    
 、set
     


     


     、enumerable和configurable等 



 



 



。

✨实现数据双向绑定的步骤

创建Vue实例时
     


     


     ，在data属性中定义需要双向绑定的数据             。 在模板中使用v-model指令将输入控件绑定到数据属性上
    




    




    

。

在Vue内部 




 




 




，使用Object.defineProperty()方法将数据属性转换为getter/setter形式 

   

   

，从而实现数据的响应式变化














。 当输入控件的值发生变化时
     

     

     ，Vue会自动调用数据属性的setter方法  




  




  



，从而更新数据的值             。 当数据的值发生变化时 


  


  


，Vue会自动更新相关的DOM元素
     
     
    ，从而实现数据与视图的双向绑定
     



     



     
。

示例代码如下：

html

<div id="app"> <input v-model="message"> <p>{{ message }}</p> </div>

javascript

var vm = new Vue({ el: #app, data: { message: } });

在上面的代码中   




   




   


，v-model指令将输入框和message属性进行了双向绑定














。当输入框的值发生变化时 



 



 



，message属性的setter方法会被调用             ，从而更新数据 
    
    
 。当message属性的值发生变化时
    




    




    

，相关的DOM元素也会自动更新














，从而实现了数据与视图的双向绑定
     


     


     。

需要注意的是             ，Vue的双向绑定仅适用于一些特定的输入控件
     



     



     
，如input 




 




 




、textarea和select等 




 




 




。对于自定义组件














，需要手动实现数据的双向绑定 

   

   

。

如何手动实现数据的双向绑定呢？请继续往下看
     

     

     。

✨手动实现自定义组件的双向绑定的步骤

在自定义组件中 
    
    
 ，通过props属性接收父组件传递的数据
     


     


     ，并在组件中定义一个内部变量来保存这些数据  




  




  



。 在组件内部使用v-model指令将输入控件绑定到内部变量上 


  


  


。 在组件内部监听输入控件的变化事件 




 




 




，并在事件处理函数中更新内部变量的值
     
     
    。 在组件内部通过$emit()方法触发一个自定义事件 

   

   

，并将内部变量作为参数传递给父组件   




   




   


。 在父组件中使用自定义事件的处理函数来更新父组件中的数据 



 



 



。

示例代码如下：

<!-- 父组件 --> <template> <div> <my-component v-model="message"></my-component> <p>{{ message }}</p> </div> </template> <script> import MyComponent from ./MyComponent.vue; export default { components: { my-component: MyComponent }, data() { return { message: } } } </script> <!-- 自定义组件 --> <template> <div> <input type="text" v-model="internalValue"> </div> <template> <script> export default { props: [value], data() { return { internalValue: } }, mounted() { this.internalValue = this.value; }, watch: { internalValue() { this.$emit(input, this.internalValue); } } } </script>

在上面的代码中
     

     

     ，我们定义了一个名为value的props属性来接收父组件传递的数据  




  




  



，同时定义了一个名为internalValue的内部变量来保存这些数据             。在组件挂载后 


  


  


，我们将value的值赋值给internalValue
    




    




    

。

在组件内部使用v-model指令将输入控件绑定到internalValue上














。当输入控件的值发生变化时
     
     
    ，我们使用watch来监听internalValue的变化事件   




   




   


，并在事件处理函数中使用$emit()方法触发一个名为input的自定义事件 



 



 



，并将internalValue作为参数传递给父组件             。

在父组件中             ，我们可以通过v-model指令将message属性与自定义组件的value属性进行双向绑定
     



     



     
。当自定义组件的input事件被触发时
    




    




    

，我们可以在事件处理函数中将事件的参数作为message属性的值进行更新














。

示例代码如下：

<!-- 父组件 --> <template> <div> <my-component v-model="message"></my-component> <p>{{ message }}</p> </div> </template> <script> import MyComponent from ./MyComponent.vue; export default { components: { my-component: MyComponent }, data() { return { message: } } } </script> <!-- 自定义组件 --> <template> <div> <input type="text" v-model="internalValue"> </div> </template> <script> export default { props: [value], data() { return { internalValue: } }, mounted() { this.internalValue = this.value; }, watch: { internalValue() { this.$emit(input, this.internalValue); } } } </script>

在上面的代码中














，我们定义了一个名为message的数据属性             ，并将它与自定义组件的value属性进行了双向绑定 
    
    
 。

同时
     



     



     
，在自定义组件中














，我们实现了数据的双向绑定 
    
    
 ，并通过$emit()方法触发了一个名为input的自定义事件来与父组件进行通信
     


     


     。这样就实现了自定义组件的双向绑定 




 




 




。

✨写在最后

✨ 原创不易
     


     


     ，希望各位大佬多多支持 

   

   

。 👍 点赞 




 




 




，你的认可是我创作的动力
     

     

     。 ⭐️ 收藏 

   

   

，感谢你对本文的喜欢  




  




  



。 ✏️ 评论
     

     

     ，你的反馈是我进步的财富 


  


  


。