王玉军博客

Appearance

前端框架对比与选型 ​

简介 ​

前端框架是现代 Web 开发中不可或缺的工具。本文将介绍主流前端框架的特点、使用场景和最佳实践。

框架对比 ​

1. 核心特性 ​

特性VueReactAngular
模板语法HTML + JSJSXHTML + TypeScript
状态管理Vuex/PiniaRedux/MobXNgRx
路由Vue RouterReact RouterAngular Router
构建工具Vite/WebpackCreate React AppAngular CLI

2. 使用场景 ​

javascript
// Vue - 适合快速开发
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

// React - 适合大型应用
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Angular - 适合企业级应用
@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <button (click)="increment()">Count: {{count}}</button>
  `
})
export class AppComponent {
  title = 'My App';
  count = 0;
  increment() {
    this.count++;
  }
}

框架选择 ​

1. 项目规模 ​

javascript
// 小型项目 - Vue
const app = new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    addItem(item) {
      this.items.push(item);
    }
  }
});

// 中型项目 - React
const App = () => {
  const [items, setItems] = useState([]);
  const addItem = (item) => {
    setItems([...items, item]);
  };
  return (
    <div>
      <ItemList items={items} />
      <AddItemForm onAdd={addItem} />
    </div>
  );
};

// 大型项目 - Angular
@Injectable({
  providedIn: 'root'
})
export class ItemService {
  private items = new BehaviorSubject<Item[]>([]);
  items$ = this.items.asObservable();
  
  addItem(item: Item) {
    const current = this.items.value;
    this.items.next([...current, item]);
  }
}

2. 团队因素 ​

javascript
// 技术栈一致性
// package.json
{
  "dependencies": {
    "vue": "^2.6.0",
    "vuex": "^3.6.0",
    "vue-router": "^3.5.0"
  }
}

// 学习曲线
// 简单示例 - Vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

// 复杂示例 - Angular
@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>{{ title }}</h1>
      <button (click)="increment()">Count: {{ count }}</button>
    </div>
  `
})
export class AppComponent implements OnInit {
  @Input() title: string;
  count = 0;
  
  constructor(private service: DataService) {}
  
  ngOnInit() {
    this.service.getData().subscribe(data => {
      // 处理数据
    });
  }
  
  increment() {
    this.count++;
  }
}

性能优化 ​

1. 渲染优化 ​

javascript
// Vue - 虚拟列表
<template>
  <virtual-scroller
    :items="items"
    :item-height="50"
  >
    <template v-slot="{ item }">
      <div class="item">{{ item.text }}</div>
    </template>
  </virtual-scroller>
</template>

// React - 虚拟列表
import { VirtualList } from 'react-virtualized';

function App() {
  return (
    <VirtualList
      width={300}
      height={400}
      rowCount={items.length}
      rowHeight={50}
      rowRenderer={({ index, style }) => (
        <div style={style}>{items[index].text}</div>
      )}
    />
  );
}

// Angular - 虚拟列表
@Component({
  template: `
    <cdk-virtual-scroll-viewport [itemSize]="50">
      <div *cdkVirtualFor="let item of items">
        {{ item.text }}
      </div>
    </cdk-virtual-scroll-viewport>
  `
})
export class AppComponent {
  items = Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    text: `Item ${i}`
  }));
}

2. 状态管理 ​

javascript
// Vue - Vuex
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

// React - Redux
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

// Angular - NgRx
@Injectable()
export class CounterEffects {
  @Effect()
  increment$ = this.actions$.pipe(
    ofType('[Counter] Increment'),
    delay(1000),
    map(() => ({ type: '[Counter] Increment Success' }))
  );
  
  constructor(private actions$: Actions) {}
}

最佳实践 ​

1. 项目结构 ​

bash
# Vue 项目结构
src/
  components/
    Base/
    Layout/
  views/
  store/
  router/
  utils/
  assets/
  styles/

# React 项目结构
src/
  components/
    common/
    features/
  pages/
  store/
  hooks/
  utils/
  assets/
  styles/

# Angular 项目结构
src/
  app/
    components/
    pages/
    services/
    store/
    utils/
  assets/
  styles/

2. 代码规范 ​

javascript
// ESLint 配置
module.exports = {
  extends: [
    'plugin:vue/recommended',  // Vue
    'react-app',              // React
    '@angular-eslint/recommended'  // Angular
  ],
  rules: {
    // 通用规则
    'no-console': 'warn',
    'no-debugger': 'warn',
    'no-unused-vars': 'warn'
  }
};

// Prettier 配置
module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2,
  semi: true
};

工具链 ​

1. 开发工具 ​

json
{
  "devDependencies": {
    // Vue
    "@vue/cli-service": "^4.5.0",
    "vue-template-compiler": "^2.6.0",
    
    // React
    "react-scripts": "^5.0.0",
    "@types/react": "^17.0.0",
    
    // Angular
    "@angular/cli": "^12.0.0",
    "@angular/compiler-cli": "^12.0.0",
    
    // 通用工具
    "typescript": "^4.5.0",
    "eslint": "^8.0.0",
    "prettier": "^2.0.0"
  }
}

2. 测试工具 ​

json
{
  "devDependencies": {
    // Vue
    "@vue/test-utils": "^1.3.0",
    "jest": "^27.0.0",
    
    // React
    "@testing-library/react": "^12.0.0",
    "@testing-library/jest-dom": "^5.0.0",
    
    // Angular
    "@angular/core/testing": "^12.0.0",
    "jasmine-core": "^3.8.0",
    
    // 通用工具
    "cypress": "^9.0.0"
  }
}

总结 ​

选择合适的前端框架需要考虑项目需求、团队能力和技术生态。通过合理使用框架特性和遵循最佳实践，可以构建出高效、可维护的应用程序。

参考资源 ​