vue3个人心得---概论（HTML、JS 和 VUE初解）

三种类型文件

采用vite进行vue3开发，初始化后有三种构建文件，后缀分别为.html、.js 和 .vue，初学者只知在.vue文件开始偿试写代码，学习vue的各种功能，而对.html、.js 文件为什么出现不明所以，.html、.js 和 .vue之间的关系迷糊不清，在此初步探讨三种文件的作用与他们的联系。

一、html文件

HTML 不是一种编程语言，而是一种标记语言。
它用一套标记标签来描述要在网页显示的内容。
HTML的作用就是显示，因此没有js也一样能达到显示的效果，只是引入js能大大提高HTML的效率，节省资源，这在之后的JS里有介绍。所以HTML通过<script>标签加入了js，js配合HTML工作，必须依赖HTML才能运行。可以说html是万物之始！
在VUE项目中，必须有且只能有一个HTML起始文件。

二、js文件

什么是JS
JavaScript 是一种轻量级的编程语言，可插入 HTML 页面被浏览器执行。
js语句能方便的操作各种变量、常量和DOM对象，还可以把这些js指令打包成一个个函数，页面事件触发时运行这些函数，从而控制HTML 的 内容和样式。
为什么要有JS
如果没有JS,客户端每一项请求都得向服务端申请，服务端运算后把新的网页内容返回客户端显示。而js运行在客户端，它能在本地运算处理用户的请求，直接显示更改后的网页内容。这大大降低服务端的负荷，使服务端不再负责客户端的显示。
可见JS并不是必须，但有JS更高效。
js在html中的运行
js代码并不能单独运行，必须放在html的<script>标签中，才能被浏览器识别运行。
在html中，js标签与其它标签在一起时，按标签的前后顺序运行。
在js标签里，js是单线程运行，前一条指令结束，才会执行后一个指令。如果某些指令不需要马上执行，可以把他们打包成函数，通过调用按需执行。如下:
<script>console.log('打印出来')</script>
js语句除了写在标签里外，还可以单独形成文件，以导入文件的形式出现在html里。单独文件不需要<script>标签，可以直接放置 JS 代码，不能直接放置html标签，只能通过js方法间接放置 html 标签。
html导入js文件的两种方式
1、通过<script>标签的src属性引入js文件，如下：
<script src="/src/main.js"></script>
2、通过 import 函数引入js文件，如下：
<script type="module"> import './src/main.js'</script>
两种导入方式的曲别
1、通过import引入，需给标签的type属性赋值"module"，开启import规范。
2、通过import引入，文件路径前要加个点号，如下：'./src/main.js',而src属性引入的文件路径不要加点,如下"/src/main.js"。
3、通过src属性引入，标签内的JS代码无效，如下 console.log会不执行：

<script src="src/maincopy.js">
   console.log("打印不出来")
<script>

