vue2、vue3中使用$forceUpdate()
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在vue.js中使用this.$forceUpdate()是强制更新方法,作用是触发vue的update方法。可以用在解决数据对象新增属性和数组新增数据,出现页面不渲染的问题。
在前端开发过程中数据处理尤为重要,在使用Vue时我们会事先定义好数据,数据中包含基本数据、对象、数组,其中对象中可能还会有数组,数组中也还会有数组或者对象,这样就形成了深结构数据。我们在给这些深层次的数据赋值或者给对象添加新的属性,页面上的数据并不会同步更新,这是因为受js的限制vue不能检测到对象属性的添加或者删除,所以vue不允许在已经定义好的数据上动态的添加新的属性值。针对此种情况,此时我们可以使用vue的强制刷新方法,在赋值完成之后调用this.$forceUpdate(),这样页面上就能加载我们改变的数据。
在vue2中直接
this.$forceUpdate()
在vue3中直接
import { getCurrentInstance, ComponentInternalInstance } from "vue";
setup(){
//解构赋值 设置别名that 也可不写 :that 直接ctx
//ctx 得到普通对象
//proxy得到响应式对象
// 推荐使用第二种proxy 严谨写法
// 第一种写法
let {ctx:that, proxy}:any = getCurrentInstance()
that.$forceUpdate()
// 第二种写法
const { proxy } = getCurrentInstance() as ComponentInternalInstance
proxy!.$forceUpdate()
}
参考:
http://t.csdn.cn/57Ghh
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)