extend 与 $mount 是vue中内置但不常用的api，它两经常在一起使用，不常用。但是在一定的场景下它们是至关重要。所以，它两你可以不深入，但是一定要会。
使用场景：
在写vue时，不管是cdn的方法还是在webpack里用npm 引入vue，我们都会有一个根节点。并创建一个实例。
<body>
<div id="app"></div>
</body>
<script>const app = new Vue({
el: '#app'
});
</script>类似于 webpack 。也有一个入口文件。在main.js里，最后会创建一个实例。
import Vue from 'vue'
import APp from './app.vue'
new Vue({
el: '#app',
render: h => h(App)
})因为webpack 基本都是前端路由的，它的html里一般都只有一个根节点
<div id="app"></div>
其余都是通过JavaScript来进行完成的，也就是说许多的vue组件，每一个页面也是一个组件。
当有了初始化的实例之后所有的页面，也会都交由vue-router 来帮我们管理，组件也都是用import 导入后局部进行注册，不管哪种方式，组件（或页面）的创建过程我们都是无需关心的，只是写好 . vue 文件并导入即可。这样的组件使用方式，有几个特点：
- 所有的内容，都是在#app 节点内渲染的。
- 组件的模板，都是事先定义好的。
- 由于组件的特性，注册的组件就按只能在当前位置渲染。
比如，我们要使用一个组件 渲染时，这个自定义标签就会被替换为组件的内容，而且在哪写的自定义标签，就在哪里被替换。换句话说，常规的组件使用方式，只能在规定的地方渲染组件，这在一些特殊场景下就比较局限了，例如：
1. 组件的模板是通过调用接口从服务端获取的，需要动态渲染组件；
2. 实现类似原生
window.alert() 的提示框组件，它的位置是在 <body>下，而非<div id="app"> ，并且不会通过常规的组件自定义标签的形式使用，而是像 JS 调用函数一样使用。
一般来说，在我们访问页面时，组件就已经渲染就位了，对于场景 1，组件的渲染是异步的，甚至预先不知道模板是什么。对于场景 2，其实并不陌生，在 jQuery 时代，通过操作 DOM，很容易就能实现，你可以沿用这种思路，只是这种做法不那么 Vue，既然使用 Vue.js 了，就应该用 Vue 的思路来解决问题。对于这两种场景，Vue.extend 和 vm.$mount 语法就派上用场了。
下一章就一起来深入extend 与 $mount 的实际使用与深入场景！
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
