一：

在我们使用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添加新属性不更新原因的更多相关文章

  1. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  2. nodejs操作 mongoose（mongodb）和Sequelize（mysql）查询数据后添加新属性未生效

    最近在着手koa时候,发现mongoose(mongodb)查询数据库后添加新属性,前端拿不到新属性问题, 然后测试了一下Sequelize(mysql),发现也有同样的问题存在.此时着手干! 1.1 ...

  3. vue data对象添加新属性触发视图

    <template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...

  4. OrCAD Capture CIS 为库里的元器件添加新属性

    1.进入元器件编辑界面 2.菜单:Options > Part Properties... 3.在窗口User Properties中,点击按钮New... 4.在弹出的子窗口NewProper ...

  5. Vue添加新的响应式属性

    vm.userProfile = Object.assign({}, vm.userProfile, { age: , favoriteColor: 'Vue Green' })

  6. js中对象如何添加新属性？

    假如登陆需要用户.密码.是否记住密码,那么怎么定义一个对象保存这些信息 1)方法1:声明动态对象 添加属性 //创建obj对象 var obj = new Object(); //为对象添加动态属性 ...

  7. CoreData 添加新字段

    给CoreData添加新属性,就是给数据库加新字段,那么必须要进行数据库版本升级及CoreData数据迁移: 具体操作是 1.选择DemoCoreData.xcdatamodeld 文件,Editor ...

  8. 针对vue中请求数据对象新添加的属性不能响应式的解决方法

    1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...

  9. ASP.NET MVC系列:为已有模型添加新的属性

    在模型类Movie中添加一个新的属性Rating

随机推荐

  1. 树结构ztree的 ajax交互的简单使用

    今天做前端页面要用到树结构,用了第三方插件ztree,搞了好久不过终于弄出来了,, 一点小心得.(用的版本 V3 ) 首先看下载的文件结构: 一:将要用到的CSS 和 JS 拷贝到工程中,我这里在工程 ...

  2. 蓝桥杯 Beaver's Calculator

    问题描述 从万能词典来的聪明的海狸已经使我们惊讶了一次.他开发了一种新的计算器,他将此命名为"Beaver's Calculator 1.0".它非常特别,并且被计划使用在各种各样 ...

  3. tomcat正常启动但是访问 404

    最近遇到了一些奇葩的的问题,搞了好半天才处理掉.今天就简单记录一下吧,以备不时之需.  问题描述: 在整合spring mvc项目的完成后,正常启动tomcat,发现tomcat启动成功了,但是访问本 ...

  4. Swing的MVC结构

    --------------siwuxie095                             工程名:TestMVC 包名:com.siwuxie095.mvc 类名:Test.java ...

  5. 第一次WM_PAINT事件执行前显示白色框 的解决办法

    界面显示前,总是会显示白色或白加黑的窗体, 开始以为是图片加载慢的原因,后来发现这个框是在第一次WM_PAINT执行前显示的. 解决办法很简单,在CreateWindow的时候,加上WS_POPUP样 ...

  6. 34- 24 Point game

    http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=43 24 Point game 时间限制:3000 ms  |  内存限制:65535 KB ...

  7. Android 菜单之子菜单SubMenu

    子菜单就是在点击了菜单中的选项后弹出的要对菜单中选项操作的菜单           他的操作与之前的两种类型的菜单操作差不多 动态添加 @Override public boolean onCreat ...

  8. ZROI2018提高day4t1

    传送门 分析 一道贪心题,我们用两个优先队列分别维护卖出的物品的价格和买入但没有卖出的物品的价格,然后逐一考虑每一个物品.对于每一个物品如果他比卖出的物品中的最低个价格,则改将现在考虑的物品卖出,将之 ...

  9. Django rest framework之序列化小结

       最近在DRF的序列化上踩过了不少坑,特此结合官方文档记录下,方便日后查阅. [01]前言    serializers是什么?官网是这样的”Serializers allow complex d ...

  10. unix 下 shell 遍历指定范围内的日期

    UNIX下遍历日期,date 没有 -d 的参数,所以需要自己处理. 下面使用时差的方法进行计算,遍历的日期是降序的 #!/usr/bin/ksh . $HOME/.profile timelag= ...