前言
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
对象中提取createApp
和ref
两个属性,并将它们分别赋值给同名的常量createApp
和ref
。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') // 挂载点
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
的状态变量,初始值为 0
。setCount
是用于更新 count
的函数,count
被变成了一个响应式数据。
function Counter(){}
是一个函数组件,它返回的是一个html,可以将其挂载到挂载点上。
ReactDOM.render(<Counter />, document.getElementById('root'));
-
ReactDOM.render
是 React 提供的一个方法,用于将 React 组件渲染到指定的 DOM 元素中。它接受两个参数:- 第一个参数是要渲染的 React 组件(在这个例子中是
<Counter />
)。 - 第二个参数是目标 DOM 元素(在这个例子中是
id="root"
的div
元素)。
- 第一个参数是要渲染的 React 组件(在这个例子中是
这行代码的作用是将 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里面响应式数据是通过一对花括号包裹住{}
。
看看效果
小结
学习框架的第一天,如有不对,多多包涵。