Augualr、Vue、React、微信小程序的常用前端写法区别

在前端框架中，遍历、渲染以及条件显示/隐藏、样式绑定是非常常见的操作。不同框架提供了不同的语法和机制来实现这些操作。以下是 Vue.js、Angular、微信小程序、React 之间在这些方面的对比和区别。

（一）遍历与渲染
（二）条件显示与隐藏
（三）动态绑定样式
（四）双向数据绑定
（五）父子组件传值

（一）遍历与渲染

遍历是指在数据集合（如数组）上循环，并将其内容渲染到页面中。

• Vue.js： 使用 v-for 指令来遍历数据。<ul><liv-for="item in items":key="item.id">{{ item.name }}</li></ul>- :key 用于追踪每个元素的唯一标识，有助于优化渲染性能。
• Angular： 使用 *ngFor 指令来遍历数据。<ul><li*ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li></ul>- trackBy 类似于 Vue.js 中的 :key，用于优化性能。
• 微信小程序： 使用 wx:for 指令来遍历数据。<viewwx:for="{{items}}"wx:key="id">{{item.name}}</view>- wx:key 是微信小程序的标识符，与 Vue.js 和 Angular 的 key 类似。
• React： 使用 JavaScript 原生 map() 方法遍历数组，并通过 JSX 渲染。<ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))}</ul>- key 属性用于标识唯一元素，避免不必要的 DOM 操作。

（二）条件显示与隐藏

条件显示或隐藏元素基于某个条件是否满足。

• Vue.js： 使用 v-if 或 v-show 指令来控制元素的显示和隐藏。- v-if：真正的条件渲染，当条件为 false 时，DOM 元素不会被创建。- v-show：仅仅通过 display: none 隐藏，元素仍然存在于 DOM 中。<divv-if="isVisible">Visible Content</div><divv-show="isVisible">Visible Content</div>
• Angular： 使用 *ngIf 指令来控制元素的显示和隐藏，类似 Vue.js 的 v-if。也可以通过 [hidden] 进行隐藏，但元素依旧会保留在 DOM 中。<div*ngIf="isVisible">Visible Content</div><div[hidden]="!isVisible">Visible Content</div>
• 微信小程序： 使用 wx:if 和 hidden 属性来控制显示与隐藏。- wx:if：条件渲染，类似 Vue.js 的 v-if 和 Angular 的 *ngIf。- hidden：类似 Vue.js 的 v-show，通过设置 display: none 来隐藏元素。<viewwx:if="{{isVisible}}">Visible Content</view><viewhidden="{{!isVisible}}">Visible Content</view>
• React： 通过 JavaScript 的条件渲染来控制显示和隐藏，常用三元运算符或逻辑运算符。{isVisible ? <div>Visible Content</div> : null}也可以使用 && 来简化语法：{isVisible && <div>Visible Content</div>}

性能区别

• Vue.js 和 Angular 的指令如 v-if、v-show、*ngIf 等，在条件渲染时，它们会对组件的生命周期和 DOM 操作进行一定的优化。- v-if 和 *ngIf 只在条件为真时才创建和销毁 DOM 元素，节省内存和计算资源。- v-show 和 [hidden] 不会移除 DOM 元素，只是通过 CSS 控制显示与隐藏。
• React：基于 JavaScript 的条件渲染，完全由 JavaScript 控制显示和隐藏逻辑。React 通过其虚拟 DOM 来优化渲染，避免了不必要的 DOM 操作。使用 key 来追踪渲染的子组件也是优化的关键之一。
• 微信小程序：wx:if 和 hidden 的行为与 Vue.js 和 Angular 相似。wx:if 会在不满足条件时移除 DOM，hidden 则是通过 CSS 控制显示状态。

总结
操作Vue.jsAngular微信小程序React遍历

v-for

*ngFor

wx:for

map()

条件渲染

v-if

/

v-show

*ngIf

/

[hidden]

wx:if

/

hidden

三元运算符或

&&

性能虚拟 DOM，

key

优化脏检查与

key

优化组件化设计与优化虚拟 DOM，

key

优化

（三） 动态绑定样式

Vue.js

Vue.js 提供了

v-bind

用于动态绑定 HTML 属性和样式，或使用简写

:

。有两种常见的方式来动态绑定样式：对象语法和数组语法。

• 绑定样式：<!-- 对象语法 --><div:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><!-- 数组语法 --><div:style="[styleObject1, styleObject2]"></div>
• 绑定类名：<!-- 对象语法 --><div:class="{ active: isActive, 'text-danger': hasError }"></div><!-- 数组语法 --><div:class="[isActive ? 'active' : '', 'text-danger']"></div>

