• 面试题系列---【data数据改变,页面不更新原因及解决方案】


    一、为什么会出现data数据改变,页面不更新

    vue2是用过Object.defineProperty实现数据响应式,组件初始化时,对data中的数据进行递归遍历,对data的每一个属性进行劫持,添加set,get方法。我们后来新加的newProperty属性,并没有通过Object.defineProperty设置成响应式数据,修改后不会视图更新。

    二、解决vue中对象属性改变视图不更新的问题?

    情况一:数组

    1.数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会实时更新

    2.当你修改数组的长度时,这样视图不会实时更新**

    解决方法:

    1.Vue.set(example1.items[0], { childMsg: 'Changed!'}:

    ​ 一个参数是需要更新的数组或对象,第二个参数是数组的下标或者对象的属性名,第三参数是更新的内容。

    //数组的第3个内容更新为"向日葵"
    let arr = ["玫瑰花","康乃馨","薰衣草"]
    this.$set(arr,2,"向日葵")   //第一个参数是数组,第二个参数是下标,第三个参数是新的内容
    //更新之后的arr是["玫瑰花","康乃馨","向日葵"]
    

    2.使用Vue的变异方法 pop() push() shift() unshift() revese() sort() splice() 也会触发视图更新

    情况二:对象

    是改变了对象的某一项,但是其他依赖这个数据的视图没更新

    解决方案:

    1.利用Vue.set(object,key,val)

    2.利用this.$set(this.obj,key,val)

    3.利用Object.assign({},this.obj)创建新对象

    4.可以先删除掉该项,然后再使用set 去添加

  • 相关阅读:
    day14_oracle数据库备份
    day13_存储过程小记
    day13_先沃联盟定时任务
    day13_自动抽取数据——监控存储过程
    [笔记]《HTTP权威指南》- 实体和编码
    [笔记]《白帽子讲Web安全》- Web框架安全
    [笔记]《Vue移动开发实战技巧》- Vue-router使用
    WPF与Win32互操作
    [翻译]HTML5
    学习资料收藏
  • 原文地址:https://www.cnblogs.com/chenhaiyun/p/14910465.html
Copyright © 2020-2023  润新知