vue挂载全局的使用,vue挂载全局的使用
这篇文章主要给大家介绍了关于某视频剪辑软件实例挂载的过程，文中通过实例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考下
目录
newVue()这个过程中究竟做了些什么？初始化数据初始化状态（虚拟机)看下initData再看下挂载方法是调用虚拟机.$mountrender的作用主要是生成虚拟节点总结
new Vue()这个过程中究竟做了些什么？
功能Vue(选项){
if (process.env.NODE_ENV！==生产
！（这是某视频剪辑软件的例子)
) {
警告( Vue是一个构造函数，应该用新的关键字调用)
}
这个. init(选项)
}
某视频剪辑软件构建函数调用_init方法，但发现本文件中并没有此方法，但仔细可以看到文件下方定义了很多初始化方法
initMixin(Vue)；//定义_init
stateMixin(Vue)；//定义$set $get $delete $watch等
eventsMixin(Vue)；//定义事件$on $once $off $emit
生命周期米辛(Vue)；//定义_ update$force update$destroy
渲染mixin(Vue)；//定义_渲染返回虚拟数字正射影像图
首先可以看initMixin方法，发现该方法在某视频剪辑软件原型上定义了_init方法
Vue.prototype._init=function(选项？对象){
常量vm:组件=这个
虚拟机._uid=uid
让开始标记，结束标记
if (process.env.NODE_ENV！==生产配置。性能标志){
startTag=`vue-perf-start:${vm ._uid} `
endTag=`vue-perf-end:${vm ._uid} `
标记（开始标记)
}
虚拟机._isVue=true
//合并属性，判断初始化的是否是组件，这里合并主要是混入类或延伸的方法
如果(选项选项. isComponent) {
initInternalComponent(虚拟机，选项)
} else { //合并某视频剪辑软件属性
虚拟机.$options=mergeOptions(
resolveConstructorOptions(VM。建造师)，
选项 {},
伏特计
)
}
/*伊斯坦布尔忽略else */
if (process.env.NODE_ENV！==生产){
//初始化代理人拦截器
初始化代理（虚拟机)
}否则{
虚拟机._renderProxy=vm
}
//暴露真实的自己
虚拟机._self=vm
//初始化组件生命周期标志位
初始生命周期（虚拟机)
//初始化组件事件侦听
初始化事件（虚拟机)
//初始化渲染方法
初始化渲染（虚拟机)
呼叫挂钩(虚拟机，"创建前")
//初始化依赖注入内容，在初始化数据、道具之前
初始注入(虚拟机)//在数据/属性之前解析注入
//初始化道具/数据/方法/手表/方法
初始化状态（虚拟机)
initProvide(vm) //在数据/属性之后解析提供
呼叫挂钩(虚拟机，"已创建")
/*伊斯坦布尔忽略if */
if (process.env.NODE_ENV！==生产配置。性能标志){
虚拟机._name=formatComponentName(vm，false)
标记（结束标记)
度量值(` vue ${vm ._name} init `，startTag，endTag)
}
//挂载元素
如果(虚拟机.$options.el) {
虚拟机.$mount(虚拟机.$options.el)
}
}
在初始化()中会通过呼叫挂钩(虚拟机，创建前)来执行创建前生命周期函数然后通过初始化状态（虚拟机)初始化道具、方法、数据接着会通过呼叫挂钩(虚拟机，"已创建")来执行创造生命周期函数最后通过虚拟机.$mount(虚拟机.$options.el)来挂载元素
所以：
1.在创建前生命周期函数中是无法访问小道具和数据因为他们还没有被初始化
2.同理在创造函数中可以访问道具、方法、数据数据同时也是最早可以调用接口的生
命周期函数，但是此时数字正射影像图并未挂载所以无法访问数字正射影像图元素
3.在安装好的中此时数字正射影像图已经挂载成功所以可以访问数字正射影像图元素也是最早可以操作数字正射影像图元素的生命周期函数
初始化数据 initState（vm）
导出函数initState(虚拟机：组件){
//初始化组件的看守人列表
虚拟机._watchers=[]
const opts=vm .$选项
//初始化小道具
if (opts.props) initProps(vm，opts.props)
//初始化方法方法
if (opts.methods) initMethods(vm，opts.methods)
if (opts.data) {
//初始化数据
初始化数据（虚拟机)
}否则{
观察(虚拟机._data={}，true /* asRootData */)
}
if(opts . computed)init computed(VM，opts。已计算)
if (opts.watch opts.watch！==nativeWatch) {
initWatch(vm，opts.watch)
}
}
在初始状态中会先通过initProps、initMethods、initData先后分别来初始化相关数据在这里会初始化组件的看守人列表
看下 initData
函数initData(虚拟机：组件){
设数据=vm .$options.data
//获取到组件上的数据
数据=虚拟机. data=数据类型===函数
？获取数据（数据，虚拟机)
:data {}
如果(!isPlainObject(data)) {
数据={}
process.env.NODE_ENV==生产警告（
数据函数应该返回对象：\n
https://vuejs。org/v2/guide/组件。 html #数据必须是函数，
伏特计
)
}
//实例上的代理数据
const keys=Object.keys(data)
常量属性=vm .$选项。道具
常数方法=vm .$options.methods
设i=密钥.长度
while (i - ) {
const key=keys[i]
if (process.env.NODE_ENV！==生产){
//属性名不能与方法名重复
if (methods hasOwn(methods，key)) {
警告（
"方法" ${key} "已被定义为数据属性。
伏特计
)
}
}
//属性名不能与状态名称重复
if (props hasOwn(props，key)) {
process.env.NODE_ENV==生产警告（
数据属性" ${key} "已被声明为属性。`
`请改用合适默认值。`,
伏特计
)
} else if(！isReserved(key)) { //验证键值的合法性
//将_数据中的数据挂载到组件伏特计上，这样就可以通过this.xxx访问到组件上的数据
代理（虚拟机，` _数据`,密钥)
}
}
//观察数据
//响应式监听数据是数据的变化
observe(data，true /* asRootData */)
}
需要注意的是：初始化数据数据的时候会校验小道具中变量名称和数据中的不能重复，在这里会通过观察劫持数据的所有属性，如果监听到数据变化就通知订阅者看守人来更新数据，以此来实现数据双向绑定，这就是某视频剪辑软件实现数据响应式的发布订阅者模式挖个坑自己实现该模式
再看下挂载方法是调用vm.$mount
Vue.prototype.$mount=function(
埃尔？字符串元素，
补水？布尔型
):组件{
//获取或查询元素
el=el查询(el)
/*伊斯坦布尔忽略if */
//vue不允许直接挂载到身体或页面文档上
if(El===文档。body El===文档。文档元素){
process.env.NODE_ENV==生产警告（
`不要将某视频剪辑软件挂载到html，也不要将正文挂载到普通元素。
)
归还这个
}
常量选项=这个.$选项
//解析模板/el并转换为呈现函数
如果(!options.render) {
let template=options.template
//存在模板模板，解析某视频剪辑软件模板文件
如果(模板){
if (typeof template===string) {
if (template.charAt(0)===#) {
template=idToTemplate(template)
/*伊斯坦布尔忽略if */
if (process.env.NODE_ENV！==生产！模板){
警告（
`模板元素未找到或为空：${options.template} `，
这
)
}
}
} else if (template.nodeType) {
template=template.innerHTML
}否则{
if (process.env.NODE_ENV！==生产){
警告(无效模板选项：模板，这个)
}
归还这个
}
} else if (el) {
//通过选择器获取元素内容
template=getOuterHTML(el)
}
如果(模板){
/*伊斯坦布尔忽略if */
if (process.env.NODE_ENV！==生产配置。性能标志){
标记("编译")
}
/**
* 1.将模板解析大西洋标准时间树
* 2.将大西洋标准时间树转换成提出语法字符串
* 3.生成提出方法
*/
const { render，staticRenderFns }=compileToFunctions(template，{
输出源范围：过程。环境。node _ ENV！==生产，
应该解码新线条，
shouldDecodeNewlinesForHref，
分隔符：选项。分隔符，
注释：选项。注释
},这个)
options.render=render
选项。staticRenderFns=staticRenderFns
/*伊斯坦布尔忽略if */
if (process.env.NODE_ENV！==生产配置。性能标志){
标记("编译结束")
测量(` vue ${this ._name} compile `、 compile 、 compile end )
}
}
}
return mount.call(这个，el，补水)
}
在调用虚拟机.$mount方法时会将模板解析为抽象语法树（采油树)再将抽象语法树转换成提出语法字符串最终生成提出方法挂载到伏特计上后，会再次调用增加方法
Vue.prototype.$mount=function(
埃尔？字符串元素，
补水？布尔型
):组件{
el=el inBrowser？查询(el):未定义
//渲染组件
返回安装组件（此组件，el，补水)
}
调用安装组件渲染组件
导出函数安装组件(
虚拟机：组件，
el:元素，
补水？布尔型
):组件{
虚拟机.$el=el
//如果没有获取解析的提出函数，则会抛出警告
//渲染是解析模板文件生成的
如果(!虚拟机.$options.render) {
虚拟机.$ options。render=createEmptyVNode
if (process.env.NODE_ENV！==生产){
/*伊斯坦布尔忽略if */
如果((vm .$options.template vm .$options.template.charAt(0)！==#)
虚拟机.$options.el el) {
警告（
您正在使用某视频剪辑软件的仅运行时版本，其中模板
编译器不可用。要么将模板预编译成
呈现函数，或者使用编译器自带的版本。
伏特计
)
}否则{
//没有获取到某视频剪辑软件的模板文件
警告（
未能安装组件：未定义模板或呈现函数。
伏特计
)
}
}
}
//执行即将挂载钩子
呼叫挂钩(虚拟机，"装载前")
让更新组件
/*伊斯坦布尔忽略if */
if (process.env.NODE_ENV！==生产配置。性能标志){
updateComponent=()={
const name=vm ._name
const id=vm ._uid
const start tag= vue-perf-start:$ { id }
const end tag= vue-perf-end:$ { id }
标记（开始标记)
常数vnode=vm ._render()
标记（结束标记)
度量(` vue ${name} render `，startTag，endTag)
标记（开始标记)
虚拟机._更新（虚拟节点，补水)
标记（结束标记)
测量(` vue ${name} patch `，startTag，endTag)
}
}否则{
//定义更新函数
updateComponent=()={
//实际调是在生命周期毒素中定义的_更新和渲染混合中定义的_渲染
虚拟机._更新（虚拟机. render()，补水)
}
}
//监听当前组件状态，当有数据变化时，更新组件
新观察器（虚拟机、更新组件、noop 、{
之前(){
如果(虚拟机._isMounted！虚拟机._isDestroyed) {
//数据更新引发的组件更新
呼叫挂钩(虚拟机，"更新前")
}
}
}，true /* isRenderWatcher */)
补水=假
如果(虚拟机.$vnode==null) {
虚拟机._isMounted=true
调用挂钩（虚拟机，"已安装")
}
返回虚拟机
}
此时会触发即将挂载钩子函数，定义updateComponent来渲染页面视图的方法，监听组件数据，一旦发生变化，触发更新前生命钩子最后执行调用挂钩（虚拟机，"已安装")钩子函数完成挂载updateComponent方法主要执行在某视频剪辑软件初始化时声明的渲染，更新方法
render的作用主要是生成vnode
//定义某视频剪辑软件原型上的提出方法
vue。原型。_ render=function():VNode {
常量vm:组件=这个
//渲染函数来自于组件的选择权
const { render，_parentVnode }=vm .$选项
if (_parentVnode) {
虚拟机.$ scopedSlots=normalizeScopedSlots(
_parentVnode.data.scopedSlots，
虚拟机.$老虎机，
虚拟机.$scopedSlots
)
}
虚拟机.$vnode=_parentVnode
//呈现自我
让虚拟节点
尝试{
currentRenderingInstance=vm
//调用提出方法，自己的独特的提出方法，传入标签名参数，生成虚拟节点
vnode=render.call(vm ._renderProxy，vm .$createElement)
} catch (e) {
handleError(e，vm， render `)
if (process.env.NODE_ENV！=="生产"虚拟机. options.renderError) {
尝试{
vnode=vm .$options.renderError.call(vm ._renderProxy，vm .$createElement，e)
} catch (e) {
handleError(e，vm， renderError `)
vnode=vm ._vnode
}
}否则{
vnode=vm ._vnode
}
}最后{
currentRenderingInstance=null
}
//如果返回的数组只包含一个节点，则允许它
if(数组。是数组(vnode)vnode。长度===1){
vnode=vnode[0]
}
//在呈现函数出错时返回空的虚拟节点
如果(!(vnode的虚拟节点实例)){
if (process.env.NODE_ENV！==生产数组。isarray(vnode)){
警告（
渲染函数返回了多个根节点。渲染功能
应该返回一个根节点。
伏特计
)
}
vnode=createEmptyVNode()
}
//设置父级
vnode.parent=_parentVnode
返回虚拟节点
}
_更新主要功能是调用补丁，将虚拟节点转换为真实多姆，并且更新到页面中
vue。原型。_ update=function(VNode:VNode，补水？布尔){
常量vm:组件=这个
const prevEl=vm .$el
const prevVnode=vm ._vnode
//设置当前激活的作用域
const restoreActiveInstance=setActiveInstance(VM)
虚拟机._vnode=vnode
//Vue.prototype.__patch__在入口点注入
//基于所使用的渲染后端。
如果(!prevVnode) {
//初始渲染
//执行具体的挂载逻辑
虚拟机.$el=vm .__补丁_ _(虚拟机$el，vnode，补水，false /* removeOnly */)
}否则{
//更新
虚拟机.$el=vm .__patch__(prevVnode，Vnode)
}
restoreActiveInstance()
//更新__vue__引用
if (prevEl) {
普雷维尔. vue__=null
}
如果(虚拟机.$el) {
虚拟机.亿美元.__vue__=虚拟机
}
//如果父级是特设的，也更新它的$el
如果(虚拟机.$vnode虚拟机。$父虚拟机vnode===vm .$parent ._vnode) {
虚拟机.$parent .$el=vm .$el
}
//调度程序调用更新的挂钩以确保子级
//在父级的更新钩子中更新。
}
总结
到此这篇关于某视频剪辑软件实例挂载过程的文章就介绍到这了，更多相关某视频剪辑软件实例挂载过程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。