先来看一个例子
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>性别：{{ obj.sex || '未知' }}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
obj: {}
}
}
});
setTimeout(() => {
vm.obj.sex = '男';
}, 2000)
</script>
</body>
</html>
|
让我们先来在浏览器上运行一下上面的代码，页面显示内容性别：未知，过了两秒后，新增一个性别sex的属性，并赋值男，但是我们发现页面显示的内容并没有如我们所预期的那样改变。
结论：Vue 无法探测普通的新增属性。
Vue.set 用法
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
模版代码：
1
2
3
4
5
| // 对应参数：
// vm.obj {Object | Array} target
// 'sex' {string | number} propertyName/index
// '男' {any} value
Vue.set(vm.obj, 'sex', '男');
|
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>性别：{{ obj.sex || '未知' }}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
obj: {}
}
}
});
setTimeout(() => {
Vue.set(vm.obj, 'sex', '男');
}, 2000)
</script>
</body>
</html>
|
在浏览器中运行上面的代码，刚开始页面显示内容为性别：未知，过了两秒后，页面显示内容为性别：男，内容改变，目的达到。