这是将VUE对象连接到元素的最推荐语法



将VUE实例连接到HTML元素时,我可以通过两种方式进行。

  1. 通过属性参考, el:"#rooty"
  2. 通过方法调用, $ mount("#rooty")

我无法在它们之间做出决定。它们是相当于的吗?如果一个更新或过时,建议使用哪个?还有其他区别吗?在这种情况下,会是什么?

通过属性参考。

const app = new Vue({
  store,
  router,
  el: "#rooty",
  ...
});//.$mount("#rooty");

通过方法调用。

const app = new Vue({
  store,
  router,
  //el: "#rooty",
  ...
}).$mount("#rooty");

似乎从文档中看来,$mount()的目的是具有未填充的VUE实例并稍后安装。从文档中:

如果VUE实例未在实例化中接收EL选项,则它将处于"未填充"状态,而没有关联的DOM元素。VM。$ mount()可用于手动启动未数的VUE实例的安装。


我相信el:"#rooty"只是通过$mount提供给用户的句法糖,因为内部$mount用于将实例连接到HTML元素。请参阅Vue Repo的下面的代码:

export function initRender (vm: Component) {
  ...
  ...
  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, needNormalization, alwaysNormalize
  // internal version is used by render functions compiled from templates
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // normalization is always applied for the public version, used in
  // user-written render functions.
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

相关内容

  • 没有找到相关文章

最新更新