Question

全部：

如果我在同一元素上两次创建Vue实例，我想知道Vue如何检查该元素之前是否已应用？

Option Explicit

Sub test()
    Dim oDoc As Document
    Set oDoc = ThisDocument

    oDoc.Range.Select       'selects all paragraphs
    Selection.Range.ListFormat.ApplyBulletDefault

    '--- create a list template that uses "-"
    Dim dashTemplate As ListTemplate
    Set dashTemplate = CreateCustomListStyle(oDoc)

    Selection.Range.ListFormat.ApplyListTemplateWithLevel ListTemplate:= _
        dashTemplate
End Sub

Answer 1

Vue 不检查是否在同一个DOM元素上创建了多个实例；从下面的控制台消息中可以看到，两个Vue实例均已创建，每个实例都有各自不同的数据，并且它们的mounted()事件均会触发：

var instance1 = new Vue({
  el: '#app',
  data: {
    foo: 'This is instance 1'
  },
  mounted() {
    console.log("Instance 1 mounted")
  }
});

var instance2 = new Vue({
  el: '#app',
  data: {
    foo: 'This is instance 2'
  },
  mounted() {
    console.log("Instance 2 mounted")
  }
});

// Both Vue instances exist, with their data intact:
console.log(instance1._data.foo)
console.log(instance2._data.foo)

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">{{foo}}</div>

但是两个实例最终相互竞争，导致错误。在上方，只有第一个实例的数据在DOM中可见。再举一个例子，在下面的代码片段中，两个实例的update方法根本无法运行：

var instance1 = new Vue({
  el: '#app',
  data: {
    foo: 'This is instance 1'
  },
  methods: {
    update() {
      this.foo = "Update from instance 1"
    }
  }
});

var instance2 = new Vue({
  el: '#app',
  data: {
    foo: 'This is instance 2'
  },
  methods: {
    update() {
      this.foo = "Update from instance 2"
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <div @click="update">{{foo}}</div>
</div>

...即使在元素上没有重复的Vue实例时，即使使用相同的方法也可以：

var instance1 = new Vue({
  el: '#app',
  data: {
    foo: 'This is instance 1'
  },
  methods: {
    update() {
      this.foo = "Update from instance 1"
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <div @click="update">{{foo}}</div>
</div>

这些问题不仅限于DOM交互；如果数据在超时而不是在单击事件上发生更改，则会发生类似的错误。

TL; DR

这里的结果是，出了什么问题的确切细节以及为什么不那么简单-这不像“第二个实例破坏第一个实例”或“第一个实例锁定第二个实例”那样容易-但这确实出错了，所以不要尝试这样做。两个实例都将争夺相同的DOM元素和绑定，因此它们最终会互相干扰也就不足为奇了。

（通常Vue对它不知道的DOM修改不满意;这里发生了与人们天真地尝试使用jQuery覆盖DOM然后为什么Vue无法更新的相同类型的问题一切都改变了，只是在这种情况下，它是Vue的另一个实例，而不是jQuery进行干扰。）

如果您需要检查DOM元素是否已经连接了Vue实例，可以通过检查元素上是否存在“ __vue__”属性来实现：

var hasVue = function(id) {
  if (document.getElementById(id).__vue__) {
    console.log("Has a vue instance attached")
  } else {
    console.log("No vue instance attached")
  }
}

hasVue('app');
new Vue({ el: '#app' });
hasVue('app');

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app"></div>

Vue如何检查实例化？

1 个答案:

TL; DR