## Vue实例挂载的实现
Vue中我们通过$mount实例方法去挂载vm的,因为$mount这个方法的实现和平台、构建方式都相关,重点分析compiler版本的$mount实现,抛开webpakc的vue-loader,我们在纯前端浏览器环境分析Vue的工作原理。
分析代码:
* 首先,它对el做了限制,Vue不能挂载在body,html这样的根节点上。
* 如果没有定义render方法,则会把el或则template字符串转换成render方法。(Vue2.0版本中,所有Vue的组件的渲染都需要render方法,无论我们用单文件.vue开发,还是写了el或则template属性,组长都会转换成render方法),这个过程是vue的一个“在线编译”的过程。
* 调用原先原型上的$mount方法挂载。
$mount 方法支持传入2个参数,一个是el(挂载的元素,字符串或dom对象),第二个参数和服务端渲染有关。
$mount方法实际上会去调用mountComponent方法,**核心是先实例化一个渲染Watcher**,在它的回调函数中**会调用updateComponent方法**,在此方法中**调用`vm._render`方法先生成虚拟Node,最终调用`vm._update`更新DOM。**
Watcher在这里两个作用:
1. 初始化的时候会执行回调函数
2. 当vm实例中的检测的数据发生变化的时候执行回调函数。
函数最后判断为根节点的时候设置`vm._isMounted`为`true`, 表示这个实例已经挂载了,同时执行`mounted`钩子函数。
- 空白目录
- 双樾
- JS基础知识
- JS-WEB-API
- 开发环境
- 运行环境
- ES6
- 原型
- 异步
- 虚拟dom
- mvvm
- 组件化和React
- hybrid
- 其他
- 补充
- 技巧
- 快乐动起来呀
- css
- 掘金小册子
- js基础知识
- ES6知识点
- JS异步
- JS进阶知识
- 思考题
- DevTools Tips
- 浏览器基础知识
- 浏览器缓存机制0
- 浏览器渲染原理
- 安全防范知识点0
- 从V8中看JS性能优化0
- 性能优化琐碎事
- Webpack性能优化0
- 实现小型打包工具0
- React和Vue
- Vue生命周期
- vue基础知识点
- Vue响应式
- vue高级
- React基础
- Vue.js技术解密
- 准备工作
- 数据驱动
- new Vue()
- vue实例挂载
- 组件化
- 深入响应式原理
- 编译
- 扩展
- Vue Router
- Vuex