Vue中,$forceUpdate()的使用

在Vue官方文档中指出,$forceUpdate具有强制刷新的作用。

那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新。

但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的

<template>
  <p>{{userInfo.name}}</p>
  <button @click="updateName">修改userInfo</button>
</template>

<script>
  data(){
    return{
      userInfo:{name:'小明'}
    }
  },
  methods:{
    updateName(){
      this.userInfo.name='小红'
    }
  }
</script>

updateName函数中,我们尝试给userInfo对象修改值,发现页面其实并没有变化

那这时候有两种解决方法:

方法一

methods:{
  updateName(){
    this.userInfo.name='小红'//在此时,确实已经将userInfo对象修改完成
    console.log(this.userInfo.name);//输出结果: 小红
    this.$forceUpdate();//在这里,强制刷新之后,页面的结果变为'小红'
  }
}

方法二:

methods:{
  updateName(){
    this.$set('userInfo',name,'小红');
  }
}
相关推荐
EricWang1358几秒前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning几秒前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪10 分钟前
React 守卫路由
前端框架·reactjs
web行路人10 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00112 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92130 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂32 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石41 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程42 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员