vue添加新属性不更新原因
Posted airen123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue添加新属性不更新原因相关的知识，希望对你有一定的参考价值。
一：
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
姓名：{{ name }}<br>
年龄：{{age}}<br>
性别：{{sex}}<br>
说明：{{info.content}}
</div>
<!-- javascript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
var data = {
name: "简书",
age: ‘3‘,
info: {
content: ‘my name is test‘
}
}
var key = ‘content‘;
var vm = new Vue({
el:‘#app‘,
data: data,
ready: function(){
//Vue.set(data,‘sex‘, ‘男‘)
//this.$set(‘info.‘+key, ‘what is this?‘);
}
});
data.sex = ‘男‘；
</script>
</body>
</html>
运行结果：
姓名：简书
年龄：3
性别：
说明：my name is test
为什么会这样呢？当去查对应文档时，你会发现**响应系统 **,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter,如上示例，将data在控制台打印出来会发现：
data打印结果
在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动更新视图；
解决方法：
<script>
var data = {
name: "简书",
age: ‘3‘,
info: {
content: ‘my name is test‘
}
}
var key = ‘content‘;
new Vue({
el:‘#app‘,
data: data,
ready: function(){
Vue.set(data,‘sex‘, ‘男‘);
this.$set(‘info.‘+key, ‘what is this?‘);
}
});
</script>
1、通过Vue.set方法设置data属性，如上：
Vue.set(data,‘sex‘, ‘男‘)
2、您还可以使用 vm.$set实例方法，这也是全局 Vue.set方法的别名:
var key = ‘content‘; //这种主要用于当对象中某个属性值动态生成时处理方式
this.$set(‘info.‘+key, ‘what is this?‘);
或
this.$set(‘info.content‘, ‘what is this?‘);
二：
vue教程中有这样一个注意事项：
第一种具体情况如下：
运行结果：
当利用索引改变数组某一项时，页面不会刷新。解决方法如下：
运行结果：
三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。
在做项目的过程中，有个发现，先上代码：
第一个数组通过利用下标改变第二项，第二个数组使用$set()方法改变第二项，根据上面的代码，我们会知道：第一个数组的第二项改变不会在页面更新，只有第二个数组的更改会在页面更新。然而结果却是：
两个数组的的改变都在页面更新了。。
也就是说，$set()方法调用时，页面会全部更新一遍。
三：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.set使用</title>
<style>
.list .active {
background-color: #E35885;
}
</style>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="getList()">获取列表并添加新属性</button>
<ul class="list" v-if="showList">
<li v-for=‘(item,index) in List‘ v-bind:class=‘{active:item.active}‘ v-on:click="beActive(index)">{{item.name}}</li>
</ul>
</div>
<script>
Vue.config.devtools = true;
var app = new Vue({
el: ‘#app‘,
data: {
showList: false,
List: [{
name: "选项1"
}, {
name: "选项2"
}, {
name: "选项3"
}]
},
methods: {
getList: function() {
let len = this.List.length;
for(let i = 0; i < len; i++) {
this.$set(this.List[i], ‘active‘, false);
}
this.List[0].active = true;
this.showList = true;
},
beActive: function(index) {
let len = this.List.length;
for(let i = 0; i < len; i++) {
this.List[i].active = false;
}
this.List[index].active = true;
}
}
})
</script>
</body>
</html>
---------------------
作者：歪歪100
来源：CSDN
原文：https://blog.csdn.net/weixin_41646716/article/details/81092253
版权声明：本文为博主原创文章，转载请附上博文链接！
以上是关于vue添加新属性不更新原因的主要内容，如果未能解决你的问题，请参考以下文章