Angular

Angular 使用

[ngStyle]

和

[ngClass]

来动态绑定样式和类名。

• 绑定样式：<div[ngStyle]="{ 'color': activeColor, 'font-size.px': fontSize }"></div>
• 绑定类名：<div[ngClass]="{ 'active': isActive, 'text-danger': hasError }"></div>

微信小程序

微信小程序使用

style

和

class

来动态绑定样式，可以直接通过模板表达式控制。

• 绑定样式：<viewstyle="color:{{activeColor}}; font-size:{{fontSize}}px;"></view>
• 绑定类名：<viewclass="{{isActive ? 'active' : ''}} {{hasError ? 'text-danger' : ''}}"></view>

React

React 通过 JSX 直接使用 JavaScript 对象来动态绑定样式和类名。

• 绑定样式：<div style={{ color: activeColor, fontSize: fontSize + 'px' }}></div>
• 绑定类名：<div className={`${isActive ? 'active' : ''} ${hasError ? 'text-danger' : ''}`}></div>

总结：

框架动态样式绑定动态类名绑定Vue.js

:style="{...}"

:class="{...}"

Angular

[ngStyle]="{...}"

[ngClass]="{...}"

小程序

style="..."

模板表达式

class="..."

模板表达式React

style={{...}}

className={

…

}

双向数据绑定在 Vue.js、Angular、微信小程序 和 React 中的实现方式存在显著差异。Vue 和 Angular 提供了内置的双向数据绑定机制，而 React 和微信小程序更侧重于单向数据流，通过手动处理来实现类似双向绑定的效果。

（四）（单向/双向）数据绑定

Vue.js 双向数据绑定

Vue 使用

v-model

来实现双向数据绑定，

v-model

其实是

:value

和

@input

事件的语法糖，自动将用户的输入更新到模型中，并将模型中的变化反映在视图上。

• 基本用法：<inputv-model="message"/><p>{{ message }}</p>在这个例子中，message 在视图和数据模型中始终保持同步。
• 自定义组件中的双向绑定： 在自定义组件中，双向绑定需要手动实现，使用 v-model 默认绑定 value 属性和 input 事件。<template> <input :value="value" @input="$emit('input', $event.target.value)" /></template><script>export default { props: ['value']}</script>使用时：<my-inputv-model="message"/>

Angular 双向数据绑定

Angular 使用

[(ngModel)]

实现双向数据绑定，这是

[value]

和

(input)

的语法糖（即绑定属性和绑定事件）。

• 基本用法：<input[(ngModel)]="message"/><p>{{ message }}</p>``````message 在视图和数据模型中也是实时同步的。
• 在自定义组件中的双向绑定： 在 Angular 中，如果需要在自定义组件中实现双向绑定，通常使用 @Input() 和 @Output() 装饰器配合。// 子组件@Input() value:string;@Output() valueChange =newEventEmitter<string>();updateValue(newValue:string){this.valueChange.emit(newValue);}使用时：<my-input[(ngModel)]="message"></my-input>这背后也是通过 value 和 valueChange 事件来实现双向数据绑定。

微信小程序 数据绑定

微信小程序本身没有提供内置的双向数据绑定机制，它是单向数据绑定模型（类似于 React），通过手动监听用户输入事件，更新数据模型，然后将新的数据反映在视图中。

• 基本用法：<input value="{{message}}" bindinput="handleInput" /><text>{{message}}</text>``````Page({ data:{ message:''},handleInput(e){this.setData({ message: e.detail.value });}});在这个例子中，handleInput 处理输入事件，将用户输入的值更新到 message，然后视图会自动反映模型的变化。
• **自定义组件中的"双向绑定"**： 自定义组件可以通过 properties 接收父组件的数据，并通过 triggerEvent 传递更改的值。<input value="{{value}}" bindinput="onInputChange" />Component({ properties: { value: String }, methods: { onInputChange(e) { this.triggerEvent('input', e.detail.value); } }});

React 单向数据流（手动实现双向绑定）

React 不支持双向数据绑定，React 的数据流是单向的，通常通过组件的状态（

state

）来更新视图。为了实现双向数据绑定的效果，需要手动处理输入事件，并通过状态更新 UI。

• 基本用法：function MyComponent() { const [message, setMessage] = useState(''); return ( <> <input value={message} onChange={(e) => setMessage(e.target.value)} /> <p>{message}</p> </> );}在 React 中，value 属性将输入的值与状态 message 绑定，onChange 事件用于监听输入并更新状态。这是手动实现的类似双向数据绑定的机制。
• **自定义组件中的"双向绑定"**： 在自定义组件中，通过 props 传递值和回调函数来处理双向数据流。function MyInput({ value, onChange }) { return <input value={value} onChange={onChange} />;}function ParentComponent() { const [message, setMessage] = useState(''); return ( <> <MyInput value={message} onChange={(e) => setMessage(e.target.value)} /> <p>{message}</p> </> );}父组件通过 props 向子组件传递状态值和更新函数，达到双向数据绑定的效果。

