一、起源：若直接对data内的数组、对象进行修改，不会触发视图更新
Vue文档关于这一点解释的很明白，笔者不再赘述，各位一定要看完文档再来
二、如何正确修改数组、对象以触发视图更新
2.1 数组
2.1.1 使用vue提供的变异方法
2.1.2 直接将data中的数组整个替换
如下例中，是要实现vm.items[1] = 'excess'
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ index }} : {{ item }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c']
},
created() {
this.items = ['a', 'test', 'c']
}
})
</script>
</body>2.1.3 使用set方法【后文详解】
2.2 对象
2.2.1 直接将data中的Object整个替换
如下例中，是要实现给object新增一个键值对{test: 'newthing'}
<body>
<div id="app">
<ul>
<li v-for="(value, name) in object">
{{ name }} : {{ value }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
created() {
this.object = {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10',
test: 'newthing'
}
}
})
</script>
</body>2.2.2 使用set方法【后文详解】
三、使用set方法
3.1 官方API文档
文档：Vue.set( target, propertyName/index, value )
注意Vue.set()还有个别名，用于vue实例——vue.$set( target, propertyName/index, value )
3.2 应用
数组
如下例中，是要实现vm.items[1] = 'excess'
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ index }} : {{ item }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c']
},
created() {
this.$set(this.items, 1, 'excess')
}
})
</script>
</body>对象
如下例中，是要实现给object新增一个键值对{test: 'newthing'}
<body>
<div id="app">
<ul>
<li v-for="(value, name) in object">
{{ name }} : {{ value }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
created() {
this.$set(this.object, 'test', 'newthing')
}
})
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。