VUE数据双向绑定与单向数据流的思考

1 VUE的数据双向绑定

1.1双向绑定的原理

VUE实现数据的双向绑定，原理在于通过Object.defineProperty()中的get和set方法实现的一个语法糖。v-model是:value="sth"和@change="val => sth = val"的简写形式。其本质还是数据的单向流动。

var obj = {
      foo: 'foo'
    }

    Object.defineProperty(obj, 'foo', {
      get: function () {
        console.log('将要读取obj.foo属性');
      }, 
      set: function (newVal) {
        console.log('当前值为', newVal);
      }
    });

    obj.foo; // 将要读取obj.foo属性
    obj.foo = 'name'; // 当前值为 name

1.2 数组和对象发生改变，没有触发view更新，双向绑定失效

其实这个问题，vue的官网已经给了解答。所以呢，官网才是最好的老师。

至于为什么不能检测到数据变化，在于vue实现数据双向绑定的机制是数据劫持，但是数组没有get,set方法，所以就不会更新view，解决方案就是主动通知vue去更新或是使用vue本身可以监听到的数组的方法。

1.$set()方法重新渲染  (Vue.set(object, propertyName, value)) this.$set是Vue.set方法的别名

this.$set(this.student,"age", 24)
//this.student为你在data中声明的数组名，‘age’是你要改变的数组下的指定字段名，24是你要变化的值

2.深拷贝

let name2 = JSON.parse(JSON.stringify(this.name));
//执行完业务代码后
this.name = name2

3.this.nextTick()

在vue中数据向视图上进行更新的操作，是异步的.

异步的就意味着，在代码中更改完数据之后，直接去访问页面中的元素中的内容，还是老数据;

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

2 VUE的单向数据流

vue的单向数据流借鉴于react的单向数据流，应用于组件之间的传值。一个组件可能被多个组件引用，这样我们接收父组件传过来的数据，就要遵循单向数据流的规则，不能够进行改变，要不然就会对父组件的数据产生污染。存在vuex里面的数据，是单向数据流的标准提现，对store里面的数据，只能进过mutations.js进行修改。

总结，单向数据流主要是应用在组件之间的传值，数据的双向绑定，主要体现在组件内的，数据的变化引起视图的改变，数据的双向绑定本质上也是单向数据流，只是运用了v-modle的语法糖，让我们的代码更简单。