Vue学习

https://www.bilibili.com/video/BV1dS4y1y7vd?p=3

几个前端包常用到的CDN网站: https://unpkg.com/

Vue 3 Template Explorer: https://template-explorer.vuejs.org/

node版本管理工具:

• nvm

• n (仅mac才有)

–分割线–

切换到20, cd /usr/local/bin/ ,然后xxx

mv node777 node

export PATH=”/usr/local/bin:$PATH”

–分割线–

npm init vite@latest

npm install 如果不行,就

pnpm config set registry https://registry.npmjs.org/

pnpm install

https://github.com/pnpm/pnpm/issues/6434#issuecomment-2361380050

pnpm 是一个快速且节省磁盘空间的包管理器，比其他工具快两倍。它通过链接文件的方式在 node_modules 中高效存储，适用于单体仓库。pnpm 只允许包访问 package.json 中指定的依赖，并使用 pnpm-lock.yaml 文件确保安装的确定性。它支持 Windows、Linux 和 macOS，自 2016 年以来被多种规模的团队广泛使用，受到好评。使用 pnpm 可以显著减少磁盘空间消耗，加快安装速度。

install之后就会出现node_modules目录

package.json中

"scripts": {
  "dev": "vite",
  "build": "vue-tsc -b && vite build",
  "preview": "vite preview"
},

三个命令,分别是启动命令,打包命令,预览生产环境的命令

可以npm run dev

这是用vite启动

也可以用vue的脚手架:

npm init vue@latest —> 专门为vue定制,配置会多一些~

学习Vue3 第二章（配置环境）

Node.js 主要由 V8、Libuv 和第三方库组成：

• Libuv：跨平台的异步 IO 库，但它提供的功能不仅仅是 IO，还包括进程、线程、信号、定时器、进程间通信，线程池等。 https://github.com/libuv/libuv

• 第三方库：异步 DNS 解析（ cares ）、HTTP 解析器（旧版使用 http_parser，新版使用 llhttp）、HTTP2 解析器（ nghttp2 ）、 解压压缩库( zlib )、加密解密库( openssl )等等。

• V8：实现 JS 解析、执行和支持自定义拓展，得益于 V8 支持自定义拓展，才有了 Node.js。

–分割线–

libuv 概述

libuv 是一个多平台支持库，专注于异步 I/O，主要用于 Node.js，但也被 Luvit、Julia 和 uvloop 等其他项目使用。

主要特点

• 完整的事件循环，支持 epoll、kqueue、IOCP 和事件端口
• 异步 TCP 和 UDP 套接字
• 异步 DNS 解析
• 文件和文件系统的异步操作
• 文件系统事件
• 子进程和线程池支持
• 信号处理和高分辨率时钟

版本与许可

• 从版本 1.0.0 开始，libuv 遵循语义版本控制（SemVer）
• 采用 MIT 许可证，文档则采用 CC BY 4.0 许可证

文档与社区支持

• 文档使用 Sphinx 框架，支持多种格式构建
• 在线文档可供浏览，社区提供邮件列表支持

下载与构建

• 可以从 GitHub 或下载网站获取 libuv
• UNIX 系统可以使用 autotools 或 CMake 构建，Windows 仅支持 CMake

测试与调试

• 提供时间敏感的测试，可以放宽超时设置
• 支持使用 gdb 和 valgrind 进行调试

libuv 提供强大的异步处理能力，适用于需要高效 I/O 的应用程序。

–分割线–

https://xiaoman.blog.csdn.net/category_11618172_2.html

第三章（Vite目录 & Vue单文件组件 & npm run dev 详解）

https://xiaoman.blog.csdn.net/article/details/122771007

webpack使用js作为入口文件,但是 vite使用html作为入口文件,是用type module引入的

vite基于esbuild去做编译,基于rollup做打包

vscode插件:

• Vue language Feature

第四章（模板语法 & vue指令）

https://xiaoman.blog.csdn.net/article/details/122773486

vue中v-show和v-if有何区别？哪个性能更高？

在 Vue.js 中，v-show 和 v-if 都是用于控制元素的显隐状态的指令，但它们的工作机制和性能表现是不同的。下面是它们的区别：

1. 工作机制

• v-if：

  • v-if 通过动态地添加或移除 DOM 元素来控制元素的显示与隐藏。
  • 当条件为 false 时，v-if 会完全移除该元素及其子元素的 DOM，甚至不渲染它们。
  • 当条件为 true 时，v-if 会重新创建该元素和它的子树，并将其插入到 DOM 中。

• v-show：

  • v-show 不会移除元素，而是通过修改元素的 CSS display 属性来控制显示与隐藏。
  • 当条件为 false 时，v-show 会将元素的 display 属性设置为 none，从而隐藏它，但该元素仍然存在于 DOM 中。
  • 当条件为 true 时，v-show 会将 display 属性恢复为默认值，从而显示该元素。

2. 性能对比

• v-if 的性能特点：

  • 如果在初始渲染时，条件为 false，v-if 会完全跳过该元素的渲染，节省了不必要的渲染开销。
  • 但是，频繁切换时，v-if 的性能较差，因为每次条件变化时，Vue 都需要销毁和重新创建 DOM 元素及其子元素。
  • 适用于条件不经常变化的场景。

• v-show 的性能特点：

  • v-show 在初始渲染时，无论条件是 true 还是 false，都会将元素渲染到 DOM 中，只是通过 CSS 控制其显示或隐藏。
  • 由于只是修改 display 属性，因此在频繁切换时，v-show 的性能要比 v-if 高很多。
  • 适用于频繁切换显示和隐藏的场景。

3. 使用场景

