您现在的位置是:网站首页> 编程资料编程资料
如何手动销毁Vue中挂载的组件_vue.js_
2023-05-24
385人已围观
简介 如何手动销毁Vue中挂载的组件_vue.js_
手动销毁Vue挂载的组件
因为很多页面需要用到
如何解决
在需要删除的组件中的deactivated生命周期函数中手动调用this.$destroy('componentName'),这里的componentName即这个组件的name,使用后发现destoryed函数确实可以正常使用了,而且进入下一个页面也不会再报错说缺少这个页面的数据。
vue 销毁实例
1.导入vue创建一个VM实例
传入配置对象,了解配置对象中的各个属性
var VM = new Vue({ el: '#app', // 表示当我们new的这个Vue实例, 要控制页面上的那个区域 data: { // data属性中,存放的是el中要用到的数据,这里的data就是MVVM中的M专门用来保存每个页面的数据 message: 'Hello Vue!' }, methods : {}, // 这个methods属性中定义了当前Vue实例所有可用的方法,主要写业务逻辑 computed: {}, // 在computed中,可以定一些属性, 这些属性叫做计算属性,计算属性的本质就是一个方法,只不过我们在使用这些计算属性的时候是吧它们的名称直接当做属性来使用的,并不会把计算属性当做方法去调用 filters : {}, // 这个filters属性中定义了当前Vue实例中所有可用的过滤的方法 watch: {}, // 使用这个属性,可以监听data中数据的变化,然后触发这个watch中对应的function处理函数 router, // 挂载路由对象 directives:{}, // 这个directives属性定义了当前Vue实例中所有可用的自定义指令 beforeCreate () {}, // 生命周期函数: 表示实例完全被创建之前,会执行这个函数 created () {}, // 生命周期函数: 表示实例被创建之后 beforeMounted () {}, // 生命周期函数: 表示模板已经编译完成,但是还没有把模板渲染到页面中 mounted () {}, // 生命周期函数:表示模板已经编译完成,内存中的模板已经真实的渲染到了页面中去,已经可以看到渲染好的页面了 beforeUpdate () {}, // 生命周期函数: 表示当前界面还没有被更新,数据肯定被更新了 update () {}, // 生命周期函数: 表示当前页面和数据保持同步了,都是最新的 beforeDestroy () {}, // 生命周期函数: 表示Vue实例已经从运行阶段进入到销毁阶段 destroyed () {} // 生命周期函数: 表示组件已经完全被销毁了})2.vm.$destroy()只能销毁实例里的方法但不能清除DOM和data吗?
destroy()只是完全销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器。
参见官方文档: https://cn.vuejs.org/v2/api/#vm-destroy
它并不是用来清除已有页面上的DOM的。实现功能包括:
(1) 包括Watcher对象从其所在Dep中释放
if (vm._watcher) { vm._watcher.teardown() } let i = vm._watchers.length while (i--) { vm._watchers[i].teardown() } // remove reference from data ob // frozen object may not have observer. if (vm._data.__ob__) { vm._data.__ob__.vmCount-- }(2) 移除所有事件的监听
vm.$off()
(3) patch一个null目的是触发所有的destroy钩子。
vm.__patch__(vm._vnode, null) return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) { /*vnode不存在则直接调用销毁钩子*/ if (isUndef(vnode)) { if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return } ... }想要清除页面的 DOM,需要使用 v-if,或者修改 v-for 中涉及到的数组或对象。
另外,调用 app.$destroy() 之后,你会发现,app.message = ‘Yes, he is a boy.’ 不会对页面产生影响。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- vue实现自定义组件挂载原型上_vue.js_
- NPM配置私服构建内网中央仓库过程详解_node.js_
- vue3如何自定义js文件(插件或配置)_vue.js_
- vue3自定义组件之v-model实现父子组件双向绑定_vue.js_
- vue自定义加载指令v-loading占位图指令v-showimg_vue.js_
- vue3点击出现弹窗后背景变暗且不可操作的实现代码_vue.js_
- 三种在ES6中将非数组转换为数组的方法详情_javascript技巧_
- vue性能优化之cdn引入vue-Router的问题_vue.js_
- UMD的包导出TS 类型方法示例_JavaScript_
- Node多进程的实现方法_node.js_
