💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## 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`钩子函数。