vue双向数据绑定原理

一、什么是双向数据绑定？

        双向数据绑定指的是Vue 会自动跟踪数据状态并在其发生变化时响应式地更新 DOM，且DOM更新时，数据也会进行相应的更新。

二、Vue双向数据绑定原理

        vue双向数据绑定原理主要是依靠数据劫持结合发布者-订阅者的方式来实现的。

        先对数据进行监听，然后当监听的数据发生变化时，通知订阅者是否需要更新页面，若更新，则会执行特定的更新函数，对页面进行更新；通过Object.defineProperty()来劫持各个属性的setter及getter，在数据发生变化时，触发对应的回调函数。

        当把一个js对象作为vue的data内容时，vue会遍历该对象的所有属性，并通过Object.defineProperty()将其转换位setter或getter，vue对其进行追踪和依赖，从而实现双向数据绑定。

        故，vue双向数据绑定的核心是Object.defineProperty()。

三、Object.defineProperty(obj, prop, descriptor)

        obj：定义属性对象

        prop：定义或修改的属性

        descriptor：具体的改变方法

let obj = {}
Object.defineProperty(obj,'name',{
    get:function(){
        console.log('调用了get方法')
    },
    set:function(){
        console.log('调用了set方法')
    }
})
obj.name;
obj.name= 'Tom'

四、双向数据绑定及单项数据绑定的区别 

        单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码。同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。

        基本上双向绑定的优缺点就是单向绑定的镜像了。优点是在表单交互较多的场景下，会简化大量业务无关的代码。缺点就是由于都是“暗箱操作”，我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心)，潜在的行为太多也增加了出错时 debug 的难度。同时由于组件数据变化来源入口变得可能不止一个，新手玩家很容易将数据流转方向弄得紊乱，如果再缺乏一些“管制”手段，最后就很容易因为一处错误操作造成应用雪崩。