• v-if：

  • 适用于不需要一开始就渲染元素，或者条件在大多数情况下为 false 时。
  • 当条件变化较少时，v-if 是一个更好的选择，因为它可以避免不必要的 DOM 操作和渲染。

• v-show：

  • 适用于需要频繁显示或隐藏某个元素的场景。
  • 由于元素始终存在于 DOM 中，v-show 可以快速切换元素的显示状态。

总结

• v-if：适合不经常切换的场景，初次渲染开销较小，但频繁切换时性能较差。
• v-show：适合频繁切换的场景，初次渲染开销较大，因为无论条件如何都会渲染元素，但切换时性能更佳。

性能结论

• 初次渲染性能：v-if 更高，因为它在条件为 false 时不会渲染元素。
• 频繁切换性能：v-show 更高，因为它只需要改变 display 属性，而不需要销毁或重新创建 DOM 节点。

所以，选择 v-if 还是 v-show 取决于你的具体需求：

• 如果需要频繁切换元素的显示状态，使用 v-show。
• 如果元素的状态变化不频繁，或者初始化时不需要渲染它，使用 v-if。

@是v-on的简写
:是v-bind的简写

第五章（Vue核心虚拟Dom和 diff 算法）

https://xiaoman.blog.csdn.net/article/details/122778560

虚拟DOM就是通过JS来生成一个AST节点树


let div = document.createElement('div')
let str = ''
for (const key in div) {
  str += key + ' '
}
console.log(str)

在浏览器控制台中执行,能查看到所有属性..非常多~

操作dom非常麻烦,浪费性能.

所以有了虚拟dom

---

20250107

RouterLink和js跳转有何区别？

RouterLink 和 JavaScript 编程式导航的主要区别如下：

1. 语法和使用方式

• RouterLink: 声明式导航，通过模板中的组件标签实现

<router-link to="/about">About</router-link>

• JS跳转: 编程式导航，通过代码调用方法实现

this.$router.push('/about')

2. SEO优化

• RouterLink: 会被渲染为真实的 <a> 标签，对SEO更友好
• JS跳转: 纯代码跳转，搜索引擎无法识别链接关系

3. 用户体验

• RouterLink: 自动处理了active状态，支持右键新窗口打开
• JS跳转: 需要手动处理active状态，不支持右键新窗口打开

4. 适用场景

• RouterLink: 适合导航菜单、固定链接等场景
• JS跳转: 适合表单提交后跳转、条件判断后跳转等动态场景

5. 功能差异

• RouterLink: 会自动阻止默认点击行为并处理路由跳转
• JS跳转: 可以在跳转前执行更多的逻辑判断和操作

6. 参数传递

• RouterLink: 参数需要通过属性绑定传递

<router-link :to="{ path: '/user', query: { id: 123 }}">User</router-link>

• JS跳转: 可以更灵活地构造和传递参数

this.$router.push({
  path: '/user',  
  query: { id: 123 }
})

通常建议：

• 简单的页面跳转使用 RouterLink
• 需要逻辑处理的跳转使用 JS 编程式导航

class命名局部采用bem 啥意思？

BEM（Block Element Modifier）是一种命名约定，用于帮助开发者创建可重用和可维护的 CSS 代码。它主要关注组件的结构和样式，使得 CSS 类名具有更好的可读性和可组织性。

BEM 的基本概念

1. Block（块）：

   • 代表一个独立的组件或部分。例如，一个导航条可以被称为 nav。
   • 示例类名：.nav

2. Element（元素）：

   • 表示属于块的一部分，不能单独存在。元素通过双下划线（__）与块连接。
   • 示例类名：.nav__item（表示导航条中的一个项）

3. Modifier（修饰符）：

   • 表示块或元素的不同状态或变体。修饰符通过双短横线（--）与块或元素连接。
   • 示例类名：.nav--active（表示激活状态的导航条），.nav__item--highlighted（表示高亮的导航项）

“局部采用 BEM”的意思

“局部采用 BEM”指的是在特定模块或组件中使用 BEM 命名规则，而不是在整个项目中强制执行。这可以带来以下好处：

1. 提高可读性：使用 BEM 命名规则可以使类名的含义更加明确，便于理解组件的结构。
2. 减少样式冲突：通过明确的命名，可以减少不同组件之间的 CSS 冲突。
3. 便于维护：当需要修改或扩展某个组件时，可以更容易地找到相关的样式。

示例

假设你有一个卡片组件，使用 BEM 命名规则，可以这样命名类：

<div class="card">
    <h2 class="card__title">Card Title</h2>
    <p class="card__description">Some description about the card.</p>
    <button class="card__button card__button--primary">Click Me</button>
</div>

在这个例子中：

• card 是块。
• card__title 和 card__description 是元素。
• card__button--primary 是带有修饰符的元素，表示主按钮。

总结

局部采用 BEM 意味着在特定组件中使用 BEM 命名规范，以提高代码的可读性和可维护性，同时避免全局样式冲突。这种方法可以有效地管理样式，尤其是在大型项目中。

文章目录

1. libuv 概述
   1. 主要特点
   2. 版本与许可
   3. 文档与社区支持
   4. 下载与构建
   5. 测试与调试

第三章（Vite目录 & Vue单文件组件 & npm run dev 详解）

第四章（模板语法 & vue指令）

1. 1. 工作机制
2. 2. 性能对比
3. 3. 使用场景
4. 总结
5. 性能结论

第五章（Vue核心虚拟Dom和 diff 算法）

RouterLink和js跳转有何区别？

class命名局部采用bem 啥意思？

1. BEM 的基本概念
2. “局部采用 BEM”的意思
3. 示例
4. 总结

原文链接: https://dashen.tech/2018/09/19/Vue学习/

版权声明: 转载请注明出处.