Vivien_CC的博客

在Web开发中，渲染（Rendering）是一个核心概念，指的是将应用程序的数据（data）与模板（template）结合，生成最终的HTML页面，这个页面随后会被浏览器解析并展示给用户。这个过程是动态Web应用的核心，因为它允许开发者根据不同的数据动态地生成页面内容，而不是每次更改都需要手动编写静态的HTML文件。 我们可以简单地把渲染理解为：渲染就是将页面数据和页面模版组装成html的过程

Vue2.x 项目架构对于 Weex（移动端跨平台方案）和 myvue（小程序上使用）等渲染到不同平台（跨平台渲染）不太友好，因为 Vue 2.x 的核心是为 Web 平台设计的，不同平台有不同的运行时环境和渲染机制，而 Vue 2.x 的核心库并没有直接支持这些差异。Vue3.X 推出了自定义渲染API（也称为运行时核心或），允许开发者编写与平台无关的 Vue 代码，并通过不同的渲染器将这些代码转换为特定平台可以理解的格式，解决了该问题。下面，我们先来看看Vue2和Vue3的入口文件写法有哪些不同。

优点：CSS和JavaScript天然隔离，避免了样式冲突和脚本污染，拥有对应的用于单独部署子应用组件的域名多个子应用可以并存，支持并行开发和独立部署代码的可读性变得非常清晰，组件资源内部高内聚，组件资源由自身加载控制原生浏览器支持，不依赖于特定的框架或库缺点：浏览器和框架的支持不够：浏览器实现不一致，存在向后不兼容的版本问题，需要额外的polyfills支持开发成本较高：需要重写现有的前端应用，在整个前端应用上把它们全部转换成Web Components。

微前端借鉴了微服务的架构理念，它既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活，有一个基座应用（主应用），来管理各个子应用的加载和卸载，所以微前端不是指具体的库，不是指具体的框架，不是指具体的工具，而是一种理想与架构模式，微前端的核心三大原则：独立运行、独立部署、独立开发。

React 的三大特性：数据驱动 -> 单向数据流在React中，一切皆数据。要想改变界面元素或更改DOM节点，只需修改数据即可。但不要轻易操作DOM节点。所有的数据都用state来管理，分为组件state和全局state。数据只能从State流向DOM，不能逆向更改。函数式编程(声明式编程) = 组件化 + JSX纯函数：函数的输出不受外部环境影响，同时也不影响外部环境。非纯函数：输入相同，输出不同的函数。函数的柯里化：将一个低阶函数转换为高阶函数的过程。

当需要调整用户的权限时，管理员只需修改用户的角色分配，而无需逐个修改用户的许可权，从而大大简化了权限管理过程。RBAC(Role-BasedAccess Control)，是基于角色的访问控制，是一种安全策略，它通过在用户和权限之间引入角色概念，来实现对资源的访问控制。许可权通常由角色来赋予，即角色具有一组许可权，用户通过继承角色的许可权来获得对目标和操作的访问权限。RBAC1解决了这个问题，创建完经理角色并配置好权限后，主管角色的权限继承经理角色的权限，并且支持针对性删减主管权限。

概述TypeScript可以看成是JavaScript的超集，主要提供了类型系统和对ES6的支持所有JavaScript脚本都可以当作TypeScript脚本(但是可能会报错)，此外它再增加了一些自己的语法。类型类型指一组具有相同特征的值。如果两个值具有某种共同的特征，就可以说它们属于同一种类型。一旦确定某个值的类型，就意味着这个值具有该类型的所有特征，可以进行该类型的所有运算。凡是适用该类型的地方，都可以使用这个值；凡是不适用该类型的地方，使用这个值都会报错。TypeScript 是在开发阶段报错。

通常,父组件通过props向下传递数据给子组件，而子组件则通过事件$emit向上发送消息给父组件.有时，我们可能希望子组件能直接修改某些由父组件传递下来的props，而不需要显式地触发一个事件来通知父组件更新这些值。场景：当前，有一个多处使用的弹窗，里面的左半部分是动态变化的，右半部分是统一的，我们需要动态配置左边，所以可以把左边区域的整块内容挖空，在使用到dialog的地方通过插槽去配置。父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时，会通过$emit事件告诉父组件。

ECMAScript 6 入门 - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStackECMAScript 6 入门目录其他 《ECMAScript 6入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新增的语法特性。https://www.bookstack.cn/read/es6-3rd/sidebar.md Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从

已经有很长很长时间一段没有更新帖子了，一眨眼2023 已经过半，因为太多事情要做了，今年只更新了几篇，这几天刚好有空，浅浅更新一篇叭！示例： cat a.txt | grep itheima，将cat a.txt的结果，作为grep命令的输入， 用来过滤itheima关键字。参数，关键字，必填，表示过滤的关键字，带有空格或其它特殊符号，建议使 用””将关键字包围起来。~，表示用户的HOME目录，比如cd ~，即可切回用户HOME目录。参数，文件路径，必填，表示要过滤内容的文件路径，可作为内容输入端口。

Vue CLI是Vue.js的官方命令行工具，它是一个基于Vue.js进行快速开发的完整系统。通过Vue CLI，开发者可以快速搭建和开发Vue.js项目，提供了一整套完整的项目脚手架，包括项目初始化、开发服务器、构建工具等。是一个交互式的项目脚手架，通过简单的命令行界面，开发者可以快速创建一个新的Vue.js项目，并且会自动配置好项目的基本结构和依赖，让开发者可以直接开始编写代码。

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack是一个模块打包器。在Webpack中会将前端的所有资源文件（js/json/css/img/less/...）都作为模块处理。它将根据模块的依赖关系进行分析，生成对应的资源实际上， webpack-cli 给我们提供了丰富的终端命令行指令，可以通过npx webpack --help 查看帮助信息。

假设你有一个 webpack.config.js 文件，其中定义了一些 webpack 配置选项，还有一些 shell 脚本参数，你想将它们整合到一个 options 对象中，然后将这个对象传递给下一个流程。

之后，Webpack会将所有编译完成的模块按照它们之间的依赖关系组合成一个单独的文件，这个文件就是我们所说的“bundle”，最后将bundle文件发布到网站上，完成打包处理。resolve.modules 的默认值是 ['node_modules']，含义是先去当前目录下的 ./node_modules 目录下去找想找的模块，如果没找到就去上一级目录 ../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推，这和 Node.js 的模块寻找机制很相似。

说说你对webpack的理解？解决了什么问题？说说webpack的构建流程?说说webpack中常见的Loader？解决了什么问题？说说webpack中常见的Plugin？解决了什么问题？说说Loader和Plugin的区别？编写Loader，Plugin的思路？说说webpack的热更新是如何做到的？原理是什么？说说webpack proxy工作原理？为什么能解决跨域?说说如何借助webpack来优化前端性能？如何提高webpack的构建速度？与webpack类似的工具还有哪些？区别？

可以从以下角度来进行优化：1、提升开发体验使用Source Map让开发或上线时代码报错能有更加准确的错误提示。2、提升 webpack 提升打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。使用OneOf让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快。使用Cache对 es

2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）2 年多开发, 100+位贡献者, 2600+次提交, 600+次 PR、30+个RFCVue3 支持 vue2 的大多数特性可以更好的支持 Typescripthook本质是一个函数，使用 Vue3 的组合 API 封装的可复用的功能函数。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。