在有些时候，我们需要强制重新渲染组件
例如，在使用elementUI的联级下拉选择框的时候，我们选择了指南/设计原则/反馈，然后再选择一级选项组件，后面点开下拉框时一级选项都是选的组件，和我们实际选择的不匹配，如下图所示：
image.png
这是因为下拉框仅仅再第一次出现时是重新渲染，后面再收起只是隐藏，会记录之前的一些样式状态。如果我们希望下拉框每次展示都重新渲染，可以在下拉框收起的时候，将真个级联选择框强制重新渲染一次就行了，实现这个我们需要用到vue组件的特殊属性：key
key的官方说明如下：
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
我们只需要给级联选择框一个key属性，并在每次级联选择框收起的时候，改变这个key，则级联选择框就会自动强制渲染
在有些时候，我们需要强制重新渲染组件 例如，在使用elementUI的联级下拉选择框的时候，我们选择了指南/设计原...
问题：子组件渲染的数据是在子组件的函数内处理过，但是父组件将数据更新后，子组件渲染的数据是直接更新的数据，并未触发...
1.刷新整个页面 使用v-if 3.使用this.$forceUpdate()方法 4.使用key-changin...
在元素/组件中使用:key，动态绑定元素/组件的key；可以起到强制刷新/重新渲染的效果（替换为新的元素/组件，而...
Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在...
keep-alive是 Vue 内置的一个组件，可避免重新渲染。include：包含的组件缓存。exclude：排...
vue强制更新$forceUpdate() 添加this.$forceUpdate();进行强制渲染，效果实现。搜...
vue-router第一次访问组件时会渲染组件，当再次操作该组件时，不会重新进行生成，而是会复用组件，而creat...
1.updated 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染
Vue 渲染组件 上次是直接渲染 html ， 这次 APP 是个 组件，所以createComponent ...
本文标题：vue强制组件重新渲染
本文链接：https://www.haomeiwen.com/subject/duviiktx.html
网友评论