vue.use,vue.extend,$mount()

221 阅读1分钟

vue.use

定义

全局注册一个组件或插件的方法

安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。 该方法需要在调用 new Vue() 之前被调用。

做了什么

我们平时写一个组件,里面写上install方法,那么使用vue.use()的时候,就会调用这个组件的install方法。

比如下面的例子,用来注册一个组件

参考: www.jianshu.com/p/89a057069…

vue.extend

定义

使用vue构造器,创建一个子类,参数是一个组件对象,注意data必须是一个函数

Vue.extend()返回的是一个扩展实例构造器,简单的来说就是一个预设了部分选项的Vue 的实例。主要用来服务Vue.component,用来生成组件。

$mount()

  • 首先根据传进来的el获取DOM元素,并且判断其是不是HTML或者body,因为html或者body被替换后会破坏文档结构

  • 在用户没有手写render函数的情况下,获取传入的模版template

  • 将获取到的template编译成render函数

首先获取用户传入的template选项赋给变量template,如果变量template存在,则接着判断如果template是字符串并且以##开头,则认为template是id选择符,则调用idToTemplate函数获取到选择符对应的DOM元素的innerHTML作为模板。如果template不是字符串,那就判断它是不是一个DOM元素,如果是,则使用该DOM元素的innerHTML作为模板,如果既不是字符串,也不是DOM元素,此时会抛出警告:提示用户template选项无效。如果变量template不存在,表明用户没有传入template选项,则根据传入的el参数调用getOuterHTML函数获取外部模板,不管是从内部的template选项中获取模板,还是从外部获取模板,总之就是要获取到用户传入的模板内容,有了模板内容接下来才能将模板编译成渲染函数。获取到模板之后,接下来要做的事就是将其编译成渲染函数,把模板编译成渲染函数是在compileToFunctions函数中进行的,该函数接收待编译的模板字符串和编译选项作为参数,返回一个对象,对象里面的render属性即是编译好的渲染函数,最后将渲染函数设置到$options上。

原文链接:blog.csdn.net/leelxp/arti…