挂载 Vue 实例的多种方式

浏览 182

课文

在这一节中,我们来了解挂载 Vue.js 实例的不同方法。

Vue 提供了很多种语法来安装一个 Vue 实例。它们的语法可能不同,但执行的所有操作是相同的。在本课中,将学习两种最常见的 Vue 实例挂载方式:

  1. el: '#app' 作为 Vue 实例中的配置属性
  2. 调用 Vue 实例的 $mount('#app') 方法

使用 el 配置属性挂载 Vue 实例

<div id='app'></div>

<script>
new Vue({
    el: '#app',// 将 Vue 实例挂载到 id 为 app 的元素上,就是上面的那个 div
    // ...
})
</script>

使用 $mount 方法挂载 Vue 实例

<div id='app'></div>

<script>
new Vue({
    // ...
}).$mount('#app')
</script>

两者的差异

如果 Vue 提供的两种方法挂载实例的结果将完全相同。那么我们不禁要问:为什么会这么设计?

第二种方法 $mount 允许我们将实例的安装推迟到特定事件发生后或我们需要它的时候。

例如,当网页中特定的元素渲染完成或异步任务执行完成时,可以使用 mount 方法将 Vue 实例延迟挂载。

由于 Vue 是渐进式框架,所以它必须使其具有高度适应性模块化的特性

下面我们来看一下,如何使用 $mount 方法延迟挂载 Vue 实例。

我们通过使用 setTimeout 函数来模拟事件。假设事件在两秒后发生,那么 Vue 实例会在它完成后再进行挂载。

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app">
   <h3>2秒后我将会被 Vue 实例的模板内容所替换。</h3>
</div>

<script>
// vue 实例并没有被立即挂载
const myVueInstance = new Vue({
  template: '<div>我会在2秒后显示到页面上。</div>',
});

// 这里发生了一些异步任务,我们需要在异步任务之后再挂载 Vue 实例
setTimeout(() => {
  myVueInstance.$mount('#app'); // 挂载 Vue 实例
},2000)
</script>

</body>
</html>

在上面的例子中,myVueInstance 中的 template 属性会替换 id 为 app 的元素的内容。setTimeout(function, time) 函数接受一个函数和一个数字类型的时间作为参数,单位是毫秒,之后它将在时间到达后执行第一个函数参数。

可以看到,$mount 函数可以在任何时刻挂载 Vue 实例。但是,使用 el 属性会立即挂载 Vue 实例!

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1