美文网首页前端
vue 数据更新 dom不渲染

vue 数据更新 dom不渲染

作者: 是嘻嘻呀 | 来源:发表于2019-11-11 12:58 被阅读0次

场景:获取接口数据,更新dom
问题:数据更新了,dom未渲染
代码:

 this.row[index] = []

原因:
vue的dom更新是异步的,即当setter操作发生后,指令并不会立马更新,指令的更新操作会有一个延迟,当指令更新真正执行的时候,此时.text属性已经赋值,所以指令更新模板时得到的是新值。
具体流程如下:
1.self.dataObj = {};发生setter操作
2.vue监测到setter操作,通知相关指令执行更新操作
3.self.dataObj[‘text’] = ‘new text’;赋值
4.指令更新开始执行

Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测:
1.push()
2.pop()
3.shift()
4.unshift()
5.splice()
6.sort()
7.reverse()
8.vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
9.filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组

Vue 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如: vm.items.length = newLength

解决方法代码:

this.row.splice(index, 1, [])

this.$set(this.form.arrs,model,'')

参考链接

相关文章

  • vue 数据更新 dom不渲染

    场景:获取接口数据,更新dom问题:数据更新了,dom未渲染代码: 原因:vue的dom更新是异步的,即当sett...

  • vue原理与开发逻辑

    1、vue中的$nextTick()的用法和原理 vue的DOM更新是异步的,当数据更新了,再dom中渲染后,自动...

  • miniVue源码学习

    Vue -- MVVM 数据响应式 模板引擎 渲染--真实DOM 监听数据变化、并在视图更新 Object.def...

  • vue 虚拟dom

    vnode => dom虚拟 => 真是dom (vue 初始化渲染) 更新节点

  • 模板语法

    Vue使用基于HTML的模板语法 模板编译为虚拟DOM渲染函数 状态改变 Vue计算渲染组件最小代价更新DOM 也...

  • 前端高阶面试题之Vue

    .什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过...

  • Vue 高频面试题汇总

    .什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过...

  • vue 生命周期

    什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程...

  • Vue 面试题汇总

    什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程...

  • Vue 面试中常问知识点整理

    Vue的生命周期 生命周期:Vue实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列...

网友评论

    本文标题:vue 数据更新 dom不渲染

    本文链接:https://www.haomeiwen.com/subject/qyhtictx.html