Vue之文件加载执行全流程是什么

发布时间:2023-05-09 14:55:56 作者:zzz
来源:亿速云 阅读:506

Vue之文件加载执行全流程是什么

目录

  1. 引言
  2. Vue项目结构
  3. Vue CLI
  4. Webpack配置
  5. 入口文件
  6. Vue实例化
  7. 组件加载
  8. 路由加载
  9. 状态管理
  10. 生命周期钩子
  11. 模板编译
  12. 虚拟DOM
  13. 渲染过程
  14. 总结

引言

Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。与其他大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。本文将详细探讨 Vue 项目的文件加载和执行全流程,从项目结构到最终的渲染过程,帮助开发者深入理解 Vue 的内部机制。

Vue项目结构

一个典型的 Vue 项目结构如下:

my-vue-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

Vue CLI

Vue CLI 是 Vue.js 官方提供的命令行工具,用于快速搭建 Vue 项目。通过 Vue CLI,开发者可以轻松创建、管理和构建 Vue 项目。

安装 Vue CLI

npm install -g @vue/cli

创建项目

vue create my-vue-project

项目结构生成

Vue CLI 会根据选择的配置生成项目结构,包括 public/src/node_modules/ 等目录。

Webpack配置

Vue CLI 内部使用 Webpack 进行模块打包和构建。Webpack 是一个现代 JavaScript 应用程序的静态模块打包器,它能够将多个模块打包成一个或多个 bundle。

Webpack 配置文件

Vue CLI 默认隐藏了 Webpack 的配置文件,但可以通过 vue.config.js 进行自定义配置。

module.exports = {
  configureWebpack: {
    // 自定义 Webpack 配置
  }
}

主要配置项

入口文件

main.js 是 Vue 项目的入口文件,负责初始化 Vue 实例并挂载到 DOM 上。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

关键步骤

  1. 引入 Vue:通过 import Vue from 'vue' 引入 Vue 库。
  2. 引入根组件:通过 import App from './App.vue' 引入根组件。
  3. 引入路由:通过 import router from './router' 引入路由配置。
  4. 创建 Vue 实例:通过 new Vue() 创建 Vue 实例,并传入 routerrender 函数。
  5. 挂载到 DOM:通过 $mount('#app') 将 Vue 实例挂载到 index.html 中的 #app 元素上。

Vue实例化

Vue 实例化是 Vue 应用的核心步骤,通过 new Vue() 创建一个 Vue 实例。

实例化过程

  1. 初始化生命周期:Vue 实例会初始化生命周期钩子函数。
  2. 初始化事件:Vue 实例会初始化事件系统。
  3. 初始化渲染:Vue 实例会初始化渲染函数。
  4. 调用 beforeCreate 钩子:在实例初始化之后,数据观测和事件配置之前调用。
  5. 初始化注入:Vue 实例会初始化依赖注入。
  6. 初始化状态:Vue 实例会初始化 datapropsmethodscomputed 等状态。
  7. 调用 created 钩子:在实例创建完成后调用,此时可以访问 datamethods 等。
  8. 挂载到 DOM:通过 $mount() 方法将 Vue 实例挂载到 DOM 上。
  9. 调用 beforeMount 钩子:在挂载开始之前调用。
  10. 创建虚拟 DOM:Vue 实例会创建虚拟 DOM。
  11. 调用 mounted 钩子:在挂载完成后调用,此时可以访问 DOM 元素。

组件加载

Vue 组件是 Vue 应用的基本构建块,每个组件都是一个独立的 Vue 实例。

组件定义

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      message: 'Welcome to your Vue.js app'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

组件注册

组件可以通过全局注册或局部注册的方式使用。

全局注册

import Vue from 'vue'
import MyComponent from './MyComponent.vue'

Vue.component('my-component', MyComponent)

局部注册

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

组件通信

Vue 组件之间可以通过 propsevents$emit$refs 等方式进行通信。

Props

<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

Events

<template>
  <child-component @custom-event="handleEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(payload) {
      console.log('Event received:', payload)
    }
  }
}
</script>

路由加载

Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。

路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

路由加载过程

  1. 初始化路由:通过 Vue.use(Router) 初始化路由插件。
  2. 创建路由实例:通过 new Router() 创建路由实例,并配置路由表。
  3. 挂载路由:在 Vue 实例中挂载路由实例。
  4. 路由匹配:根据当前 URL 匹配路由表中的路由。
  5. 加载组件:加载匹配到的路由组件并渲染到 <router-view> 中。

路由钩子

Vue Router 提供了全局路由钩子和组件内路由钩子,用于在路由切换时执行特定逻辑。

全局路由钩子

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next()
})

router.afterEach((to, from) => {
  console.log('afterEach')
})

组件内路由钩子

