vue 数据双向绑定 watch监听的数组, 对象， 点对象赋值无效的解决办法

6.26更新

watch监听对象中的属性变化

6.5更新

vue数据双向绑定

首先了解生命周期的大概（稍后补）

beforeCreated ：

created：

beforeMounted：

mouted：

beforeDestory：

destoried：

beforeupdate：

update：

应该是这么几个

我们应该知道数据双向绑定会触发update这个钩子，只有在data发生变化的时候，才会触发这个钩子，从而更新模版数据。

但是只要data变化就可以触发了吗，不是这样的。

data的变化得需要是object.defineProperty的set函数来触发的，才能触发模版更新。

下面的例子，是个例外，数组的直接赋值没有触发set函数，导致，模版监听不到数据变化，更新不上去。

 

例子

desc:

期望：每次点击，将array[i]赋值点击相应的选项，判断array[i]是否与选项一致，一致，就做选中样式。你的答案也相应渲染array[i]。

结果：array数组内容发生变化，但是模板上一点变化也没有。没有样式，没有渲染答案。

 

object.defineProperty

研究过vue数据双向绑定的同学一定都知道object.defineProperty

Object.defineProperty(obj, prop, descriptor)

obj：必需。目标对象

prop：必需。需定义或修改的属性的名字

descriptor：必需。目标属性所拥有的特性必需。目标对象

prop：必需。需定义或修改的属性的名字

descriptor：必需。目标属性所拥有的特性

方便理解，粘贴一段以前写的数据劫持的代码

watch的监听机制是依赖于vue的$set方法的

       var defineGetAndSet = function (obj, propName) {
                try{
                    Object.defineProperty(obj, propName, {
                        get: function () {
                            return bValue
                        },
                        set: function (newValue) {
                            bValue = newValue;
                            scan()
                        },
                        enumerable: true,
                        configurable: true
                    });
                }catch (error) {
                    console.log(error)
                }
            }

 

obj.a = ‘aaa’ 这样是会触发set方法的，

但是，点对象赋值法，array[index] = ‘data'，这样对数组的赋值

在模板中是无法监听到数组的变化的，但是数组他也确实是变化了

这个时候我们需要手动set

vue.set(target,key,value)

这样一来就能实现最上面的数组动态渲染到模板上了