vue数据双向绑定原理

1.数据双向绑定

v-bind属性绑定值 是单向数据绑定（只修改前台数据，后台不变）

v-model 表单数据绑定 是数据双向绑定

<template>
  <!-- 表单元素的vlaue绑定 -->
  <input type="text" :value="value" />
  <input type="text" v-model="value" />
</template>

<script>
export default {
   
  name: 'App',
  data(){
   
    return {
   
      value:'请输入...',
    }
  },
  watch:{
       //监听（value值发生变化）
    value(nowValue, oldValue) {
   
      console.log(nowValue, oldValue);
    },
  }
}
</script>

第二个输入时，会触发监听
说明后台value值被修改（即数据双向）

2.数据双向绑定原理 MVVM

原生js 高级写的： 发布和订阅模式做的数据双向，也就是说数据和视图同步
（整个vue.js都是js设计模式写的）

设计模式：三层结构  

MVC：  model(数据层)    view(视图层)   contral(控制器层  逻辑管理层)