@TOC

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

0.官方文档

vue2 vue3 uniapp文档 react的中文文档

2.插值表达式

2.1vue的插值表达式

Vue.js 中的插值表达式主要用于在模板中输出数据。它允许你将数据绑定到模板的占位符中，当数据变化时，视图也会自动更新以反映这些变化。Vue 提供了两种主要的插值方式：文本插值和 HTML 插值。

文本插值 文本插值是最常见的插值方式，使用双大括号 {{ }} 来声明。这种插值方式会将数据转换为纯文本（即不会解析HTML标签）。

<span>{{ message }}</span>

在这个例子中，message 是 Vue data的一个数据属性。Vue 会替换 {{ message }} 为 message 属性的当前值。如果 message 的值发生变化，元素的内容也会自动更新。

HTML 插值 HTML 插值使用 v-html 指令来实现，它允许你输出真正的 HTML，而不是将其转义为纯文本。但是，使用 v-html 需要格外小心，因为它很容易导致跨站脚本（XSS）攻击，特别是当插值的内容来自用户输入时。（所以说一般都是不使用这个的，在这里只是为了扩展）

<div v-html="Html"></div>

在这个例子中，Html是 Vue data的一个数据属性，它包含要插入的 HTML 字符串。Vue 会将 div 元素的 innerHTML 设置为 HTML 的值。比如说：Html: '

Hello, Vue!

这是一个使用v-html插入的HTML内容。

2.2react

React的插值表达式是一种非常有用的语法，它允许开发者将动态值注入到JSX模板中。这种语法通过在大括号 {} 中包裹JavaScript表达式来实现。在js里面通过return去返回渲染，对比vue只有一个大括号

return (
  <h1>
    {message }
  </h1>
);

在这个例子中，message 是 React 的一个数据属性。React 会替换 {message } 为 message 属性的当前值。如果 message 的值发生变化， {message }元素的内容也会自动更新。

2.列表循环

2.1vue的列表循环

在Vue中，列表循环是一个常见的操作，通常用于渲染数组中的数据到页面上。Vue通过指令v-for来实现列表的循环渲染。v-for可以基于源数据多次渲染元素或模板块。比如说循环渲染多个商品卡片，多个店铺，多行数据等等。

<div v-for="(item, index) in items" :key="index">  
      {{ index }} - {{ item.text }}  
    </div >

在这个例子中，v-for="(item, index) in items"表示对items数组进行遍历，每次迭代中，item是数组当前项的值，index是当前项的索引（位置）。:key="index"用于给每个循环的节点提供一个唯一的key值，以帮助Vue追踪每个节点的身份，从而重用和重新排序现有元素。

为什么需要key？

优化DOM更新：当Vue（或React）在更新列表时，它会尽可能高效地复用DOM元素，而不是销毁旧元素并重新创建新元素。通过为列表中的每个元素指定一个唯一的key，Vue可以跟踪每个节点的身份，从而准确地知道哪些元素是新的、哪些元素是旧的，以及哪些元素的位置发生了变化。这有助于Vue做出更精确的DOM更新决策，提高渲染性能。

避免状态问题：如果没有key，Vue可能无法准确地识别哪些元素是变化的，从而可能导致组件的状态与DOM状态不同步。这可能会引发一些难以追踪的bug。

提高渲染效率：当列表发生变化时（如添加、删除或排序），Vue可以利用key来快速识别哪些元素可以保留，哪些元素需要被重新创建或移动。这减少了不必要的DOM操作，提高了渲染效率。

为什么在实际开发项目中大多用id唯一值？

唯一性：使用元素的id作为key可以确保每个元素的key值是唯一的。这是非常重要的，因为Vue依赖于key的唯一性来跟踪元素身份。如果key不唯一，Vue可能无法正确地更新DOM。

稳定性：如果列表中的元素具有稳定的、可预测的id，那么即使列表的顺序发生变化，Vue也能准确地识别每个元素，并做出正确的DOM更新决策。这有助于保持组件状态的稳定性和可预测性。

易于管理：在大多数情况下，后端数据库中的每个记录都有一个唯一的id。如果前端列表中的元素与后端数据库中的记录相对应，那么使用这些id作为key可以简化数据管理和同步的过程。

2.2react的列表循环

在React中，列表循环是通过JSX中的{}语法和数组的.map()方法来实现的。.map()方法会遍历数组中的每个元素，并对每个元素执行一个回调函数，最后返回一个新的数组。但是，在JSX中，我们通常只关心.map()方法的副作用——即渲染每个元素到页面上，而不是它返回的新数组。

import React from 'react';  
  
function TodoList({ todos }) {  
  return (  
    <ul>  
      {todos.map((todo, index) => (  
        <li key={todo.id}>{todo.text}</li> // 注意这里的key属性  
      ))}  
    </ul>  
  );  
}  
  
// 假设这是你的todos数据  
const todos = [  
  { id: 1, text: 'Learn React' },  
  { id: 2, text: 'Build something awesome' },  
  { id: 3, text: 'Have fun' }  
];  
  
// 在你的App组件或其他地方使用TodoList组件  
function App() {  
  return (  
    <div>  
      <h1>My Todo List</h1>  
      <TodoList todos={todos} />  
    </div>  
  );  
}  
  
export default App;

在这个例子中，TodoList组件接收一个todos数组作为props，并使用.map()方法来遍历这个数组。对于数组中的每个todo对象，它都渲染一个

元素，并将todo.text作为内容。

3.条件渲染

3.1vue的条件渲染 v-if和v-show

Vue 中的条件渲染是指根据一定的条件来决定是否渲染某个元素或组件。Vue 提供了几种指令来帮助我们实现条件渲染，主要包括 v-if、v-else-if、v-else 和 v-show。

简洁的来说就是可以分为v-if和v-show，v-if 是“真正的”条件渲染，因为它会确保在条件为假时条件块内的元素不会被渲染到 DOM 中。

v-show 无论条件真假都会渲染元素，只是简单地切换元素的 CSS 属性display 是否为 none。因此，如果你需要频繁地切换元素的显示状态，使用 v-show 会有更好的性能，因为元素只会被渲染一次。但是，如果你的条件在初始渲染时不太可能经常改变，或者你需要根据条件避免渲染某些非常重的组件，那么使用 v-if 会更加合适。

<p v-if="isOk">是否可见</p>
<p v-show="isOk">是否可见</p>

在这个例子，isOk是是 Vue data的一个数据属性，根据它是否为true去判断切换元素是否可见。

3.2react的条件渲染

React 没有特殊的语法来编写条件语句，因此你使用的就是普通的 JavaScript 代码。所以你可以采用逻辑运算符，三目运算符，if判断赋值等操作

1.{condition && <p>条件为真时渲染我</p>}

2.{condition ? <p>条件为真时渲染我</p> : <p>条件为假时渲染我</p>}

3.let greeting;  
if (userLoggedIn) {  
  greeting = <p>欢迎回来，{userName}!</p>;  
} else {  
  greeting = <p>请先登录</p>;  
}  
  
return <div>{greeting}</div>;

vue和react的插值表达，列表循环，条件渲染