vue的加载顺序导致的:在export之外初始化window全局变量是undefined

question:最近写vue项目遇到一个问题,以下三个文件中,water.vue在export之外初始化window定义的全局变量,结果是undefined

//APP.vue
<template>
  <earth />
  <water />
</template>
//earth.vue
 <template></template>

<script>
 export default{
  name:'earth',
  mounted(){
  window.earth = new Earth();
  }
 }
</script>
//water.vue
var earth = window.earth;
export default{
  name:'water',
  methods:{
  hello(){
  console.log(earth);  //打印结果是earth  is undefined;
 }
}
}

 后来才知道这个跟vue加载文件顺序有关:vue先加载export外的js代码,然后再加载export内的mounted。所以water.vue在export之外无法加载,earth.vue中mounted内部定义的全局变量。

index.html->APP.vue的export以外的js代码->main.js->APP.vue的export内代码->earth.vue的export外的js代码->water.vue的export外的js代码->meatrue.vue的export外的js代码->earth.vue的export内代码->water.vue的export内代码->meatrue.vue的export内代码
1,先加载全部组件export外的js代码,然后再加载全部组件export内的js代码;
2,export内的js代码先加载mounted函数

在app.vue中earth.vue组件是放在water.vue之前的,window.earth是在earth.vue的mounted内加载的,我在water.vue内的mounted内获取window.earth是成功的;假如我把earth.vue放在water.vue组件之后,理论上先加载water.vue的mounted再加载earth.vue的mounted,所以应该报错earth是undefined; 事实上确实报错了。但是water.vue的子组件却可以获取window.earth,说明以下两个问题:

1,vue是按照组件的摆放顺序加载的,同等级的组件,摆放越靠前越先加载;
2,父级组件总是先全部加载完毕,然后才轮到子组件加载


 补充,以下是vue的启动流程,原文链接 

VUE启动流程

1. package.json

在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称版本、项目依赖等相关信息。

复制代码

{ # 版本信息
  "name": "kitty-ui",
  "version": "1.0.0",
  "description": "kitty ui project",
  "author": "Louis",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": { # 项目依赖
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {  # 项目依赖
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1","vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {  # node、npm版本要求
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

复制代码

2. webpack.dev.conf.js

从下图中可以看到, 启动 npm run dev 命令后,会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。

3.  config/*.js

 webpack.dev.conf.js 中引入了很多模块的内容,其中就包括 config 目录下服务器环境的配置文件。

4.  config/index.js

可以看到,在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置,默认启动端口是8080,这里可以进行修改。

 

5.  index.html

index.html 的内容很简单,主要是提供一个 div 给 vue 挂载。

6.  main.js

main.js 中, 引入了 vue、App 和 router 模块, 创建了一个 Vue 对象,并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下, 并绑定了一个路由配置。

7.  App.vue

上面 main.js 把 App.vue 模板的内容,放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到,这个页面的内容由一个 logo 和一个待放置内容的 router-view,router-view 的内容将由 router 配置决定。

 

8.  index.js

查看 route 目录下的 index.js,我们发现这里配置了一个路由, 在访问路径 / 的时候, 会把 HelloWorld 模板的内容放置到上面的 router-view中。 

9.  HelloWorld.vue

HelloWorld 中主要是一些 Vue 介绍显示内容。

 

10. 页面组成

所以,页面关系组成是 index.html 包含 App.vue,App.vue 包含 HelloWorld.vue 。

 

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值