vue组件中如何重新渲染

这篇文章主要讲解了“vue组件中如何重新渲染”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue组件中如何重新渲染”吧!

巴州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

vue组件中如何重新渲染

改变key

这个是最推荐的。

因为vue是通过虚拟Dom算法来判断元素的变化,是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的,则重新渲染该元素,如果key没变,则不会重新渲染。

所以如果你想让你的组件重新渲染,你给组件加上key属性,然后在需要重新渲染的时候,改变key的值就行。

组件会重新渲染,相应的生命周期函数,计算属性,watch等都会执行。



v-if

我们用的指令中,v-if也是比较多的。

当你设置为false的时候,当前条件块里包含的元素会被销毁,如果包含的是组件,则组件对应的生命周期函数(beforeDestroydestroyed等)会执行。

当你设置为true的时候,当前条件块里的元素会被重建,如果包含的是组件,则组件对应的生命周期函数(createdmounted等),计算属性,watch等会执行,相当于重新渲染。

vm.$forceUpdate()

这个方法用的不多,是强制更新视图。

但是vue是双向绑定的,数据变化,视图也会实时刷新,什么情况下会用到这个方法呢?

比如vue只针对数组的这些方法会刷新视图:

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

所以比如你对数组的某个值重新赋值的时候,vue是不会刷新视图的。 那么你就可以用这个方法来强制刷新视图。

export default {
  data () {
    return {
      arr: [1, 2, 3]
    }
  },
  methods: {
    editArr () {
      this.arr[0] = 0 // 视图不会刷新
    },
    forceUpdate () {
      this.$forceUpdate() // 调用这个方法会刷新视图
    }
  }
}

vue实例执行这个方法的时候,仅仅只是刷新视图,实例对应的生命周期函数,计算属性,watch等不会重新执行。

感谢各位的阅读,以上就是“vue组件中如何重新渲染”的内容了,经过本文的学习后,相信大家对vue组件中如何重新渲染这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


新闻标题:vue组件中如何重新渲染
分享地址:http://myzitong.com/article/jocsed.html