vue的"双向数据绑定"实现

双向数据绑定的认知错误 vue数据改变视图响应的原理 jquery已经没落了

vue的认知错误

v-model-demo

<div id="app">
    <input type="text" v-model="val" />
    {{val}}
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        val: 'hello'
      }
    })
</script>

https://codepen.io/bb798sky/pen/ZEzNOGB

vue可以通过数据控制视图的呈现，可以通过v-model指令在视图修改数据，数据的改变又可以在视图上呈现出来，也就认为了vue是双向绑定的。

有时一些缺乏经验的面试官也会问：”vue双向数据绑定的实现原理”，
其实他们想问的是vue的数据改变视图响应的原理，也就是响应系统的是如何实现的。

vue是单向数据流的双向数据绑定v-model是封装的一个指令是vue的一个语法糖，并不是vue的特性。

v-model语法糖的实现

<div id="app">
   <input type="text" :value="val" @input="val = $event.target.value" />
   {{val}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   var app = new Vue({
     el: '#app',
     data: {
       val: 'hello'
     },
   })
</script>

https://codepen.io/bb798sky/pen/LYPoRKN
当触发@input事件时执行表达式同步input里的内容到data中

这个例子也可以写成这样
写成函数放到methods中

<div id="app">
    <input type="text" :value="val" @input=handleInputChange />
    {{val}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 var app = new Vue({
      el: '#app',
      data: {
        val: 'hello'
      },
      methods:{
        handleInputChange(e){
          this.val = e.target.value
        }
      }
 })

vue2.x响应系统原理

是时候深入一下了！Vue 最独特的特性之一，非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。
vue可以只修改数据视图就可以得到响应，框架给做了什么。

在vue2.x中vue的响应系统依赖的是JavaScript的api Object.defindProperty Object.defineProperty 是 ES5 中一个无法 shim(无法通过babel等方式JavaScript语法实现) 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。