Question

所以我有一个我的类，它很大，所以我不能在这里包括它，但是本质上是：

var MyClass = function(options) {
  this.options = {}
  this.options = $.extend(true,this.options,options);
  this.init();
}

MyClass.prototype = {
  init:function(){
    this.set_events();
  },

  set_events:function(){
    // attach some dom events that in turn alter the dom (change some data- properties)
  }
}

令我非常好奇的是，如果我在Vue之后实例化它，MyClass将正常工作，并且能够修改dom也将工作。

var vueapp = new Vue({
  // init stuff
});

myclassinstance = new MyClass(); // OK

但是，如果我要相反的话：

myclassinstance = new MyClass(); // WILL NOT WORK (it won't be able to change data- properties upon dom events)

var vueapp = new Vue({
  // init stuff
});

注意＃1：控制台没有错误。

注释＃2：执行了Dom事件：我可以从中记录事件并检查dom元素，但看来我无法更改其道具！

那又怎样？任何人都可以解释我为什么会这样吗？

Answer 1

即使在Vue初始化后DOM看起来完全一样， Vue实际上已经删除了原始DOM并用某些Vue的设置/属性将其替换为新DOM 。

如果在Vue初始化之前添加事件侦听器，则具有事件侦听器的DOM将替换为没有事件侦听器的新DOM。那就是为什么。

例如https://codepen.io/jacobgoh101/pen/LrvXyb

var appElem = document.getElementById("app");
console.log('before Vue init', appElem === document.getElementById("app"));
// true

new Vue({
  el: "#app",
  data: {
    message: "Hello world"
  }
});

console.log('after Vue init', appElem === document.getElementById("app"));
// false

顺便说一句，在Vue之外修改DOM一直被认为是不好的做法。

从某种意义上说，Vue是一个嫉妒的图书馆拥有您提供的DOM补丁（由传递给它的内容定义） el）。如果jQuery更改了Vue正在管理的元素，例如，在某个内容上添加了一个类，Vue不会知道更改，因此将继续进行下去，并在下一个更新周期将其覆盖。 https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

（是否使用jQuery，这就是为什么修改DOM不好的原因）

Vue为什么破坏我自己的代码dom修改？

1 个答案: