Vue中关于重新渲染组件的方法及总结

重新渲染组件的方法总结

有时Vue的反应性系统还不够,您只需要重新渲染组件即可。

重新渲染组件有以下几个办法:

  • 可怕的方法:重新加载整个页面
  • 可怕的方法:使用v-if
  • 更好的方法:使用Vue的内置forceUpdate方法
  • 最好的方法:在组件上进行key更改

重新加载整个页面

非常不建议这样做,我们来看下一个办法

v-if指令,该指令仅在组件为true时才渲染。 如果为false,则该组件在DOM中不存在。

下面我们设置它以使其v-if能够正常工作的方式。

在您的template,您将添加v-if指令:

<template>
  <my-component v-if="renderComponent" />
</template>

script您将添加使用以下方法nextTick:

<script>
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // 从 DOM 中删除 my-component 组件
        this.renderComponent = false;
        
        this.$nextTick(() => {
          // 在 DOM 中添加 my-component 组件
          this.renderComponent = true;
        });
      }
    }
  };
</script>

这里发生的事情:

  • 最初renderComponent设置为true,因此my-component组件渲染
  • 在forceRerender中我们立即设置renderComponent为false
  • 停止渲染组件my-component,因为该v-if指令现在的值为false
  • 在nextTick中将renderComponent上设置回true
  • 现在该v-if结果为true,因此我们my-component再次开始渲染

我们必须等到nextTick,否则我们不会看到任何变化。

在Vue中,一个 nextTick 是一个DOM更新周期。Vue将收集在同一 nextTick 中进行的所有更新,在 nextTick 结束时,它将根据这些更新来渲染 DOM 中的内容。如果我们不等到nextTick,我们对renderComponent的更新就会自动取消,什么也不会改变。

其次,当我们第二次渲染时,Vue将创建一个全新的组件。 Vue 将销毁第一个,并创建一个新的,这意味着我们的新my-component将像正常情况一样经历其所有生命周期-created,mounted等。

不过,这并不是一个很好的解决方案,往下看

使用forceUpdate

方法解读:

Vue中,$forceUpdate()的使用

方文档中指出,$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();//在这里,强制刷新之后,页面的结果变为'小红'
  }
}

$forceUpdate() 这个方法也可以处理 修改for循环 里面 item的属性值,没有渲染出来添加这个方法也生效

方法二:

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

这是解决此问题的两种最佳方法之一,此方法得到Vue的官方支持。

下面是示例:

forceUpdate在组件实例本身以及全局实例上,可以通过两种不同的方式调用

// 全局
import Vue from 'vue';
Vue.forceUpdate();
 
// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

重要提示:这不会更新您拥有的任何计算属性。调用forceUpdate只会强制重新渲染视图

最好的方法:修改组件的key达到组件重新渲染

在许多情况下,我们需要重新渲染组件。

要正确地做到这一点,我们将提供一个key属性,以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变,则不会更改组件,但是如果key发生更改,Vue 就会知道应该删除旧组件并创建新组件。

我们可以采用这种将key分配给子组件的策略,但是每次想重新渲染组件时,只需更新该key即可。

<template>
  <component-to-re-render :key="componentKey" />
</template>
 
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
      //this.componentKey += new Date();
    }
  }
}

每次 forceRerender被调用时,我们的componentKey都会改变。

当这种情况发生时,Vue将知道它必须销毁组件并创建一个新组件。

我们得到的是一个子组件,它将重新初始化自身并“重置”其状态。

总结

作者:xifanxiaochaorou原文地址:https://blog.csdn.net/xifanxiaochaorou/article/details/123550415

%s 个评论

要回复文章请先登录注册