Vue中,$forceUpdate()的使用

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

Vue中,$forceUpdate()的使用_第1张图片

那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新。
但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的 



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

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

方法一

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

方法二:

methods:{
  updateName(){
    this.$set('userInfo',name,'小红');
  }
}

你可能感兴趣的:(vue.js,前端,javascript,前端框架)