执行this.$destory()指令后，原生DOM也没有响应的问题

主要问题是vue.js版本的问题

2.7.0及以上版本执行完this.$destory()指令后，原生DOM的响应事件也不会被触发。（个人猜测，7.0版本以后执行完this.$destory()后，原生DOM也被销毁了）

这里使用的是vue.js 2.7.0版本执行的结果：

这里使用的是vue.js 2.6.8版本执行的结果：

源代码：只需修改src里的版本数字

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>引出生命周期</title><!-- 引入Vue --><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.8/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><h2>当前的n值是:{{n}}</h2><button @click='add'>点我n+1</button><button @click='destroy'>点我销毁</button></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el: '#root',data: {n: 1},methods: {add() {console.log('Add被调用了')this.n++},destroy() {this.$destroy()}},beforeCreate() {console.log('beforeCreated');// console.log(this);},created() {console.log('created');},beforeMount() {console.log('beforeMounted');},mounted() {console.log('mounted');},beforeUpdate() {console.log('beforeCreate');},updated() {console.log('updated');},beforeDestroy() {console.log('beforeDestroy');},destroyed() {console.log('destroyed');}})</script></html>

执行this.$destory()指令后，原生DOM也没有响应的问题相关推荐

执行 this.$destroy()后原生DOM事件也无法执行
在跟随尚硅谷 Vue 全家桶学习视频学习销毁组件实例时,视频中执行 this.$destroy() 后虽然组件实例销毁了,但原生 DOM 事件依然能调用,但实际操作发现不仅组件实例销毁,原生 DOM ...
js陷阱缺陷点滴yanjs原生dom点滴yan
为了应付古老的面试和js语言各种糟粕古老面试题总结了17年初到18年初百场前端面试的面试经验初中级前端面试题这儿有20道大厂面试题等你查收字节跳动一面.二面凉经送你 43 道 JavaSc ...
php 赋值给 dom对象,详解PHP原生DOM对象操作XML的方法
详解PHP原生DOM对象操作XML的方法发布于 2017-08-08 20:15:29 | 80 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
element分页点击事件_关于原生dom事件添加、删除方法的一些拓展
引言这是一个简单的需求,衍生的思考. 昨天QA提了一个富文本优化的需求,当插入视频和音频时,如果用户同时点击了视频.音频,那么其他的视频或者音频应该停止播放,只有最后一个点击的才会是播放状态. 需求 ...
常用的原生DOM操作汇总
一.常见DOM操作 1. 获取查找DOM元素 Ele.getElementById(idName) 通过id查找元素.返回的是元素DOM,如果页面上有多个相同ID的元素,则只会返回第一个元素,不会返回 ...
js 原生dom 操作
一. 首先要了解什么是 DOM? DOM: 全称 Document Object Mode 文档对象模型,表示由多层节点构成的文档. document: 表示每个文档的根节点,它的唯一子结点是 htm ...

执行this.$destory()指令后，原生DOM也没有响应的问题

执行this.$destory()指令后，原生DOM也没有响应的问题相关推荐

最新文章

热门文章