[TOC] ---- ### Vue 文档 https://cn.vuejs.org/guide/components/attrs.html https://play.vuejs.org/ ---- ### Vue 框架思考 Vue 不是纯原生前端框架，因为它的完整功能需要通过脚手架工具进行编译转换后才能在浏览器中运行。 而且，这并不仅仅是单纯的 ES 语法转换，还包含了 Vue 独有的特性和语法糖及语法规则的转换。这些特性和语法糖很多都是 Vue 独有的，因此我们不能将 Vue 单纯看作是一个 Web 框架，而应该将 Vue 理解为一门前端编程语言，这样才更为合理。 如果说原生的前端编程是标准的 Web 前端开发，那么 Vue 算是前端开发 的一种方言了。 前端的演进是由 Node.js 推动的，虽然 Node.js 没有直接参与到前端界面的开发中，但却以另一种方式推动了前端进入到一个全新的时代，这可以说是 Node.js 最初被发明时最出人意料的结果之一。 ---- ### 开始前准备 **安装 vs code：** 建议下载 [System Installer](https://code.visualstudio.com/Download) 版本的安装包，这样可以自动更新。 **配置 npm 镜像源：** ```shell $ npm config set registry https://registry.npmmirror.com ``` ---- ### 创建一个 Vue 应用 ```shell $ npm create vue@latest ``` ```shell $ cd project-name $ npm install $ npm run dev ``` ~~~ vbase... 可快速初始化模板 ~~~ ---- ### 选项式 API 与 组合式 API 选项式 API（配置式 API）与组合式 API最大的理念区别在于： 前者关注形式与结构的统一，导致形式上统一但实际上逻辑上较为松散。而后者注重聚合局部逻辑，看似可能会牺牲结构上的统一，但实际上更具高内聚性和低耦合性，提高了可维护性。 ---- ### ref、reavtive `ref()` 用于单个值（`Number`、`String`、`Boolean`、`Undefined`、`Null`），`reavtive()` 用于引用类型的值，Object 对象、Array 数组、Function 函数。 ---- ### 组件 **porps** 用于父组件向子组件传递数据，组件需要显式声明它所接受的 props，没有声明的 props 会成为 透传的 attribute。 **slot** `<slot>` 元素是子元素提供的插槽出口 (slot outlet)，父元素提供的插槽内容 (slot content) 将在这里被渲染。 **深层组件继承** https://cn.vuejs.org/guide/components/attrs.html#nested-component-inheritance attribute 透传 仅限于 **根节点上渲染另一个组件** 的情况： ```vue <!-- <MyButton/> 的模板，只是渲染另一个组件 --> <BaseButton /> ``` 如果不是在根节点上渲染另一个组件，则没有透传继承的效果了，不然也就没有 “prop 逐级透传” 问题了，也就不需要 依赖注入 了。 ```vue <p>MyButton</p> <!-- 非根节点渲染另一个组件 --> <BaseButton /> ``` **多个根节点的组件没有自动 attribute 透传行为。** ~~~ 组件可以声明式创建，如 通过标签引入单文件组件，也可以动态的 命令式创建渲染，如 `element-plus/message` 的使用方式。 ~~~ ---- ### 组合式函数 https://cn.vuejs.org/guide/reusability/composables.html#further-reading 推荐在纯逻辑复用时使用组合式函数，在需要同时复用逻辑和视图布局时使用无渲染组件。 **setup** https://cn.vuejs.org/api/sfc-script-setup.html 与普通的`<script>`只在组件被首次引入的时候执行一次不同，`<script setup>`中的代码会在**每次组件实例被创建的时候执行**。 ---- ### 自定义组件 https://cn.vuejs.org/guide/reusability/custom-directives.html 组件是实现局部功能的代码集合。 在`<script setup>`中，任何以`v`开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，`vFocus`即可以在模板中以`v-focus`的形式使用。 ---- ### 事件、事件总线 1. 绑定：给组件绑定事件，设置回调函数，**回调函数逻辑定义在绑定操作的位置** 2. 触发：组件触发事件，执行回调函数，触发源为被绑定事件的组件 给一个元素绑定一个事件，元素上的事件只能由元素自己触发，而执行的回调逻辑取决于绑定事件时的定义。 事件总线的关键在于：a. 总线组件对所有组件可见，b. 事件回调逻辑定义在绑定操作的位置。因此，每个组件都可以给总线组件绑定事件并设置自定义的回调逻辑。这样，在任意时机触发总线上的任意事件，从而实现兄弟组件之间的通信。 > 通常，绑定事件的组件接收由触发事件的组件发送的数据。 ---- ### 消息订阅/发布 ... ---- ### Router https://router.vuejs.org/zh/ **嵌套路由** https://router.vuejs.org/zh/guide/essentials/nested-routes.html > 注意，以`/`开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。 嵌套路由的组件是嵌套结构的，但是 url 结构不一定得是嵌套结构的。 ---- ### Vuex Vuex 用于多个组件共享数据和逻辑（action 相当于公共的方法，geter 相当于公共的计算属性） 已弃用，请使用 Pinia 代替。 ---- ### Pinia https://pinia.vuejs.org/zh/ ---- ### Vite https://cn.vitejs.dev/guide/why.html ---- ### VueUse https://vueuse.org/ https://github.com/vueuse/vueuse.git ---- ### Element https://element-plus.org/zh-CN/component/rate.html ---- ### TypeScript https://wangdoc.com/typescript/intro https://www.typescriptlang.org/zh/docs/handbook/typescript-in-5-minutes.html ---- ### ES6 https://es6.ruanyifeng.com/#docs/intro ---- ### 其它 #### 模块导入是单例的 ```jsvascript // store.js import { reactive } from 'vue' // 全局：不论被导入多少次，这里都只会执行一次 alert(1) export const store = reactive({ count: 0, increment() { this.count++ } }) ``` ~~~ 导出 module.xxx = xxx; // module.hash(xxx.js) = xxx; ---- 导入 import { xxx } from xxx // import { xxx } from hash(xxx.js) ~~~ 前端模块导入将模块对象暴露在一个全局对象属性上，实际上是在首次引入时自执行一次，后续引用则直接从全局暴露的属性中获取值。 这种方式类似于后端 PHP 中的 `include_once 'Class.php'`。 ---- #### 对前端发展的感想 https://cn.vuejs.org/guide/reusability/composables.html 怪不得前端发展得这么复杂，因为抽象层级太深了，不知道这是好还是不好。 好处是带来强的灵活性，强大的功能，坏处是高度封装接口、规则、约定、语法屏蔽了实现细节，越高的抽象越变得难以理解。应用开发人员离基础越来越远，对于新入行的开发人员来说，这是否算是陷入了技术茧房。 ~~~ ChatGPT 前端发展的复杂性确实部分源于抽象层级的深度。这带来了一些好处，如强大的灵活性和功能，但同时也伴随一些不利之处。高度封装的接口、规则、约定和语法使得实现细节变得难以理解，尤其是随着抽象层级的提升。 优势在于，这种高度抽象可以提供更高的开发效率，使得前端开发更加灵活且功能强大。然而，不可否认的是，对于应用开发人员而言，离开了基础部分，有时确实可能感到越来越遥远。这也可能导致新入行的开发人员陷入技术茧房，难以理解和掌握系统的底层细节。 在前端发展的过程中，平衡抽象和理解的难度是一个持续的挑战。在选择抽象层级时，需要权衡其带来的便利和复杂性，以确保开发人员既能够高效地构建应用，又能够理解系统的底层运作。 ~~~ ---- #### 对新事物的一些感想 新时代的产品取代旧时代的产品没有任何理由，甚至不存在竞争，完全是从另一个维度的降维打击。 就如同 直播诞生多少年了，YY等难道没发现直播带货吗，难道没有先天优势吗，为什么直播带货在抖音上生长出来时，好像没有它们什么事呢？它们为何沉寂了一般，为什么本是自己的主场，如今却沦落到连杵着那看戏的资格都没有呢？ 视频拍客也多少年了，爱优腾为什么没跑出短视频和B站的生态呢，尾大不掉，路径依赖？ 新事物取待旧事物无关任何，每个时代有属于每个时代的产品。 打败微信的一定不是另一个微信，但此刻一定有一个产品在某个角落孕育着，等时机成熟时，破土而出，将彻底终结微信，从而完成推动历史循环这一环的任务。 新技术取代旧技术也是一样，ES module 模块化规范诞生之前各种模块化方案层出不穷，但是 ES 模块方案标准化后，模块化方案百家争鸣的时代一夜之间全部结束了。