vue.forceupdate,vueupdated调用
本文主要介绍$forceUpdate()在Vue中的使用，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
使用$forceUpdate()有两种解决方案。方法一和方法二是关于$ forceupdate的一些理解。
$forceUpdate()的使用
在Vue的官方文档中指出$forceUpdate有强制刷新的功能。
在vue框架中，如果data中有一个变量：age，修改它，页面就会自动更新。
但是，如果数据中的变量是数组或对象，如果我们直接给对象或数组添加属性，页面是不会识别的。
模板
p{{userInfo.name}}/p
Button @click=updateName 修改用户信息/button
/模板
脚本
data(){
返回{
UserInfo:{name:晓明 }
}
},
方法：{
updateName(){
This.userInfo.name=小红
}
}
/脚本
在updateName函数中，我们试图修改userInfo对象的值，发现页面实际上并没有改变。
有两种解决方法
方法一
方法：{
updateName(){
This.userInfo.name=小红//此时，userInfo对象确实被修改了。
console . log(this . userinfo . name)；//输出结果：小红
这个。$ force update()；//这里，强制刷新后，页面的结果变成了‘小红’
}
}
方法二
方法：{
updateName(){
这个。$set(userInfo ，name，小红)；
}
}
关于$forceUpdate的一些理解
公文里只有这句话。
强制Vue实例重新渲染。注意，它只影响实例本身和插入到槽内容中的子组件，而不是所有子组件。
我的理解是，所谓重渲染只是指重渲染DOM，做与原DOM不同的代码。如果有更改，将它们呈现到页面上。结合官方的解释，可以确认两件事不会发生：
将不会再次触发生命周期挂钩功能。例如，mounted不会渲染子组件的更新，即使子组件的道具发生了变化。既然如此，什么场景下会需要使用呢？
我们知道，在Vue中，当响应数据发生变化时，会自动触发更新。但是，有一些条件不会触发更新，例如数组的一些方法，或者在数据中添加没有预先定义的响应数据。
举个例子：
假设有一个需要渲染的列表。我们在数据中初始化这个列表，并在挂载的函数中用fill填充这个数组。api填充不会触发自动更新。
模板
你好
差异
span v-for=(item，index)in arr :key= index { { item } }/span
/div
hello-world ref= hello :list= arr /
/div
/模板
脚本
从“@/components/HelloWorld.vue”导入HelloWorld
导出默认值{
名称：“关于”，
组件：{
HelloWorld，
},
data() {
返回{
arr:数组(4)，
};
},
已安装(){
this . arr . fill(0)；
setTimeout(()={
这个。$ force update()；
}, 3000);
setTimeout(()={
这个。$ refs . hello . $ force update()；
}, 5000);
},
在上面的例子中，页面将在3秒后看到更新，子组件将在5秒后看到更新。这就解释了forceUpdate的意义。
也就是说，由于某种原因已经更改并且应该呈现到页面的数据被强制更新。
他只影响【触发渲染函数生成DOM-diff-用原DOM更新视图】的过程。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。