vue组件中怎么重新渲染?下面本篇文章就来给大家总结分享vue组件的重新渲染的几种方式,希望对大家有所帮助!
最近遇到一个需求,就是得把当前的组件重新渲染。这个好办,通知父组件去重新渲染就行。
下面我把我知道的vue组件的重新渲染的几种方式总结一下。【相关推荐:《vue.js教程》】
这个是最推荐的。
因为vue是通过虚拟Dom算法来判断元素的变化,是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的,则重新渲染该元素,如果key没变,则不会重新渲染。
所以如果你想让你的组件重新渲染,你给组件加上key
属性,然后在需要重新渲染的时候,改变key的值就行。
组件会重新渲染,相应的生命周期函数,计算属性,watch等都会执行。
<template> <div class="home"> <el-button @click="freshKey">test</el-button> <aComp :key="key"></aComp> </div> </template> <script> import aComp from '@/components/aComp' export default { components: { aComp }, data () { return { key: 0 } }, methods: { freshKey () { this.key++ } } } </script>
我们用的指令中,v-if
也是比较多的。
当你设置为false
的时候,当前条件块里包含的元素会被销毁,如果包含的是组件,则组件对应的生命周期函数(beforeDestroy
,destroyed
等)会执行。
当你设置为true
的时候,当前条件块里的元素会被重建,如果包含的是组件,则组件对应的生命周期函数(created
,mounted
等),计算属性,watch等会执行,相当于重新渲染。
这个方法用的不多,是强制更新视图。
但是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组件中怎么重新渲染?3种方式分享的详细内容,更多请关注php中文网其它相关文章!