摘要：
　　最近在学习Vue.js，其语法很像angularjs。然后在学习过程中遇到一些奇怪的事情，比如这篇提到的：修改data对象里面的数组，有的成功有的意外失效......

一、发现

最近在看Vue.js，然后发现data对象里面的属性并非都可以通过控制台来更新！

按照官方的说法：每个 Vue实例都会代理其 data对象里所有的属性，注意只有这些被代理的属性是响应的......配图一张：

然后艺灵就按照此示例练习了下，最终的结果有点出人意料之外。话不多说，上代码。

二、示例代码

2.1、js源码

<script type="text/javascript">
　var app=new Vue({
　　el:'#app',
　　data:{
　　　a:1,
　　　b:'',
　　　items:[
　　　　{text:'i0'},
　　　　{text:'i1'},
　　　　{text:'i2'}
　　　],
　　　todos:{
　　　　text1:'t1',
　　　　text2:'t2',
　　　　text3:'t3'
　　　},
　　　arrs:[
　　　　'Do the dishes',
　　　　'Take out the trash',
　　　　'Mow the lawn'
　　　]
　　}
　});
</script>

为了更直观的看到效果，有必要在页面中显示下data中的内容。

2.2、html相关代码

<div id="app">
　a:{{a}}
　<hr/>
　b:{{b}}
　<hr/>
　items:
　<ul>
　　<li v-for="item of items">{{item.text}}</li>
　</ul>
　todos:
　<ul>
　　<li v-for="item of todos">{{item}}</li>
　</ul>
　arrs:
　<ul>
　　<li v-for="item of arrs">{{item}}</li>
　</ul>
</div>

虽然此时还是不能直观看到效果，但没关系，刷新下浏览器就O了。我们可以看到这样的界面，配图： 接下来我们就按文档中说的，在控制台中来修改下上面的值吧。

三、控制台更新data中的属性值

在浏览器中直接按下f12快捷键即可打开浏览器的调试模式，然后我们点击：Console进入控制台，接下来就可以改代码了。配图：

3.1、控制台修改代码

app.a='10';/*成功*/
app.b='b有值了';/*成功*/
app.items[1].text='texti1';/*成功*/
app.todos.text1='todos666';/*成功*/
app.arrs[0]='arrs的值更新成功了没有？';/*失败！*/

在上面的5组修改中，前面4组都成功通过，并且页面上对应的值也被改动了，配图一张： 唯独最后一组失败！看官是不是有点疑惑？

没道理呀！其实艺灵也是觉得很奇怪，可能现在看的内容还比较少，无法解释这一现象。但艺灵有一个新的发现。

新发现：再次更新data属性中非arrs的任意一个值，刚修改失败的arrs的值会成功更新！可能不是很好理解，那上图一张：

再说直接点就是：艺灵发现：类似arrs这种的数组直接更新会不生效，此时再更新任意其他的值，arrs的值会跟着更新。

3.2、Vue.set可直接修改刚失败的代码

上面的方法虽然解决了，但多了一步，官方还提供了一个Vue.set，文档地址：cn.vuejs.org/v2/guide/reactivity.html#变化检测问题语法：Vue.set(object, key, value)。经测试发现这个可以直接改掉上面的值。在控制台中直接粘贴代码：Vue.set(app.arrs,0,'arrs的值更新成功了没有？');回车即可。配图：

四、demo页面

如果看官需要亲身体验下又不想手写那么多代码，可以使用艺灵提供的案例，直接在控制台粘贴即可。

4.1、demo展示

点我去demo页面

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2017-01-19/478.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。