小白初识Vue和React

71 阅读6分钟

前言

JavaScript 框架是为了简化和加速 Web 应用程序的开发过程,它们提供了预先编写好的代码、工具和最佳实践,帮助开发者更高效地构建功能丰富且性能良好的应用。

在企业业务需求中,Vue 以较低的学习曲线和内置的全栈功能(如路由、状态管理)适合快速开发中小型项目;而 React 拥有更庞大的生态系统和灵活的组件化架构,适合构建大型复杂应用,尤其是在需要高度定制化和性能优化的场景下。

Vue

想要使用Vue框架我们首先要在<script></script>中引入它,那么我们可以通过两种方式引入,一种是通过cdn引入,另一种则是通过.js文件

cdn是内容分发网络,拥有快速内容访问和发布的机制,大型 CDN 通常在全球范围内设有多个节点,可以根据用户的地理位置选择最近的服务器进行内容分发,从而降低延迟,提高加载速度。如果用户在此之前已经访问过相同的cdn网站,并且该版本的 Vue 已经被缓存到用户的浏览器中,那么加载速度会非常快,因为可以直接从浏览器缓存中读取。

通过本地.js文件引入,本地文件的加载速度取决于服务器的性能和用户的网络连接。如果服务器配置良好且网络状况优秀,加载速度可以很快。但是,如果服务器性能不佳或网络延迟较大,加载速度可能会受到影响。

通过这两种方法传入的都是静态资源,例如html,css,js和图片等,而动态资源如node,数据库将存放在服务器集群中。

挂载点

Vue和传统的DOM编程不同的是,开发者不需要通过一大堆api来直接操作DOM元素,你只需要选择一个挂载点,将DOM元素写入进去,就可以让Vue接管了。挂载点是将 Vue 实例与 DOM 元素关联的关键概念。它指定了 Vue 应用程序应该控制的 DOM 区域。通过挂载点,Vue 可以接管该区域内的 HTML 结构,并根据应用的状态动态更新内容,性能比DOM编程好很多。

挂载点是一个现有的 DOM 元素,Vue 实例会将其作为“入口”或“根节点”,并在此基础上构建和管理整个应用程序的视图。换句话说,挂载点是 Vue 应用程序与浏览器页面之间的桥梁,我们常见的做法是选择一个唯一的DOM元素作为挂载点,通常使用id选择器,如#app#roof

    <div id="root">
        <!-- Vue应用的工作领域 -->
         <h1>{{str}} 走向{{LLM}}智能前端!</h1>
         <!-- Count静态的,count动态的为数据 -->
         <p>Count:{{count}}</p>
         <button @click="increment">+1</button>
    </div>

#root中,我们只需要将静态的元素直接写入,而动态的数据则需要通过两个花括号包裹住{{}},这个是vue的数据占位符,使数据可以动态改变。

const {  
    createApp, // 创建Vue应用 
    ref // 响应式数据 
} = Vue;
  • { createApp, ref } 是一个对象解构表达式,表示从 Vue 对象中提取 createAppref 两个属性,并将它们分别赋值给同名的常量 createAppref

    • createApp:这是 Vue 3 中用于创建 Vue 应用实例的函数。
    • ref:这是 Vue 3 提供的一个函数,用于将普通数据转换为响应式数据。
createApp 函数
const app = createApp({ 
// 准备应用需要的数据
setup() { // 组件逻辑 

} }).mount('#root');

createApp 是 Vue 3 中的核心函数,用于创建一个新的 Vue 应用实例,我们将他挂载到#root挂载点上。

ref函数

ref 是 Vue 3 提供的一个函数,用于将普通数据转换为响应式数据,而被转换的对象则叫做响应式对象。它返回一个包含 value 属性的对象,value 是实际的数据,在修改value值改变的同时,界面热更新。

我们来简单创建一个vue应用实例:

