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

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

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

（一）遍历与渲染

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

• Vue.js：
  使用 v-for 指令来遍历数据。

  <ul>
    <li v-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 指令来遍历数据。

  <view wx: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 中。

  <div v-if="isVisible">Visible Content</div>
  <div v-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 来隐藏元素。

  <view wx:if="{{isVisible}}">Visible Content</view>
  <view hidden="{{!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.js	Angular	微信小程序	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 来动态绑定样式，可以直接通过模板表达式控制。

• 绑定样式：

  <view style="color: {{activeColor}}; font-size: {{fontSize}}px;"></view>
  

• 绑定类名：

  <view class="{{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 事件的语法糖，自动将用户的输入更新到模型中，并将模型中的变化反映在视图上。

• 基本用法：

  <input v-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-input v-model="message" />
  

Angular 双向数据绑定

Angular 使用 [(ngModel)] 实现双向数据绑定，这是 [value] 和 (input) 的语法糖（即绑定属性和绑定事件）。

• 基本用法：

  <input [(ngModel)]="message" />
  <p>{{ message }}</p>
  

  message 在视图和数据模型中也是实时同步的。

• 在自定义组件中的双向绑定：
  在 Angular 中，如果需要在自定义组件中实现双向绑定，通常使用 @Input() 和 @Output() 装饰器配合。

  // 子组件
  @Input() value: string;
  @Output() valueChange = new EventEmitter<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.js	Angular	微信小程序	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 模板来渲染组件。