vue中 $destroy 并且 removeChild 组件数据响失效

最新推荐文章于 2024-06-25 23:14:27 发布
最新推荐文章于 2024-06-25 23:14:27 发布
阅读量5.9k 收藏 6
点赞数 3
分类专栏： vue 文章标签： vue destroy removeChild
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41614928/article/details/112305936
版权
this.$destroy() 作用:

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和destroyed 的钩子。

当销毁一个组件时我们有可能会用这种方法：

this.$destroy()
this.$el.parentNode.removeChild(this.$el) //通过父级元素销毁当前组件

查看页面html该组件确实被销毁， 但是removeChild销毁组件只是表面上的销毁了该组件， 实际上该组件函数任然缓存在vue中，下次组件显示时，组件还是会处于被销毁（destroy）状态，所以数据响应式，生命周期等都会不起作用！

需要真正销毁一个组件可以使用 v-if

舜岳
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
_vue-2
beifeng11996的博客
02-26 338
所以我们可以v-model进行如下改写： 这个语法糖必须是固定的，也就是说属性必须为，方法名必须为：。 知道了的原理，我们可以在自定义组件上实现 原理会将组件的 默认转化成 原生的 ，会根据标签的不同生成不同的事件和属性 ----------@----------的作用 的工作原理 相同点 都是语法糖，都可以实现父子组件中的数据的双向通信 区别点 格式不同：, : : 只能用一次；可以有多个 ----------@----------插槽 作用域插槽 ------
vue中通过使用$attrs实现组件之间的数据传递功能
10-16
在Vue.js中，组件间的通信是其核心特性之一，提供了多种数据传递方法，如props、vuex、Vue Event Bus等。然而，在某些情况下，我们可能需要更简洁的方式来传递非prop属性，这时`$attrs`就派上用场了。`$attrs`是在...
web前端之uniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
05-16 1931
web前端之uniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map
执行this.$destory()指令后，原生DOM没有响应
最新发布
weixin_61980761的博客
06-25 396
在某些情况下，Vue 可能不会立即更新 DOM。通常，Vue 会在下一个“tick”中更新 DOM。会销毁组件实例，但不会立即从 DOM 中删除元素。如果需要从 DOM 中删除元素，你可能需要手动操作 DOM 或使用。： 如果在 Vue 组件中进行了手动 DOM 操作，如直接修改了原生 DOM 元素，这可能会影响 Vue 的响应性。： 如果组件内部有定时器、事件监听器或其他资源未正确清理，可能会导致组件销毁不完全。： 确保你使用的 Vue 版本与你的代码兼容。钩子中调用，可能会导致意外的行为。
vue3的api使用
我的博客简介
11-18 362
app.unmount() 可以卸载局部组件，而不影响整个应用，下面是手动卸载。app.runWithContext() 使用当前应用作为注入上下文执行回调函数。
vue及rect面试点(更新中) - 面试篇
阿莹yes的博客
04-30 1279
文章目录一、事件的执行顺序阻止事件冒泡的方式二、事件循环 EventLoop三、异步编程的方法1.回调函数2.事件监听3.发布/订阅 ｜ 观察者模式4.Promise 对象5.Generator 函数6.async 与 await四、call、apply、bind 的区别call fn.call(obj, 1, 2);apply fn.apply(obj, [1, 2]);bind fn.bind(obj, 1, 2);五、vue 和 react 中不被渲染出来的标签六、js 里 for..in 和 for
Vue 相关
i_Satan的博客
04-14 586
全局事件总线的大致使用流程： //创建一个全局事件总线 、、在main.js入口文件中挂载 new Vue({ beforCreate(){ Vue.prototype.$bus=this; } }) //需要 接收 数据的组件 { //绑定全局事件总线上的 自定义事件 mounted(){ this.$bus.$on("需要绑定的事件"，""绑定事件后需要触发的函数"") } //解绑全局事件总线上的 自定义
移动端和vue接入腾讯地图前端定位组件位置不准确以及自己创建地图
月落星河
06-16 6376
1.介绍 关于腾讯地图开发的博客还是挺少的，此教程只是给一些初进入接入腾讯地图文档的作为参考，我也是一知半解，但是对于一些需要简单接入地图的小伙伴就足够了，因为我也是看着官方文档来写的，所以以官方文档为准腾讯地图api官方接入文档 温馨提示：运行的代码必须是在sever上的，不然没有效果，vscode可以下载liverserver去启一个服务，或者使用webpack，也可以部署到服务器也可以 2.展示  　2.1：展示官方文档中的前端定位中的demo 上面二维码可以看到定位组件展示的效果 3.
Vue3 + Vite + TypeScript + Element-Plus：从零到一构建企业级后台管理系统（前后端开源）
热门推荐
有来技术
04-17 6万+
vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案，技术栈为 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等当前主流框架。本篇是 vue3-element-admin v2.x 版本从 0 到 1，相较于v1.x 版本增加了对原子CSS(UnoCSS)、按需自动导入、暗黑模式的支持。
前端面试题汇总（vue+html基础）最新最全
大爱仙尊
06-28 2万+
前端面试题合集
vue随笔
manyi8634的博客
04-12 1568
VUE 引导 官网 封装 VS 库 VS 框架 封装通常指一小部分通用业务逻辑，多个封装形成一个模块或者文件，多个模块或者文件就发展成为库或者框架，而插件是为库或者框架发布后做后期补充，可以有官网或者第三方提供的，有点外挂的意思，有时候一个模块就是一个文件，有时候一个文件里面有多个模块，把不同的文件按类别放置到不同的目录里，这个目录叫做包，框架改变了编码思想，库只是个工具你用或者不用不会影响你的编码思想 编码思想 jquery你用或者不用，你的编码思想都会是面向事件，开发一款插件中间用到什么库不重要，你会面
vue中如何让子组件修改父组件数据
08-27
Vue 中子组件修改父组件数据是指在 Vue 中，子组件如何修改父组件的数据。这种情况在开发中经常遇到，例如在表单提交时，子组件需要将数据传递给父组件进行处理。在 Vue 中，子组件修改父组件数据的方式有多种，...
vue 父组件通过$refs获取子组件的值和方法详解
10-16
在 Vue 中，组件是可复用的代码块，可以封装自己的状态和行为。组件间的通信是 Vue 应用中常见且重要的需求。本文将深入探讨如何通过 `$refs` 机制在父组件中直接获取子组件的值和方法。 首先，我们要理解 `$refs` ...
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式。 父组件传值给子组件 在 Vue 中，父组件可以...
Vue $emit $refs子父组件间方法的调用实例
10-18
今天小编就为大家分享一篇Vue $emit $refs子父组件间方法的调用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue引入导航守卫报错error: 'to' is defined but never used (no-unused-vars)
舜岳的博客
10-28 4万+
若代码无书写错误 报错原因： 该项目安装了eslint规范，ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似。 解决方法 解决方法1： 在package.json文件内加入如下代码： "rules": { "generator-star-spacing": "...
vue vuex中store内2种异步请求数据方法
舜岳的博客
08-24 1万+
效果图如下： store.js代码如下： import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ //状态数据 state: { list:['默认为空'] }, //getters可以认为是store的计...
router-link标签Cannot read property '$route' of undefined"报错解决方法
舜岳的博客
03-26 8127
报错代码： <div class="card mb-3 px-3" v-for="item in data" v-bind:key="item.id"> <router-link :to="{ path:'/exams/details', query:{ name: this.$route.query.name, id: this.$route.params.id} }" c...
vue3 $destroy
12-03
Vue.js 3 中已经没有 `$destroy` 方法了，取而代之的是 `unmounted` 钩子函数。当一个组件被卸载时，`unmounted` 钩子函数会被调用。你可以在这个钩子函数中执行一些清理工作，例如取消订阅、清除定时器等等。 以下...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值