export default {
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  }
}

状态管理

Vuex 是 Vue.js 官方的状态管理库,用于集中管理应用的所有组件的状态。

Vuex 配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

Vuex 加载过程

  1. 初始化 Vuex:通过 Vue.use(Vuex) 初始化 Vuex 插件。
  2. 创建 Store 实例:通过 new Vuex.Store() 创建 Store 实例,并配置 statemutationsactionsgetters
  3. 挂载 Store:在 Vue 实例中挂载 Store 实例。
  4. 访问状态:通过 this.$store.state 访问状态。
  5. 提交 Mutation:通过 this.$store.commit() 提交 Mutation。
  6. 分发 Action:通过 this.$store.dispatch() 分发 Action。
  7. 获取 Getter:通过 this.$store.getters 获取 Getter。

Vuex 模块化

对于大型应用,可以将 Vuex Store 分割成模块(module),每个模块拥有自己的 statemutationsactionsgetters

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

生命周期钩子

Vue 实例和组件在创建、更新、销毁过程中会触发一系列生命周期钩子函数,开发者可以在这些钩子中执行特定逻辑。

生命周期钩子函数

  1. beforeCreate:在实例初始化之后,数据观测和事件配置之前调用。
  2. created:在实例创建完成后调用,此时可以访问 datamethods 等。
  3. beforeMount:在挂载开始之前调用。
  4. mounted:在挂载完成后调用,此时可以访问 DOM 元素。
  5. beforeUpdate:在数据更新之前调用,此时 DOM 还未重新渲染。
  6. updated:在数据更新之后调用,此时 DOM 已经重新渲染。
  7. beforeDestroy:在实例销毁之前调用。
  8. destroyed:在实例销毁之后调用。

生命周期图示

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

模板编译

Vue 的模板编译过程将模板字符串转换为渲染函数。

模板编译过程

  1. 解析模板:将模板字符串解析为抽象语法树(AST)。
  2. 优化 AST:对 AST 进行静态分析,标记静态节点。
  3. 生成代码:将 AST 转换为渲染函数代码。

模板编译示例

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

编译后的渲染函数:

function render() {
  with(this) {
    return _c('div', [
      _c('h1', [_v(_s(title))]),
      _c('p', [_v(_s(message))])
    ])
  }
}

虚拟DOM

虚拟 DOM 是 Vue 实现高效渲染的核心机制,它是一个轻量级的 JavaScript 对象,用于描述真实 DOM 的结构。

虚拟 DOM 的优势

  1. 高效更新:通过对比新旧虚拟 DOM,最小化 DOM 操作。
  2. 跨平台:虚拟 DOM 可以在不同平台上运行,如浏览器、Node.js、Weex 等。
  3. 简化开发:开发者无需直接操作 DOM,只需关注数据变化。

虚拟 DOM 结构

{
  tag: 'div',
  data: { attrs: { id: 'app' } },
  children: [
    { tag: 'h1', data: {}, children: [{ text: 'Hello Vue' }] },
    { tag: 'p', data: {}, children: [{ text: 'Welcome to your Vue.js app' }] }
  ]
}

虚拟 DOM 更新过程

  1. 创建虚拟 DOM:根据模板或渲染函数创建虚拟 DOM。
  2. 对比虚拟 DOM:对比新旧虚拟 DOM,找出差异。
  3. 更新真实 DOM:根据差异更新真实 DOM。

渲染过程

Vue 的渲染过程是将虚拟 DOM 转换为真实 DOM 并显示在页面上。

渲染过程步骤

  1. 初始化渲染:在 mounted 钩子中,Vue 实例会将虚拟 DOM 渲染为真实 DOM 并挂载到页面上。
  2. 数据更新:当数据发生变化时,Vue 会重新生成虚拟 DOM。
  3. 对比差异:对比新旧虚拟 DOM,找出差异。
  4. 更新 DOM:根据差异更新真实 DOM。

渲染示例

<div id="app">
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
</div>

titlemessage 发生变化时,Vue 会重新生成虚拟 DOM,并更新真实 DOM。

总结

Vue 的文件加载和执行全流程涵盖了从项目结构到最终渲染的各个环节。通过深入理解 Vue 的内部机制,开发者可以更好地优化和调试 Vue 应用。本文详细介绍了 Vue 项目的结构、Vue CLI、Webpack 配置、入口文件、Vue 实例化、组件加载、路由加载、状态管理、生命周期钩子、模板编译、虚拟 DOM 和渲染过程,希望能够帮助开发者更好地掌握 Vue.js。

推荐阅读:
  1. Vue中v-model指令的原理是什么
  2. vue-resourse如何获取json并应用到模板

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue跳转同一路由报错如何解决

下一篇:Vue请求怎么传递参数

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》