挂载 Vue 实例的多种方式
浏览 569
课文
在这一节中，我们来了解挂载 Vue.js 实例的不同方法。
Vue 提供了很多种语法来安装一个 Vue 实例。它们的语法可能不同，但执行的所有操作是相同的。在本课中，将学习两种最常见的 Vue 实例挂载方式：
- el: '#app' 作为 Vue 实例中的配置属性
- 调用 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 实例！
评论
暂无评论