4、通过src属性引入，是完整引入(除了运行js文件中的全局代码外,还引入变量、对象、函数、类等)。
5、通过import引入，是副本引入(只运行js文件中的全局代码,不导入变量、对象、函数、类等）。如要完整引入，js文件需用export导出，import要加from语句，如下：

import {导入变量、对象、函数、类等} from"./src/main.js"

关于export导出请参见JS模块。
6、通过src属性引入，不能引入使用export导出的js文件。
7、通过src属性引入，导入变量、对象、函数、类等作用于全局，html的所有<script>标签都可使用。
8、通过import引入，导入变量、对象、函数、类等只作用于本<script>标签，html的其它<script>标签不可用。如下会报错：

    <script  type="module">
      import {cc} from"./src/main.js"
    </script>
    <script >
      console.log(cc)
    </script>

9、<script>开启import规范，会使采用 file:// URL 方式打开html报 CORS 跨域错误,需通过 HTTP 服务器方式才能正确打开。
10、<script>开启import规范，会晚于不开启import规范的<script>标签执行。如下：

<script type="module">
    import './src/maincopy.js'
    console.log(""我后执行")
</script> 
<script>
 console.log(""""我会先执行""")
</script>

在VUE项目中html导入的第一个js

import { createApp} from 'vue'
import App from './App.vue'
import router from './router.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
createApp(App).use(router).mount("#app")  //router要在mount之前，否则<router-link>标签不生效
//将上面归一行式的另类分开式写法，此写法可以通过app.的方式生成全局变量、组件等
const app=createApp(App)                 
app.use(router)                         
app.mount("#app")

三、vue文件

VUE规范的JS
在 HTML 的头部的<script>标签导入vue.js文件，就可以在后继<script>标签中使用Vue规范书写JS代码，Vue规范有一套基于标准 HTML 的拓展语法，来描述最终输出的 HTML 和 JavaScript 状态之间的关系、自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。
将Vue规范书写的JS打包成对像，使用createApp(App).mount("#app")命令将这个JS对像实例化挂载到元素上，就可操作元素内的显示。
采用Vue规范的书写的JS代码更加简洁、直观、对html控制更加便利，但他还是js，只是采用了vue规范的JS对像。
对象组件---JS文件
JavaScriptcf对象形式的组件，逻辑与模版等都是对象中的一个个属性选项----“{ / 选项 / }”，详见组件基础组件的两种存在形态。对像组件可以形成单独文件，文件扩展名还是.js，虽然他是单文件组件，但他不能称为单文件组件，只能称为对像组件，因为单文件组件特指vue文件。
单文件组件---vue文件
在vite构建的开发环节，有一种后缀为.vue的文件，他不采用JS的语法，而是像html一样内含逻辑 (Script)、模板 (template) 和样式 (style)，能自成一体完成逻辑与内容显示，称为单文件组件;将它导入html或js文件不会生效，只能在vite(ESM驱动的 Web开发构建工具)的开发环境才能生效，打包时构建工具将其转换成JS代码。
Vue 文件包函三部分：逻辑 (Script)，模板 (template) 和样式 (style)，各部分如html一样需用<script >、<template>、<style>标签进行标记，如下：

<script setup> </script >
<template><div>我是内容</div></template>
<style scoped>.logo {height: 6em}</style> 

vue文件可随心所欲的操作 html、JS、CSS，使得js开发更加便利，vue文件的存在是VUE真正强大的体现，说vue文件是众神之子也不为过。

Vue 的两个核心功能

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。（import）
响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM

Vue 的一大优势——渐进式框架

Vue 活性和“可以被逐步集成”这个特点。根据需求场景，可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML （这个可以理解）
• 在任何页面中作为 Web Components 嵌入（这个可以理解）
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)

• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

  Vue 的组件风格

• 选项式 API (Options API)
  用选项词（例如 data、methods 和 mounted）来描述和分类组件的逻辑。
• 组合式 API (Composition API)
  用导入的 API 函数（例如 import { ref, onMounted } ）来描述组件逻辑，相同的逻辑可随意散布
• “选项式 API”与“组合式 API”只是写法风格的不同，作用是一样的

组合式 API

组合式 API是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它涵盖了以下方面的 API：

• 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
• 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
• 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

组合式 API基本上都会配合 <script setup> 语法在单文件组件中使用

组合式 API的优势

• 更好的逻辑复用
  组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins（混用），而组合式 API 解决了 mixins 的所有缺陷。
• 更灵活的代码组织
  选项式会把处理相同逻辑关注点的代码强制拆分在了不同的选项中，组合式 API 可以把同一个逻辑关注点相关的代码被归为了一组，无需为了一个逻辑关注点在不同的选项块间来回滚动切换。此外，可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本，这在长期维护的大型项目中非常关键。
• 更好的类型推导
  组合式 API 主要利用基本的变量和函数，可以享受到完整的类型推导，不需要书写太多类型标注。大多数时候，用 TypeScript 书写的组合式 API 代码和用 JavaScript 写都差不太多！这也让许多纯 JavaScript 用户也能从 IDE 中享受到部分类型推导功能。
• 更小的生产包体积
  搭配 <script setup> 使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。
  一些杂七杂八
  加入语法糖，import后通过lo.setup(__props, { expose }).count.value使用追加的变量。注意setup（）中必需要__props, { expose }两个参数
• (Script)可以用 export 普通导出，import导入时的混合写法 import XX，{YY} from 'rul' 。注意默认导入不加括号普通导入要加大括号(不建议使用普通导出)

• 逻辑 (Script)，模板 (template)间的关系：逻辑部是对模板的支撑，

  • 对外部 import​进来的文件不会主动运行，不会主动响应模板部，需要声明或调用才生效。如下代码通过export default暴露导入的文件中的模板代码，并用components:属性将代码响应到模板部

    export default {
      components: {
        lo
      }}

    注意：如果加入了setup语法糖，则不需要如上代码暴露和响应，导入即可直接使用

  • 对内部的变量方法等，也是通过export default 暴露才能供模板部使用，如 export default暴露 setup（）方法等。同样有setup语法糖简写样式。
  • 默认逻辑部只对本文件体的模板有效，如要引响父或子，需采用特殊的方法才行。