Question

我有一个简单的vue实例：

var vm = new Vue({
    el: "#myEl",
    data: {
        parent: null,
        posts: [],
        total: 0,
        currentPage: 0
    },
    mounted: function () {
        alert("mounted");
    }
});

当页面上存在#myEl时，一切都很好，但是如果没有，则无论如何都会触发安装程序挂钩。

但是为什么呢？没有要为其安装实例的元素，那么为什么仍要为其安装？我该如何检查el的存在？

Answer 1

From Evan You

当el不可用时，组件将安装在内存中（类似于   调用不带参数的$ mount（）。

控制台中有警告告诉您目标el   找不到。

如果您不希望这种情况发生，请将实例包装在元素中，例如

if(document.querySelector('#el')){ ... }

Answer 2

根据source code，如果找不到该元素，则会发出警告，并创建一个<div>。

在实例化组件之前，您有责任检查元素是否存在（document.querySelector()）。

Answer 3

我这样做的方法（虽然可能不是办法）只是在尝试装入实例之前查询元素。看起来像这样：

const element = document.querySelector("#myEl");

if (element) {
  var vm = new Vue({
    el: element,
    ...
  });
}

为什么即使在Vue中不存在el也会触发安装的钩子？

3 个答案: