Vue 和 React 框架两手抓：开启前端开发的冒险之旅

在当下的互联网就业市场中，Vue 和 React 的相关职位需求如日中天。无论是新兴的互联网创业公司，还是传统行业的数字化转型企业，都在竞相寻找掌握这两项技术的前端开发人才。这就意味着，当你熟练掌握 Vue 和 React 后，你将拥有一把开启众多优质工作机会大门的金钥匙。你不再是在就业市场中苦苦寻觅机会的求职者，而是备受企业青睐的香饽饽，能够轻松踏入理想的职场舞台，开启辉煌的职业生涯。

Vue 和 React 框架介绍及学习重要性

一、Vue 创建应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Counter</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="root">
        <p>Count: {{count}}</p>
        <button @click="increase">+1</button>
    </div>
    <script type="module">

        const {
            createApp,
            ref
        } = Vue

        createApp({

            setup() {
                const count = ref(0);
                console.log(Object.prototype.toString.call(count))
                const increase = () => {
                    count.value++;

                }
                return {
                    count,
                    increase
                }
            }
        }).mount('#root')
    </script>
</body>
</html>

引入 Vue 库：
- 通过 <script src="./vue.js"></script> 引入 Vue 库，可以从本地文件路径或者通过 CDN（内容分发网络）获取 Vue 库文件。
创建 Vue 应用实例：
- 使用 const { createApp, ref } = Vue; 从 Vue 对象中解构出 createApp 和 ref 函数。
- createApp 函数用于创建一个新的 Vue 应用实例，接受一个包含配置选项的对象作为参数。
- 在配置对象中，主要使用 setup 方法来准备应用所需的数据和方法。
在 setup 方法中定义数据和方法：
- 可以使用 ref 创建响应式数据，例如 const count = ref(0);。响应式数据意味着当它们的值发生变化时，Vue 会自动更新相关的 DOM 元素。
- 定义方法，如 const increase = () => { count.value++; }。这些方法可以在模板中通过事件绑定等方式调用。
返回数据和方法供模板使用：
- setup 方法返回一个包含响应式数据和方法的对象，这些数据和方法可以在 Vue 模板中使用。例如 return { count, increase }。
挂载应用：
- 使用 .mount('#root') 将 Vue 应用挂载到页面上指定的元素（这里是 id 为 root 的元素）。这样，Vue 应用就会在这个元素内部进行渲染和管理。

二、React 创建应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Counter</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const{
            useState
        } = React; 
        function Counter(){
            const [count,setCount] = useState(0)
            const increase = () => {
                setCount(count+1)
            }
            return (
                <div>
                    Count: {count}
                    <button onClick={increase}>+1</button>
                </div>
            )
        }
        ReactDOM.render(<Counter />, document.getElementById('root'));
    </script>
</body>
</html>

引入 React 库和 Babel：
- 通过 CDN 引入 React 和 React DOM 库文件：<script src="https://unpkg.com/react@17/umd/react.development.js"></script> 和 <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>。
- 引入 Babel，用于在浏览器中编译 JSX 和 ES6+ 语法：<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>。
定义组件函数：
- 创建一个函数组件，例如 function Counter() {... }。在函数组件中，使用 useState 钩子来管理状态。
- 通过 const [count, setCount] = useState(0) 创建一个名为 count 的状态变量和一个用于更新该状态变量的函数 setCount。
在组件中定义 UI 和交互：
- 返回一个 JSX 结构，描述组件的 UI。例如 <div>Count: {count}<button onClick={increase}>+1</button></div>。
- 在按钮的 onClick 属性中绑定 increase 方法，用于更新状态。在 increase 方法中，通过 setCount(count + 1) 来更新 count 状态变量的值。
渲染组件：
- 使用 ReactDOM.render(<Counter />, document.getElementById('root')); 将组件渲染到页面上指定的元素（这里是 id 为 root 的元素）。

通过上述代码，我们实现了一个最基本的加数器示例

- 态的变化通过重新渲染组件来更新 UI，开发者需要明确地在状态变化时调用 setState 或 useState 等方法来触发重新渲染。
模板语法：
- Vue：支持模板语法，使用类似 HTML 的语法结合指令（如 v-if、v-for 等）来描述 UI。这使得开发者可以更直观地编写页面结构，尤其对于熟悉 HTML 的开发者来说更容易上手。
- React：使用 JSX（JavaScript XML），它是一种 JavaScript 的扩展语法，允许在 JavaScript 代码中直接编写类似 XML 的结构来描述 UI。虽然需要一定的学习成本，但它提供了更大的灵活性，可以更好地与 JavaScript 代码集成。
状态管理方式：
- Vue：内置了状态管理方案 Vuex，它提供了集中式存储、状态变化的可预测性和严格的流程管理等功能。对于小型项目，Vue 的组件自身的状态管理也比较方便，可以直接在组件内使用 data、computed 和 methods 等选项来管理状态。
- React：通常使用第三方库如 Redux 或 MobX 进行状态管理。React 本身更侧重于组件的可组合性和单向数据流，状态管理相对更加灵活，但也需要更多的配置和代码来实现复杂的状态管理逻辑。

CDN简短介绍

1、CDN 简介

CDN（Content Delivery Network）即内容分发网络，是一个分布式服务器网络系统。它把源服务器（如网站服务器）的内容缓存到离用户地理位置更近的节点服务器上。当用户请求访问内容时，CDN 会根据用户位置等因素，从最近的节点服务器提供数据，从而加快内容的传输速度。

2、传输静态数据方法

对于静态数据（如图片、样式表、脚本文件等），CDN 通常采用缓存机制。 CDN 网络中的各个边缘节点从源服务器pull静态内容。当用户请求静态内容时，CDN 的调度系统会引导请求到已缓存该内容的边缘节点。如果该节点没有缓存，就会从源服务器获取内容并缓存一份，然后发送给用户。后续再有相同内容的请求，就直接从边缘节点返回数据。

3、传输动态数据方法

CDN 通常会提供一系列接口来实现与外部系统的交互，方便进行动态数据的传输以及对 CDN 服务的管理、配置等操作。这些接口一般基于常见的网络协议，比如 HTTP/HTTPS，以方便开发者进行调用。常见的接口类型包括数据获取接口、缓存控制接口、配置更新接口等，它们协同工作来保障动态数据能高效且准确地在 CDN 网络中传输并呈现给用户。
动态数据（如实时更新的用户信息、动态网页内容等）传输相对复杂。CDN 主要是作为一个加速通道，部分 CDN 提供边缘计算功能。
有边缘计算功能的情况：一些高级的 CDN 系统可以在边缘节点进行部分动态内容的生成或处理。例如，根据用户的地理位置和请求信息，在边缘节点动态生成一些个性化的内容，如本地化的广告或推荐信息，然后直接返回给用户，这样能更快地响应用户请求。