精华内容
下载资源
问答
  • 主要介绍了vue视图不更新情况详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue视图不更新情况

    千次阅读 2019-06-25 22:09:09
    vue视图为什么渲染页面的原因 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object....

    我们有时会会在处理vue项目的时候,遇到数据变化了,但是视图并没有实时渲染的情况

    vue视图为什么不渲染页面的原因
    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器
    这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口
    每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
    1.视图不更新情况一

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以

    1.哪些方法使数组变化,可以被vue检测到
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
    2.Vue 不能检测以下变动的数组:
    ① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
    ② 当你修改数组的长度时,例如: vm.items.length = newLength
    2.视图不更新情况二

    第二种视图不更新情况是Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的
    在这里插入图片描述
    Vue 不允许在已经创建的实例上动态添加新的根级响应式属性

    解决办法

    然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

    Vue.set(vm.someObject, ‘b’, 2)
    或者
    this.$set(this.someObject,‘b’,2) (这也是全局 Vue.set 方法的别名)
    有时你想向一个已有对象添加多个属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,这样添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:

    // 代替 Object.assign(this.someObject, { a: 1, b: 2 })
    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) // 深拷贝
    3.视图不更新情况三(异步更新队列)

    在最新的项目中我遇到了一个特别诡异的情况,就是数据第一次的获取到了,也渲染了,但是第二次之后数据只有在再一次渲染页面的时候更新,并不能实时更新

    你渲染的数据是你上一次选择的数据,并不是本次选择的数据,俗称“慢一拍”

    现在我们就来了解一下这个问题

    可能你还没有注意到,Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。
    如果同一个 watcher 被多次触发,只会被推入到队列中一次。
    这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。
    然后,在下一个的事件循环“tick”中,
    Vue 刷新队列并执行实际 (已去重的) 工作。
    Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。
    虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如:

    在这里插入图片描述
    因为 $nextTick() 返回一个 Promise 对象,所以你可以使用新的 ES2016 async/await语法完成相同的事情:

    在这里插入图片描述

    展开全文
  • vue 视图不更新的几种解决办法

    千次阅读 2019-03-04 19:40:46
    vue.js视图不更新的三种解决办法: 1.Vue.set(vm.someObject, 'keyORindex', 2) 2、this.$set(this.someObject,'keyORindex',2) 3、// 代替 `Object.assign(this.someObject, { a: 1, b: 2 }) this.someObject =...

    vue.js视图不更新的三种解决办法:

    1.  Vue.set(vm.someObject, 'keyORindex', 2)

    2、this.$set(this.someObject,'keyORindex',2)

    3、// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })

    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

    4.splice  替换  传三个参数 (开始下标,删除个数,替换内容)

    this.listMoveX.splice(index,1,'0');
     

     

    展开全文
  • vue数组属性发生改变时,视图不更新如何解决 data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新; ​ 但在实际开发中,若data中数据类型较为复杂,方法methods中改变对象的属性,视图也就是...

    vue数组属性发生改变时,视图不更新如何解决

    data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新;

    ​ 但在实际开发中,若data中数据类型较为复杂,方法methods中改变对象的属性,视图也就是页面并不会改变

    ​ 原因是vue监听不到数据类型特别复杂的属性。

    ​ 原因:因为 vue 的检查机制在进行视图更新时无法监测 数组中的某个对象的属性值的变化。

    1,使用this.$set(this.obj,key,val) 来解决

    对象操作:

    ​ 三个参数:this.$set(“改变的对象”,“改变的对象属性”,“值”)

    数组操作:

    ​ 三个参数:this.$set(“数组”,“下标”,“值”)

    <template>
      <div class="hello">
        <button @click="setMessage">添加属性</button>
        {{ student.name }}
        <input type="text" v-model="student.age">
      </div>
    </template>
    
    <script>
    export default {
     data() {
       return {
         student: {
           name: '张三',
         }
       }
     },
     methods: {
       setMessage() {
         this.$set(this.student, 'age', 15)
         console.log(this.student)
       }
     }
    }
    </script>
    

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

    <script>
    export default {
      data() {
        return {
          student: {
            name: '张三',
          }
        }
      },
      methods: {
        setMessage() {
          this.student.age = 15
          this.student = Object.assign({}, this.student)
          console.log(this.student)
        }
      }
    }
    </script>
    

    3,使用vue.set()

    ​ 可以使用Vue.set()方法将响应式属性添加到嵌套的对象上

    // Vue.set(object, key, value)
    // object 要更改的数据源(可以是对象或者数组)
    // key  要更改的具体数据
    // value :重新赋的值
    
    export default() {
      data() {
        food: {
          name: 'apple' 
        }
      }
    }
    
    Vue.set(food, 'count', 1);
    

    vue3.0与vue2.0的区别

    1,性能提升

    ​ 更小巧,更快速;支持摇树优化;支持 Fragments 和跨组件渲染;支持自定义渲染器。

    2,API 变动

    ​ 除渲染函数 API 和 scoped-slot 语法之外,其余均保持不变或者将通过另外构建一个兼容包

    ​ 除了 scoped slot 语法有一些微调之外变动最大的部分将是渲染函数(render) 中的虚拟 DOM 的格式

    3,重写虚拟 DOM (Virtual DOM Rewrite)

    ​ 随着虚拟 DOM 重写,减少 运行时(runtime)开销。重写将包括更有效的代码来创建虚拟节点

    4,更精准的变更通知

    ​ 在2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行

    ​ 3.x 版本中,只有依赖那个属性的 watcher 才会重新运行

    5,默认进行懒观察(lazy observation)

    ​ 2.x 版本,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,

    ​ 这可能会在页面载入时造成明显的性能压力。

    ​ 3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效

    6,3.0 新加入了 TypeScript 以及 PWA 的支持

    展开全文
  • vue数组属性发生改变时,视图不更新如何解决 data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新; ​ 但在实际开发中,若data中数据类型较为复杂,方法methods中改变对象的属性,视图也就是...

    vue数组属性发生改变时,视图不更新如何解决

    data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新;

    ​ 但在实际开发中,若data中数据类型较为复杂,方法methods中改变对象的属性,视图也就是页面并不会改变

    ​ 原因是vue监听不到数据类型特别复杂的属性。

    ​ 原因:因为 vue 的检查机制在进行视图更新时无法监测 数组中的某个对象的属性值的变化。

    1,使用this.$set(this.obj,key,val) 来解决

    对象操作:
    ​ 三个参数:this.$set(“改变的对象”,“改变的对象属性”,“值”)

    数组操作:
    ​ 三个参数:this.$set(“数组”,“下标”,“值”)

    <template>
      <div class="hello">
        <button @click="setMessage">添加属性</button>
        {{ student.name }}
        <input type="text" v-model="student.age">
      </div>
    </template>
    
    <script>
    export default {
     data() {
       return {
         student: {
           name: '张三',
         }
       }
     },
     methods: {
       setMessage() {
         this.$set(this.student, 'age', 15)
         console.log(this.student)
       }
     }
    }
    </script>
    

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

    <script>
    export default {
      data() {
        return {
          student: {
            name: '张三',
          }
        }
      },
      methods: {
        setMessage() {
          this.student.age = 15
          this.student = Object.assign({}, this.student)
          console.log(this.student)
        }
      }
    }
    </script>
    

    3,使用vue.set()

    ​ 可以使用Vue.set()方法将响应式属性添加到嵌套的对象上

    // Vue.set(object, key, value)
    // object 要更改的数据源(可以是对象或者数组)
    // key  要更改的具体数据
    // value :重新赋的值
    
    export default() {
      data() {
        food: {
          name: 'apple' 
        }
      }
    }
    
    Vue.set(food, 'count', 1);
    

    vue3.0与vue2.0的区别

    1,性能提升

    ​ 更小巧,更快速;支持摇树优化;支持 Fragments 和跨组件渲染;支持自定义渲染器。

    2,API 变动

    ​ 除渲染函数 API 和 scoped-slot 语法之外,其余均保持不变或者将通过另外构建一个兼容包

    ​ 除了 scoped slot 语法有一些微调之外变动最大的部分将是渲染函数(render) 中的虚拟 DOM 的格式

    3,重写虚拟 DOM (Virtual DOM Rewrite)

    ​ 随着虚拟 DOM 重写,减少 运行时(runtime)开销。重写将包括更有效的代码来创建虚拟节点

    4,更精准的变更通知

    ​ 在2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行

    ​ 3.x 版本中,只有依赖那个属性的 watcher 才会重新运行

    5,默认进行懒观察(lazy observation)

    ​ 2.x 版本,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,

    ​ 这可能会在页面载入时造成明显的性能压力。

    ​ 3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效

    6,3.0 新加入了 TypeScript 以及 PWA 的支持

    展开全文
  • vue 视图不更新的几种解决办

    千次阅读 2018-07-10 15:49:42
    vue.js视图不更新的三种解决办法: //1.Vue.set Vue.set(this.objArr,index,newValue) //(数组,索引,值) //2.prototype.splice this.objArr.splice(index,1,newValue) //(索引,长度,值) //3.Object.assign...
  • Vue数据更新视图不更新这里写自定义目录标题知识拓展数组数据变动,使用某些方法操作数组,变动数据时,有些方法无法被vue监测对象属性的添加或删除异步更新队列Object.assign方法:vue多层循环,动态改变数据后渲染...
  • vue视图更新机制

    2021-04-12 09:30:04
    我想用过vue的都遇到过更改data中的内容,视图没有更新的问题,本文介绍一下vue视图更新机制 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object....
  • vue视图更新问题.zip

    2020-06-24 18:45:36
    vue中操作数据赋值(尤其是数组赋值),变量的值发生了变化,但是视图不更新的问题,解决方案全在demo里。
  • 主要介绍了解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue项目开发数组更新视图不更新

    千次阅读 2018-08-25 16:49:06
    Vue项目开发数组更新视图不更新 业务场景:Vue项目开发数组更换视图不更新 在methods里面的方法调用vm.items[indexOfItem] = 新的值;并不会刷新视图 .jpg “git图片”) 如上图,点击button触发change方法可以...
  • vue中,以下三种形式的赋值,变量的值会发生变化(这也就是为什么console的时候看到值发生了变化,但是视图就是不更新),但是不会触发视图的更新 一、原始类型的变量没有放入data return的变量中,在页面中虽然...
  • vue更新data但是视图没有更新 this.$set(data, key, value) //this.$set(this.data[key], 'a', value) //主要原因是data中没有声明,vue无法监听到元素变化
  • 数据已经更新但是视图不更新 在写项目的一个多规格中,生成一动态表格,表格的某一行通过点击禁用和取消禁用来改变禁用的状态,操作过后,数据已经更新,通过vue插件得知,但是禁用状态并没有立即更新。 数据改变,...
  • vue数据不更新的原因(vue中数据更改了,但是视图没有更新) 参考链接 templete: &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h2&amp;gt;{{dataObj.text}}&amp;lt;/h2&amp;gt;...
  • 现在我们需要装载更新完整的data对象,常规的赋值方式并不会引起视图更新,双向绑定会失效。 如上图中默认broker_list为空对象,装载完之后broker_list 包含新项(ZY98) 解决办法: $.each(clientData, ...
  • 应用背景: ... 通过点击管理按钮,改变edit的布尔值来切换...当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新视图上时,也许这个时候就需要用到this.$set()这个方法了,简单来说this.$set的功能就
  • Vue视图更新与数组

    千次阅读 2018-08-19 14:38:04
    Vue包含一组观察数组变异的方法,使用它们改变数组也会触发视图更新:  push() pop() shift() unshift()splice() sort() reverse() 变异的方法:  filter() concat() slice() 原理:  -- Vue 在检测到数组变化时,...
  • 下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。 Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将...
  • Vue 数据改变视图不更新问题小结 数组更新检测 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 1.哪些方法使数组变化,可以被vue检测到 push() pop() shift() unshift()...
  • 很早之前就知道this.$set可以解决vue中数据更新视图不更新的问题,但是对于什么情况下才会造成视图不更新一直很模糊,今天就来确认一下什么情况会造成视图不更新vue官网中对此的解释是: 需要注意的问题是,...
  • 1.问题描述:在echarts弹框中嵌入echarts,在页面数据改变时,echarts视图不更新; 2.解决办法: 数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过),后来发现热更新之后视图更新了,所以跟...
  • vue强制更新 使用update this.$forceUpdate(),强制视图更新vue.set this.$set(this,‘oldObj’,newObj); this.$set(this,'oldArray',newArray);
  •  再次更新 用this.obj.phone = '654321' 视图更新 用this.$set(this.obj,"phone", "654321");也未更新 3.添加完成以后数据有更新视图更新,   解决问题:因为obj中没有p...
  • Vue 数据更新,页面视图不更行 原因 vue实例化的时候之后新增属性,vue并没有对他的setter和getter方法进行监听,因此无法实现双向绑定 (vue的原理是,在创建实例的时候,遍历data里的值,监听’getter’和’setter...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,216
精华内容 23,686
关键字:

vue视图不更新

vue 订阅