Vue 개체를 요소에 연결할 때 가장 권장되는 구문은 무엇입니까?

Vue 개체를 요소에 연결할 때 가장 권장되는 구문은 무엇입니까?

HTML 요소에 Vue 인스턴스를 첨부할 때 두 가지 방법이 있습니다.

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)
  }
}

언급URL : https://stackoverflow.com/questions/40997222/which-is-the-most-recommended-syntax-for-attaching-vue-object-to-an-element