对vue双向绑定的思考

对于数组

直接更改数组里面的项的值是不会有view响应的，如：

<ul>
  <li v-for="item in test">
    {{ item }}
  </li>
</ul>
<button @click="test()">click</button>
    
export default {
    data () {
        return {
            test:[1,2,3]
        }
    },
    methods:{
        test(){
            this.test[0] -= 1;
        },
    }
}

你能够经过如下方法更改数组值来使他响应

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

对于对象

在对象中的数据若是在js中被改变，他就会同时在对应的视图层中改变。

可是这只适用于最开始出如今data里面的，若是是后来添加的项，并不会动态改变。

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。因为 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，因此属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

如：

var vm = new Vue({
  data:{
  a:1
  }
})

// `vm.a` 是响应的

vm.b = 2
// `vm.b` 是非响应的

虽说有的地方是非响应的，可是若是其余地方有视图更新的话，那么非响应的地方的视图也会更新

并且若是是后来加在对象上也想使他响应的话能够调用

Vue.set(object, key, value)

或

this.$set(object, key, value)

vue数据渲染过程

到了如今，就只有两个问题须要深究一下

为何监听不到数组的变化

为何其余的view变化后数组之间的变化也会渲染在视图上