Vue 基础概念

库

React 和 Vue 核心都是构建 UI 的库，由两部分组成：

基于状态的声明式渲染
组件化的层次结构

1. 基于状态的声明式渲染

什么是声明式渲染？

声明式渲染是指你只需要描述“UI 应该是什么样子”，而不需要关心“如何实现”。换句话说，你只需要定义 UI 的状态，框架会自动根据状态更新 UI。

状态（State）是什么？

状态是驱动 UI 变化的数据。例如：

一个按钮的禁用状态（disabled: true）。
一个列表的数据（items: [...]）。
用户的输入值（inputValue: "..."）。

React 和 Vue 中的声明式渲染

React：使用 JSX 描述 UI，状态通过 useState 或 this.state 管理。
Vue：使用模板语法描述 UI，状态通过 data 或 ref 管理。

代码示例

React 示例

import React, { useState } from 'react'

function App() {
  const [count, setCount] = useState(0) // 定义状态

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default App

Vue 示例

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0) // 定义状态

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment,
    }
  },
}
</script>

关键点：

你只需要定义状态（如 count）和 UI 的结构，框架会自动将状态渲染到 UI 中。
当状态变化时，UI 会自动更新。

2. 组件化的层次结构

什么是组件化？

组件化是将 UI 拆分为独立的、可复用的部分（组件），每个组件负责渲染自己的 UI 和处理自己的逻辑。

组件化的好处

复用性：可以在多个地方复用同一个组件。
可维护性：将复杂的 UI 拆分为多个小组件，便于理解和维护。
独立性：每个组件可以独立开发、测试和更新。

React 和 Vue 中的组件化

React：组件是一个函数或类，返回 JSX。
Vue：组件是一个对象，包含模板、逻辑和样式。

代码示例

React 组件

// Button.jsx
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

export default Button;

// App.jsx
import Button from "./Button";

function App() {
  return (
    <div>
      <Button label="Click Me" onClick={() => alert("Button clicked!")} />
    </div>
  );
}

export default App;

Vue 组件

<!-- Button.vue -->
<template>
  <button @click="onClick">{{ label }}</button>
</template>

<script>
export default {
  props: ['label', 'onClick'],
}
</script>

<!-- App.vue -->
<template>
  <div>
    <Button label="Click Me" :onClick="handleClick" />
  </div>
</template>

<script>
import Button from './Button.vue'

export default {
  components: {
    Button,
  },
  methods: {
    handleClick() {
      alert('Button clicked!')
    },
  },
}
</script>

关键点：

组件可以接收外部传入的数据（如 label 和 onClick），称为 props。
组件可以嵌套，形成层次结构。

3. 如何理解这两个核心概念？

基于状态的声明式渲染

将 UI 视为状态的函数：UI = f(state)。
你只需要关注状态的变化，UI 会自动更新。
这种方式比传统的命令式渲染（手动操作 DOM）更高效、更易维护。

组件化的层次结构

将 UI 拆分为多个小组件，每个组件负责自己的部分。
组件可以嵌套，形成树形结构。
通过 props 和事件实现组件之间的通信。

5. 总结

基于状态的声明式渲染：关注状态的变化，UI 自动更新。
组件化的层次结构：将 UI 拆分为独立的、可复用的组件。

通过理解这两个核心概念，你可以更好地掌握 React 和 Vue 的设计思想，并在实际开发中灵活运用。如果你有更多问题，欢迎继续提问！ 😊

框架

不过，Vue 还是构建用户界面的渐进式框架。

框架可以理解为包含库本身以及其他一些构建支持、数据流方案等附加功能。

如果只是简单的使用 Vue 开发一个小功能，可以直接引入 Vue.js 源码的 CDN 文件。

如果要开发较大型的应用，可以使用 Vue 的脚手架工具初始化项目。

随着应用复杂度的提升，状态管理的难度也相应提升，因此需要额外的状态管理方案来应对，例如 Pinia 和 Vuex。

当应用进一步扩展，从简单的页面升级为 SPA，需要增加客户端路由方案，例如 Vue-Router 等。

后续如果还需要提高客户端首屏的渲染速度，满足 SEO 的需要，就得使用 SSR 渲染。

所以，Vue 的“渐进式”是指“可以按照需求渐进地引入附加功能”，而不是像 AngularJS 一样开箱即用，内置多种功能的前端框架。

PreviousVue 中的 Virtual DOM 和 diff 算法 NextVue2 和 Vue3 响应系统

Last updated 9 days ago

Was this helpful?