vue 组件销毁并重置的实现

2024-09-30 02:47:44

方法1

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

<template>
  <third-comp v-if="reFresh"/>
</template>

<script>
  export default{
    data(){
     return {
        reFresh:true,
        menuTree:[]
      }
    },
    watch:{
       menuTree(){

         this.reFresh= false
         this.$nextTick(()=>{

          this.reFresh = true
        })
      }
    }
}
</script>

方法2

<template>
 <third-comp :key="menuKey"/>
</template>

<script>
 export default{
   data(){
     return {
        menuKey:1
      }
   },
   watch:{
      menuTree(){

        ++this.menuKey
      }
   }
}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue里如何主动销毁keep-alive缓存的组件

问题产生的背景我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境这个项目是基于一个开源 vue
VUE实现自身整体组件销毁的示例代码

V-IF实现组件自身销毁前面说了一些自己怎么思考得来,如果时间急可直接看最后~~~~ 通知提示组件案例分析在编写一些简单的通知组件案例中,可能会这样去写 //在[index.js]的install方法里 setTimeOut(()=>{ document.body.removeChild([DOM]) , timer} //定时的移除DOM 再看另一个Loading插件案例V-show template : <template> <div class="box-co
vue 组件销毁并重置的实现

方法1 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false
解决vue组件销毁之后计时器继续执行的问题

直接上代码,以下 window.setTimeout(function(){ if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁 return; } window.location.href = "/serverMonitor?t="+ new Date().getTime(); },5000) 很粗暴的方法,在执行之前看是否被销毁就行, 第二种方法,调用路由组件内的钩子函数beforeRouteLeave be
vue 强制组件重新渲染(重置)的两种方案

数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效方案一当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch
vue组件值变化但不刷新强制组件刷新的问题

目录组件值变化但不刷新强制组件刷新 bug复现解决强制刷新vue组件问题解决 – 强制刷新组件组件值变化但不刷新强制组件刷新在调用组件的时候,如果数据中只是某个属性变化(比如id)变化,在vue开发工具中看到变量值变化,但是组件上的数据就是不刷新 bug复现引用组件 <bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" /> sNode数据结构 { "
Vue组件开发之LeanCloud带图形校验码的短信发送功能

有15万开发者使用LeanCloud服务,其中不乏知乎.懂球帝.爱范儿.拉卡拉等知名应用,LeanCloud提供了数据存储.即时消息--等一站式服务,并从常用的用户管理需求出发,提供了邮箱验证.短信验证--等用户账户相关的服务. 为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务,LeanCloud推出了免费图形校验码服务,并且可以在应用设置中设置"强制短信验证服务使用图形校验码". Vue是目前使用较广泛的三大前端框架之一,其数据驱动及组件化的特性使得前端开发更为快捷便利.
Vue组件和Route的生命周期实例详解

先讲点实际的实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat
Vue组件通信之Bus的具体使用

关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱.这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦.并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题. 官方推荐的状态管理方案是 Vuex.不过如果项目不是很大,状态管理也
少女风vue组件库的制作全过程

预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈, 请勿在生产环境中使用,供学习&交流~~ 完整项目目录结构 git clone到本地安装依赖后,执行npm run serve进行本地组件库开发,npm run docs:dev进行组件库官网开发.一般在src/demo.vue进行单个组件测试通过后,再引入到.vuepress/components中放入组件库官网. ├─docs // vuepress开发目录 │ ├─.vuepre
vue组件 keep-alive 和 transition 使用详解

1.keep-alive 能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. // 组件 export
vue组件库的在线主题编辑器的实现思路

一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题,但是主题定制需求永远都存在,所以组件库一般都会允许使用者自定义主题,我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的,新体系下还做到了动态换肤,因为皮肤本质上是一种静态资源(CSS文件和字体文件),所以只需要约定一种方式来每次动态请求加载不同的文件就可以了,为了方便这一需求,还配套开发了一个Vessel脚手架的插件,只需要以配置文件的方式列出你需要修改的变量和值,一个命令就可以帮你生成对应的皮

vue 组件销毁并重置的实现

相关推荐

随机推荐