将VUE实例连接到HTML元素时,我可以通过两种方式进行。
- 通过属性参考, el:"#rooty"
- 通过方法调用, $ 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)
}
}