总结对比

框架双向数据绑定机制使用方式自定义组件中的实现Vue.js原生支持

v-model

v-model="value"

使用

value

和

input

事件Angular原生支持

[(ngModel)]

[(ngModel)]="value"

使用

@Input()

和

@Output()

微信小程序不支持，手动实现

value="{{value}}" bindinput="handleInput"

properties

+

triggerEvent

React不支持，手动实现

value={value} onChange={handleChange}

props

• 回调函数

  主要差异点：

1. Vue.js 和 Angular 原生支持双向数据绑定，且提供了简洁的语法糖（v-model 和 [(ngModel)]），易于使用。
2. 微信小程序 和 React 都是单向数据流，需要手动实现类似双向绑定的功能，通过事件处理程序更新模型，再通过状态或 setData 更新视图。
3. 自定义组件中的双向绑定：Vue 和 Angular 通过 props 和事件来处理，React 和小程序则依赖回调函数和手动处理。

（五） 组件传值

Vue.js

• 父组件传值给子组件： Vue 使用 props 来从父组件传递数据到子组件。<!-- 父组件 --><child-component :message="parentMessage"></child-component><!-- 子组件 --><template> <div>{{ message }}</div></template><script>export default { props: ['message']}</script>
• 子组件传值给父组件： 子组件通过 $emit 事件将数据传递回父组件。<!-- 子组件 --><button @click="$emit('update', newMessage)">Send</button><!-- 父组件 --><child-component @update="handleUpdate"></child-component>

Angular

• 父组件传值给子组件： Angular 使用 @Input() 装饰器从父组件向子组件传递数据。<!-- 父组件 --><app-child[message]="parentMessage"></app-child><!-- 子组件 -->export class ChildComponent { @Input() message: string;}
• 子组件传值给父组件： 子组件通过 @Output() 装饰器和 EventEmitter 将数据传递给父组件。<!-- 子组件 -->export class ChildComponent { @Output() update = new EventEmitter<string>(); sendUpdate() { this.update.emit(newMessage); }}<!-- 父组件 --><app-child(update)="handleUpdate($event)"></app-child>

微信小程序

• 父组件传值给子组件： 使用 properties 来定义子组件接收的数据。<!-- 父组件 --><child-component message="{{parentMessage}}"></child-component><!-- 子组件 -->Component({ properties: { message: String }})
• 子组件传值给父组件： 使用 triggerEvent 触发事件，并通过 data 将数据传递给父组件。<!-- 子组件 --><button bindtap="sendUpdate">Send</button>Component({ methods: { sendUpdate() { this.triggerEvent('update', { newMessage }); } }})``````<!-- 父组件 --><child-component bind:update="handleUpdate"></child-component>

React

• 父组件传值给子组件： React 使用 props 从父组件传递数据给子组件。// 父组件<ChildComponent message={parentMessage} />// 子组件const ChildComponent = ({ message }) => { return <div>{message}</div>;}
• 子组件传值给父组件： 子组件通过回调函数将数据传递给父组件。// 父组件const handleUpdate = (newMessage) => { setParentMessage(newMessage);};<ChildComponent onUpdate={handleUpdate} />// 子组件const ChildComponent = ({ onUpdate }) => { return <button onClick={() => onUpdate(newMessage)}>Send</button>;};

总结对比：

操作Vue.jsAngular微信小程序React父传子

props

@Input()

properties

props

子传父

$emit

事件

@Output()

+

EventEmitter

triggerEvent

• 自定义事件回调函数 (

  props.onUpdate
  

  )

主要差异点

• Vue.js 和 Angular 都支持响应式数据和双向绑定（Vue 使用 v-model，Angular 使用 [(ngModel)]），而 React 和 微信小程序 主要依赖单向数据流。
• React 通过状态（useState 或 this.setState）管理组件内部数据，而 Vue.js 和 Angular 有其内置的响应式数据机制。
• 微信小程序 的组件化机制类似于 Vue.js 和 Angular，但它缺少像 React 这样的虚拟 DOM，因此在性能和渲染机制上有所不同。
• React 通过 JSX 实现组件化，而 Vue.js 和 Angular 使用模板语法来创建组件视图。微信小程序也使用 WXML 模板来渲染组件。