前言

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

对象

看一下示例：

在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的

<template>

  <p>{{userInfo.name}}</p>

        <p v-if="userInfo.sex">{{userInfo.sex}}</p>

        <button @click="updateName">修改userInfo</button>

        <button @click="addSex">添加性别</button>

</template>


<script>

    data(){

        userInfo:{name:'小明'}

    },

    methods:{

        updateName(){

            this.userInfo.name='小红'

        },

        addSex(){

            this.userInfo.sex = '男'

        }

    }

</script>

可以发现，在updateName函数中，我们尝试给userInfo对象修改name值，并成功修改，但添加的sex属性失败了

分析

  • 名字修改成功是因为vue初始化时为对象的属性建立 了getter/setter函数，可以监测数据变化并挂载到视图上
  • 而新增的sex属性由于错过了建立getter/setter阶段，即使在userInfo对象中添加成功，但由于没有setter函数，无法响应到视图上

解决方法

方法一：$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

methods:{

  updateName(){

    this.userInfo.sex='男'

    this.$forceUpdate();

  }

}

方法二：Vue.set(object, key, value)

methods:{

  updateName(){

    this.$set(this.userInfo,'sex,'男');

  }

}

数组

上面的例子反映的是给对象添加属性时的问题，数组同样有类似的问题，请看下面的例子

<body>

    <div id="app">

        <p>{{userInfo.name}}</p>

        <p v-if="userInfo.sex">{{userInfo.sex}}</p>

        <ul>

            <li v-for="(item,index) in hobbies" :key='index'>{{item}}</li>

        </ul>

        <button @click="update">修改爱好</button>

    </div>

<script>

    let vm = new Vue({

        el:'#app',

        data: {

            userInfo:{name:'小明'},

            hobbies:['抽烟','喝酒','烫头']

        },

        methods:{

            update(){

                this.hobbies[2] = '读书'

            }

        }

    })

</script>

</body>

点击修改爱好按钮后页面并没有修改，打开控制台发现值已修改

解决方法

一、使用vue提供的更新数组的方法

vue给我们提供了它封装后的可用于对数组进行增删改查操作的方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

上面的例子

update(){

    //参数分别是：开始索引，是否删除（0：添加 1：删除），修改后的值

    this.hobbies.splice(2,1,'读书')

},

使用封装后的方法则可以成功渲染到视图

二、Vue.set()

update(){

    //参数分别是：对象，索引，修改后的值

     Vue.set(this.hobbies,2,'读书')

},

三、this.$forceUpdate()

 update() {

     this.hobbies[2] = '读书'

     this.$forceUpdate()

 },

forceUpdate() & set的更多相关文章

  1. vue之$forceUpdate

    由于一些嵌套特别深的数据,导致数据更新了.UI没有更新(连深度监听都没有监听到) this.$forceUpdate();

  2. React篇-报错信息：warning: Can't call setState (or forceUpdate) on an unmounted component.

    报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...

  3. Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改

    html <div id="app"> </div> <p><button onclick="destroy()"&g ...

  4. Can’t call setState (or forceUpdate) on an unmounted component 警告处理方法

    Can’t call setState (or forceUpdate) on an unmounted component Warning: Can't call setState (or forc ...

  5. 温故而知新 Vue 原来也有this.$forceUpdate();

    由于一些嵌套特别深的数据,导致数据更新了.UI没有更新(连深度监听都没有监听到),我捉摸着有没有和react一样的立即更新UI的API呢 this.forceUpdate()呢?结果还真有: this ...

  6. Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

    Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

  7. VUE项目中使用this.$forceUpdate()强制页面重新渲染

    在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,我是在使用多层v-for嵌套时出现这种问题的, 解决方法:运用 this.$force ...

  8. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

  9. vue $forceUpdate() 强制重新渲染

    vue $forceUpdate() 强制重新渲染:https://blog.csdn.net/z9061/article/details/94862047

  10. vue2.0 操作数组下标不跟新ui，使用set()或$forceUpdate 也不能跟新视图情况

    在vue 2.0 中操作数组不跟新ui图,即使使用set()或 $forceUpdate也不能跟新视图,我在前段时间也遇到了一个问题,当时我使用的时element 的tree 组件 由于需要对tree ...

随机推荐

  1. nginx 常用x代码

    1.nginx 禁止ip直接访问,只允许域名访问,直接在.conf文件里 server上面再添加一个server 代码,不可以写同一个server里: server { listen 80 defau ...

  2. pandas学习小记

    pandas操作整理 导入数据: pd.read_csv(filename):从CSV文件导入数据 pd.read_table(filename):从限定分隔符的文本文件导入数据 pd.read_ex ...

  3. YbtOJ#903-染色方案【拉格朗日插值,NTT,分治】

    正题 题目链接:https://www.ybtoj.com.cn/contest/115/problem/3 题目大意 两个长度为\(n+1\)的序列\(a,b\) \(a_i\)表示涂了\(i\)个 ...

  4. Kronecker product

    Kronecker product 的基本运算 结合律 \begin{equation} \mathrm{A} \otimes (\mathrm{B + C}) = \mathrm{A} \otime ...

  5. 十一、Abp vNext 基础篇丨测试

    前言 祝大家国庆快乐,本来想国庆之前更新完的,结果没写完,今天把剩下的代码补了一下总算ok了. 本章节也是我们后端日常开发中最重要的一步就是测试,我们经常听到的单元测试.集成测试.UI测试.系统测试, ...

  6. 从零入门 Serverless | Knative 带来的极致 Serverless 体验

    作者 | 冬岛 阿里巴巴高级技术专家 Serverless 公众号后台回复"knative",即可免费下载<Knative 云原生应用开发指南>电子书! 导读:Serv ...

  7. Idea进行java应用的远程调试Remote debugging

    本文可以解决如下两个问题: 1.如何处理和调试那些只发生在生产环境(或其他远程环境)而本地开发环境可能没办法重现的"问题". 2.只有一个可以部署的war/jar包,只有class ...

  8. Azure Tips 第一期： Azure 中的安全监视工具，数据存储， 动态数据屏蔽以及资源部署

    # 1 Azure 中的安全监视工具 微软 Azure 云提供以下监控工具,可用于观察操作和检测异常行为. Azure 安全中心 Azure 安全中心是一个统一的基础结构安全管理系统,可以增强数据中心 ...

  9. 洛谷2151[SDOI2009]HH去散步（dp+矩阵乘法优化）

    一道良好的矩阵乘法优化\(dp\)的题. 首先,一个比较\(naive\)的想法. 我们定义\(dp[i][j]\)表示已经走了\(i\)步,当前在点\(j\)的方案数. 由于题目中限制了不能立即走之 ...

  10. 试题 算法训练 区间k大数查询 java题解

    资源限制 时间限制:1.0s   内存限制:256.0MB 问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正 ...