美文网首页Vue.jsvue
Vue 中强制更新视图

Vue 中强制更新视图

作者: 冷r | 来源:发表于2022-11-15 09:43 被阅读0次

前言

当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变

在vue文档中写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
因此比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。

解决方案

方法一:Vue.set() 方法(this.$set())

Vue.set( target, key, value ) 中有三个参数
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据 如果是数组 就是索引值
value :重新赋的值

this.$set(this.student,"age", 24)

方法二:$forceUpdate

对于深层的,最好用set方法,这样vue就可以知道发生了变化,同时vue也不建议直接修改length,可以给一个空数组来置空。用 forceUpdate 了,因为你修改了数据,但是页面层没有变动,说明数据本身是被修改了,但是vue没有监听到而已,用$forceUpdate就相当于按照最新数据给渲染一下。

change: function(index) {
    this.list[index].sex = '男';
    this.$forceUpdate();
},
clear: function() {
    this.list.length = 0;
    this.$forceUpdate();
}
``

相关文章

  • Vue 中强制更新视图

    前言 当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变 在...

  • Vue中使用$set来添加数据并更新视图的方法

    vue中添加data数据的时候视图是不更新的,vue提供了一种$set的方法来强制修改数据并更新视图的方法: co...

  • vue强制更新视图 $forceUpdate()

    今日又学一招~ vue 强制更新视图 $forceUpdatevm.$forceUpdate() 迫使Vue实例重...

  • vue强制更新

    使用update this.$forceUpdate(),强制视图更新 用vue.set this.$set(th...

  • this.$forceUpdate

    vue强制更新this.$forceUpdate() 调用强制更新方法this.$forceUpdate()会更新...

  • vue项目中碰到的问题

    vue项目中碰到的问题 路由懒加载写法: Vue 数组/对象更新 视图不更新深拷贝对象或者数组,视图会进行更新对象...

  • 记录简单实现Vue2中的响应式原理

    Vue是数据驱动视图模式,数据变更后,会自动更新视图。 原生js中要更新视图通常是通过触发事件,然后修改数据,最后...

  • Vue.$nextTick用法

    vue是数据驱动视图更新,但vue数据变化后,视图不会立即更新,而是异步的过程.具体的更新时机参考主队列,异步队列...

  • vue强制更新$forceUpdate()

    vue强制更新$forceUpdate() 添加this.$forceUpdate();进行强制渲染,效果实现。搜...

  • vue 强制更新

    this.$forceUpdate() 更新 nextTick() [https://cn.vuejs.org/a...

网友评论

    本文标题:Vue 中强制更新视图

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