Vue概述

Vue的加载过程

通过CDN引入Vue，有两种方式。第一种全局暴露一个Vue对象，第二种方式则利用ES6模块语法引入。

使用全局构建

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  const app = createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  })
  
  const vm = app.mount('#app')
</script>

代码解析：

Vue相关的js代码，会选定html中的一个dom元素进行渲染。一般把这个元素叫做根组件，它就是整个页面的内容载体：

<div id="app"></div>

全局构建版本，通过CDN暴露出一个Vue构造函数，在下面的script代码片段中，使用该函数创建了一个Vue实例，并通过它的mount方法绑定到id为app的div上，从而能够操作div，控制整个页面的内容。

所以，Vue本质上就是寻找到了一个dom对象，并对其进行操作，只不过这个对象比较"大"，代表了整个页面。

使用ES模块构建

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

在比较新的语法中，ES模块也可以用importmap来别名引入：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Vue的基本原理

几个核心概念：

• 单页面应用(SPA)
• 组件化布局
• 响应式数据
• 路由页面跳转

在前后端分离后，前端框架vue采用单页面布局，依靠组件挂载的方式形成整个页面。

在整个项目打包成由纯html,css,js代码组成的只含有一个入口html的dist文件夹后，收到用户的网站请求，把打包后的网站项目传到用户所在的浏览器，浏览器解析运行根html，并加载出首屏。

此后用户在该页面的操作全部都由js代码进行监听，即响应式，通过卸载和挂载页面组件的方式达到多页面的效果，实质上还是同一个页面。因此，Vue需要借助Vue-router来实现一个路由，来模拟出类似多页面不同链接之间跳转的效果。