vue强制刷新组件_Vue强制组件重新渲染

Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处，而且自动更新会出现各种坑，在特定的情况下，还真的要手工触发“刷新”操作，目前有几种方案可以选择：

- 通过Vue 的key-changing优化组件

-使用v-if标记

-使用内置的forceUpdate方法

通过Vue 的key-changing优化组件

通过vue key 实现，原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。所以当key 值变更时，会自动的重新渲染。这应该是目前最优雅的解决办法了。

官网原文：

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

-完整地触发组件的生命周期钩子

-触发过渡

例如：

当 text发生改变时，span总是会被替换而不是被修改，因此会触发过渡。

下面是一个样例，当组件的数据更新时，会触发watch函数，使得key值变化，达到强制渲染组件的目的。

export default{

data(){

return {

menuKey:1,

menuData: "",

}

watch:{

menuData(){

++this.menuKey

}

使用v-if标记

当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题。

使用案例如下，同样是使用watch 监听，通过变更v-if的值，强制触发组件渲染。需要注意的是，使用了$nextTick()方法。

export default{

data(){

return {

reFresh:true,

menuTree:[]

}

watch:{

menuTree(){

this.reFresh= false

// 在DOM渲染之后再把reFresh设置为原来的值，达到更新组件的效果

this.$nextTick(()=>{

this.reFresh = true

})

}

[ 注意 ]

Vue.nectTick()是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM，这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来。

简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick()

使用内置的forceUpdate方法

这个方法在实际使用时，有存在无效的情况，斟酌使用。

组件内置$forceUpdate方法，使用前需要在配置中启用。

使用案例：

import Vue from 'vue'

Vue.forceUpdate()

export default {

methods: {

handleUpdateClick() {

// built-in

this.$forceUpdate()

}

vue强制刷新组件_Vue强制组件重新渲染相关推荐

react怎么让组件强制刷新--函数式高阶组件
export const wrapper = (innerComp)=>({updateStr, ...props})=>{const [forceUpdate,setfForceUpda ...
vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才 ...
vue 父刷新子_vue.js从父级中更新子组件数据
如何从父组件中更新子组件中的数据?我正在尝试从父级中更新autores属性,并让它更新子级数据.目前什么都没有发生,我认为我没有正确的数据链接.如果我将它作为数据添加到父组件中,那么当代码运行时,父组 ...
vue延迟渲染组件_Vue 动态组件渲染问题分析
fire 读在最前面: 1.本文适用于有一定基础的vue开发者,需要了解基本的vue渲染流程 2.本文知识点涉及vue构造器以及选项策略合并. 渲染逻辑问题描述: Child继承自App,主程序通过 ...
vue 获取当前路由_VUE 在组件中获取路由信息
一.核心代码 1.获取参数 this.$route.query.id this.$route.query 2.页面跳转登录 3.方法跳转 this.$router.push({ path: '/lo ...
vue 手风琴组件_vue 手风琴组件
1.创建组件 SqueezeBox.vue {{item.name}}{{item.show}} {{a.name}} {{b.name}} export default { data () { re ...
vue怎么根据id获取组件_vue子组件，如何根据父组件传进来的id，去查询详情，并在子组件中显示？...
如果我在组件的created方法里面,根据id去后台查询详情,可以正常显示,不报错,但是当父组件id值改变后,并不会再次去后台查询了, ,假如我后台返回的对象时detail,如果写在computed里 ...
vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据选择用户名学号班级操作 {{item.User ...
php 强制刷新一次,强制浏览器使用PHP刷新所有内容
一个问题,特别是在创建AJAX应用程序时,是浏览器可以缓存页面的内容,以便在发出类似请求时,可以呈现相同的内容. 要强制浏览器显示所需内容而不进行缓存,可以在页面中添加以下标题. header(&qu ...

vue强制刷新组件_Vue强制组件重新渲染

vue强制刷新组件_Vue强制组件重新渲染相关推荐

最新文章

热门文章