最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做演示实践,查文档的方式解决了,这里做一个总结。
1例
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> vue
& lt;脚本src=" https://unpkg.com/vue@2.3.3/dist/vue.js”祝辞& lt;/script>
& lt; style>
李:{徘徊
光标:指针;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="包装"比;
& lt; ul>
& lt;李v=v“项目,索引项”:单击“=贝?指数)比;
& lt; span> {{item.name}} & lt;/span>
& lt; span>{{数字(指数)}}& lt;/span>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; script>
var vm=new Vue ({
埃尔:“.wrap”,
数据:{
数字:[],
项目:(
{名称:“jjj”},
{名称:“三k党”},
{名称:“微光”},
］
},
方法:{
处理:函数(指数){//原因:更新数据,视图层未渲染,但通过控制台这个数组可以发现数据确实更新了
如果(typeof (this.numbers(指数))===岸ㄒ濉?{
这一点。数字(指数)=1;
其他}{
this.numbers(指数)+ +;
}
}
}
});
& lt;/script>
& lt;/body>
& lt;/html>
之前
这里的实现目的很明确——我希望在点击李时先检测是否存在,当然是不存在的,所以就将值设置为1,如果再次点击,就让数字累加。
但是出现的问题是:点击之后数字并没有在视图层更新,而通过游戏机打印发现数据确实更新了,只是视图层没有及时的检测到,而我一直以来的想法就是:既然vue实现的时数据双向绑定,那么在模型层发生了变化之后为什么就没有在视图层更新呢& # 63;,
首先,我就考虑了这是不是数组的问题,于是,我测试了下面的例子:
例2
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> vue
& lt;脚本src=" https://unpkg.com/vue@2.3.3/dist/vue.js”祝辞& lt;/script>
& lt; style>
李:{徘徊
光标:指针;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="包装"比;
& lt; ul>
& lt;李v=v“项目,索引项”:单击“=贝?指数)比;
& lt; span> {{item.name}} & lt;/span>
& lt; span>{{数字(指数)}}& lt;/span>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; script>
var vm=new Vue ({
埃尔:“.wrap”,
数据:{
数字:[],
项目:(
{名称:“jjj”},
{名称:“三k党”},
{名称:“微光”},
］
},
方法:{
处理:函数(指数){//不是数组,这里更新数据就可以直接在视图层渲染
this.items(指数). name +=俺晒Α?
}
}
});
& lt;/script>
& lt;/body>
& lt;/html>
之前
这时,我再测试时就发现,这里的模型层发生了变化时,视图层就能及时,有效的得到更新。
而数组为什么不可以呢?,
于是在文档上的一个不起眼的地方找到了下面的说明:
其中最重要的一句话就是- - -如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新,这个方法主要用于避Vue不开能检测到属性被添加的限制。
那么什么情况下Vue是不能检测到属性被添加呢?,根据参考链接,我们在文档上看到了很好的说明- - - - - -深入响应式原理
首先,我们要了解Vue是如何实现数据的双向绑定的!,
把一个普通JavaScript对象传给Vue实例的数据选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter.Object.defineProperty是仅ES5支持,且无法垫片的特性,这也就是为什么Vue不支持IE8以及更低版本浏览器的原因。
知识补充:
访问器属性不包含数据值,他们包含一对getter函数和setter函数(这两个函数不是必须的)。在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值;在写入访问器属性是,会调用setter函数并传入新值,这个函数负责决定如何处理数据。
访问器属性不能直接定义,必须是用Object.defineProperty()来定义。
