在 Vue 中 el属性 和 $mount 优先级？

在 Vue 中，el属性和$mount的优先级是开发过程中必须要了解的。这两个属性都是用来将 Vue 实例挂载到页面上的，但在何时使用这些属性，以及它们之间的优先级有何不同，这些都需要了解。

首先，我们需要知道什么是el属性和$mount方法。el属性是 Vue 实例的一个选项，它允许我们指定要挂载的元素，可以通过选择器字符串或元素本身来指定。例如：

new Vue({
  el: '#app'
})

上面的代码将会把 Vue 实例挂载到页面上ID为“app”的元素上。

而$mount方法是Vue实例的一个方法，它允许我们手动将Vue实例挂载到一个指定的DOM元素上。例如：

var vm = new Vue()
vm.$mount('#app')

上面的代码将会把Vue实例挂载到页面上ID为“app”的元素上。

在大多数情况下，Vue会自动使用el选项来挂载实例，但是如果你想在组件中动态地挂载实例，那么你需要使用$mount方法。因为在组件中，el选项无法生效，Vue实例需要手动挂载到一个DOM元素上。

那么，当同时指定el选项和使用$mount方法时，它们之间的优先级是什么呢？答案是，$mount方法优先级高于el选项。也就是说，如果同时存在el选项和$mount方法，Vue会优先使用$mount方法来挂载实例。

让我们看一个例子。假设我们有如下代码：

new Vue({
  el: '#app',
  template: '<div>Hello, Vue!</div>'
}).$mount('#app')

上面的代码中，我们既指定了el选项要挂载到ID为“app”的元素上，又使用了$mount方法，将实例手动挂载到“app”元素上。

实际上，Vue会优先使用$mount方法来挂载实例，也就是说，上面的代码等价于：

new Vue({
  template: '<div>Hello, Vue!</div>'
}).$mount('#app')

上面的代码中，我们没有指定el选项，但是使用了$mount方法来手动挂载实例。因为$mount方法优先级高于el选项，所以Vue会使用$mount方法来挂载实例。

总结一下，el属性和$mount方法都是用来将Vue实例挂载到页面上的。在大多数情况下，Vue会自动使用el选项来挂载实例，但是如果你想在组件中动态地挂载实例，那么你需要使用$mount方法。在同时存在el选项和$mount方法时，$mount方法优先级高于el选项。

火焰兔

海报 链接