vue 和react

爱喝羊奶
122 阅读7分钟

Vue 和 React 是两种流行的前端开发库/框架，主要用于构建用户界面，特别是单页面应用程序（SPA）。 先介绍vue- 特性:

-   简洁的 API 和语法。
-   单文件组件 (SFC)，将 HTML、CSS 和 JavaScript 集成在一个 `.vue` 文件中。（组件是现代前端开发的最小单元）
-   官方支持的状态管理库 Vuex 和路由管理库 Vue Router。
-   支持双向数据绑定。
-   使用虚拟 DOM 提高渲染效率。
<!DOCTYPE html>
Vue3 Couter 有了vue这个强大的前端工具 我们就不用单独去写html css,js了而是直接通过挂载点将一个个app挂载到root上从而去来实现开发。 1.cdn对于vue3的作用 通过 CDN（内容分发网络，Content Delivery Network）引入 Vue 3 意味着你不是从本地文件系统加载 Vue 库，而是从一个分布在全球多个数据中心的服务器网络加载。CDN 的主要目的是加速用户对静态资源（如 HTML、CSS、JavaScript 文件和图片等）的访问，并提高网站或应用的性能和可靠性。
在这里说明说明一下 为什么用root 不用appendChild 因为appendChild是在父节点的末尾 在此期间有这三个问题需要注意重排和重绘： 1. 每次你使用 appendChild 将新元素添加到DOM中时，浏览器可能需要重新计算页面上所有元素的位置和几何属性（这称为“重排”），然后重新绘制受影响的部分（“重绘”）。如果这个操作发生在可见区域，并且频繁发生，那么它可能会引起明显的性能瓶颈。 2. 回流阻塞：当 appendChild 操作触发了重排，浏览器会暂时停止其他任务，直到更新完成。这意味着如果你在一个循环中连续地添加多个子元素，浏览器将会为每个新增加的元素执行重排和重绘，从而显著降低性能。 3. JavaScript线程阻塞：JavaScript是单线程的，因此在执行 appendChild 期间，任何涉及DOM的操作都会阻止其他JavaScript代码的执行，包括用户交互事件等，这可以导致应用响应迟钝。

{{str}}走向{{LLM}}智能前端！

Count: {{ count }}

+1

  1. 声明式编程：

    • Vue 的模板语法允许你以声明的方式描述UI的状态，这意味着你可以专注于“应该显示什么”，而不是“如何一步步操作DOM”。这种高层面的抽象让代码更加简洁、易读且易于维护。

  2. 组件化开发：

    • 响应式数据与 Vue 的组件系统紧密结合，每个组件都可以拥有自己的状态和逻辑，并且这些状态可以轻松地在父子组件之间传递。这促进了代码的复用性和模块化设计。

  3. 高效的依赖追踪：

    • Vue 内部实现了细粒度的依赖收集机制，当某个状态发生变化时，只有那些确实依赖于该状态的部分才会被重新计算或渲染，从而提高了性能。

  4. 简单的状态管理：

    • 对于小型到中型的应用程序，Vue 的响应式系统本身已经足够强大来处理应用的状态管理需求；而对于大型应用程序，则可以通过 Vuex 这样的状态管理模式进一步增强。

  5. 易于调试：

    • Vue Devtools 提供了对响应式系统的深入洞察，包括查看组件树、状态变化历史等，这大大方便了开发和调试过程。

  6. 更好的用户体验：

    • 因为视图总是能及时反映最新的数据状态，所以用户看到的内容是最新的，不会出现数据和视图不同步的问题，提供了流畅自然的交互体验。

  7. 简化异步操作：

    • 结合 async/await 和 Vue 的生命周期钩子，处理异步数据加载变得简单直接，同时确保了视图始终正确反映了最新的数据状态。 ref //响应式数据 } = Vue createApp({ //准备应用需要的数据 setup() { //let count = 0; 简单的变量 const count =ref (0) ; console.log(Object.prototype.toString.call(count)) const str = ref('hello vue')//响应式对象 const increment = () =>{ //console.log('-------') count.value++; } return { LLM: 'Llama3', count, str, increment } } }).mount('#root') //挂载点

下面介绍react react是由facebook发明的框架，这个框架有很鲜明的特点，它延续了js的哲学思想通过函数来实现封装，通过函数来对于响应式数据进行处理，这个架构之所以被大厂用来构建项目是因为它是对于js的极致运用，不像vue，react大量减少了对于api的运用从而是对于js这们语言的纯粹运用，保持了js的特性，将函数思想运用到极致，vue的css在组件内部而react的单独形成文件。单独形成文件的原因是

  1. 代码分离与组织：

    • 将CSS放在单独的文件中可以帮助保持组件文件的简洁性。这使得每个文件都有明确的职责：JSX文件处理逻辑和结构，而CSS文件则专注于样式。

  2. 缓存优化：

    • 单独的CSS文件可以被浏览器缓存。如果样式不经常变化，用户在访问不同页面或重新加载时不需要再次下载这些资源，从而加快了页面加载速度。

  3. 团队协作：

    • 对于大型项目，将样式从JavaScript中分离出来可以让设计师或前端开发者更容易地进行样式调整，而不必深入理解组件的逻辑实现。

  4. 全局样式的定义：

    • 一些样式（如重置样式、字体、通用布局等）可能需要应用于整个应用程序，而不是特定的组件。将这些样式放在单独的文件中可以使它们更易于管理和复用。

  5. 工具链的支持：

    • 许多构建工具和打包器（如Webpack）对CSS文件有很好的支持，包括压缩、合并以及自动为选择器添加前缀等功能，有助于提升性能和兼容性。

  6. 可维护性和可读性：

    • 当所有样式都集中在一个地方时，查找和修改样式变得更加容易。此外，对于习惯于传统Web开发的人来说，这种方式也更加直观和熟悉。

  7. 样式隔离（通过CSS Modules或类似技术） ：

    • 虽然这不是单独文件特有的优势，但当使用CSS Modules或其他类似的解决方案时，可以在不同的组件之间提供更好的样式隔离，防止样式冲突。

  8. SEO友好：

    • 对于服务端渲染的应用来说，外部CSS文件可以在HTML文档头部引用，确保关键样式尽早被浏览器解析，这对首屏渲染时间和搜索引擎优化有益。

如果你想成为高手那就用react吧！这将是你对于js这个唯一的前端语言的运用最好的框架，让你在前端事业上走的更远，不过在使用react框架时请注意以下几个问题 1 不能写class,要用className

如果你写的是这段代码那么系统可能会报错，这是因为class在js中是指类（关键字）但是我们是在jsx中写代码这就会让系统报错，我们要把这换成ClassName， 其他的还有以下这些 `onclick`应该写作`onClick`**`tabindex` -> `tabIndex`**等 2.- 组件类 - 封装组件 import + export default 功能的拆分 - 函数（构造）组件，return html 是必须的 - 组建可以复用 - 封装的是UI+响应式数据 - 只要写原生JS就可以了 最后，衷心感谢每一位读者的关注和支持。这篇文章从构思到完成，离不开许多人的帮助。特别要感谢[个人/团队名称]提供的指导和资源，以及社区成员们的积极参与和宝贵建议。希望未来我们还能继续一起探索更多有趣的话题
avatar
文章
阅读
粉丝