// 创建Vue应用实例
createApp({
            // 准备应用需要的数据 
            setup(){
                // let count = 0; // 简单的变量 
                let count = ref(0); // 将数据包装为一个响应式数据 响应式对象
                console.log(Object.prototype.toString.call(count)) // [object Object]
                const str = ref("hello Vue"); // 响应式对象
                const increment = ()=>{
                    count.value++;
                }
                // 返回要暴露给模板的对象
                return{
                    LLM:'Llama3',
                    count,
                    str,
                    increment
                }
            }
        }).mount('#root') // 挂载点

动画2.gif

React

我们也通过一个相同的例子来初步了解react:

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>React Counter Example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <!-- 引入 Babel 编译 JSX 使用 BootCDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!-- 应用程序挂载点 -->
     <!-- 挂载点 -->
    <div id="root"></div>
    <script type="text/babel">
        const{
            useState
        } = React
        // 函数组件 如果返回的是html就被叫做函数组件 函数组件可以挂载到挂载点上
        function Counter(){
            const [count,setCount] = React.useState(0) // 响应式 数据状态 解构?
            // const count = 0;
            const increment = ()=>{
                setCount(count+1)
            }
            return(
                <div>
                    Count:{count}
                    <button onClick={increment}>+1</button>
                </div>
            )
        }
        ReactDOM.render(<Counter/>,document.getElementById('root'))
    </script>
</body>
</html>

首先也是引入了React的库,这三个分别是

  • React:这是 React 的核心库,提供了构建用户界面所需的所有功能。
  • ReactDOM:这是用于将 React 组件渲染到 DOM 中的库。
  • Babel:这是一个 JavaScript 编译器,允许你在浏览器中直接使用现代 JavaScript 语法(如 JSX)。

与Vue一样,id="root" 是 React 应用的挂载点。ReactDOM.render 方法会将 React 组件渲染到这个 DOM 元素中。你可以根据需要更改这个 ID,但要确保在 render 方法中使用相同的 ID。

解构赋值:const { useState } = React;我们从React对象中解构出useState钩子。useState 是 React 提供的一个钩子,用于在函数组件中添加状态。它的语法如下:

const [state, setState] = useState(initialState);
  • state:当前的状态值。
  • setState:用于更新状态的函数。
  • initialState:状态的初始值。

useState(0) 创建了一个名为 count 的状态变量,初始值为 0setCount 是用于更新 count 的函数,count被变成了一个响应式数据。

function Counter(){}是一个函数组件,它返回的是一个html,可以将其挂载到挂载点上。

ReactDOM.render(<Counter />, document.getElementById('root'));
  • ReactDOM.render 是 React 提供的一个方法,用于将 React 组件渲染到指定的 DOM 元素中。它接受两个参数:

    • 第一个参数是要渲染的 React 组件(在这个例子中是 <Counter />)。
    • 第二个参数是目标 DOM 元素(在这个例子中是 id="root" 的 div 元素)。

这行代码的作用是将 Counter 组件渲染到页面上的 #root 元素中。每当 Counter 组件的状态发生变化时,React 会自动重新渲染该组件,并更新页面上的内容。

return(
<div>
    Count:{count}
    <button onClick={increment}>+1</button>
</div>
)
  • JSX 是 React 中用于描述 UI 的一种语法糖。它看起来像 HTML,但实际上是一个 JavaScript 表达式。React 会将 JSX 转换为普通的 JavaScript 对象(称为 React 元素),然后将其渲染到 DOM 中。

    • {count} :这是 JSX 中的表达式插值语法,用于将 JavaScript 变量插入到 JSX 中。在这里,{count} 会显示当前的计数值。
    • <button onClick={increment}>+1</button> :这是一个按钮元素,onClick 事件绑定到 increment 函数。当用户点击按钮时,increment 函数会被调用,计数值会增加。

与vue不同的是,在React里面响应式数据是通过一对花括号包裹住{}

看看效果

动画.gif

小结

学习框架的第一天,如有不对,多多包涵。