简单实现vue

Vue 3 基础实现示例

以下是一个简单的 Vue 3 实现示例，包含基本功能如数据绑定、事件处理和组件使用。

安装 Vue 3

npm init vue@latest my-vue-app
cd my-vue-app
npm install

创建基础组件

在 src/components 目录下创建 HelloWorld.vue：

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

<script setup>
import { ref } from 'vue';

const message = 'Hello Vue 3!';
const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

主入口文件

修改 src/main.js：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

根组件

修改 src/App.vue：

<template>
  <HelloWorld />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
</script>

运行项目

启动开发服务器：

npm run dev

响应式数据绑定

Vue 3 使用 ref 和 reactive 实现响应式：

<script setup>
import { ref, reactive } from 'vue';

const counter = ref(0);
const user = reactive({
  name: 'John',
  age: 25
});
</script>

条件渲染与列表渲染

<template>
  <div v-if="showMessage">显示消息</div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

生命周期钩子

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});
</script>

计算属性

<script setup>
import { computed, ref } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

组件通信

父组件传递 props：

<ChildComponent :message="parentMessage" />

子组件接收：

<script setup>
defineProps({
  message: String
});
</script>

状态管理（Pinia）

安装 Pinia：

npm install pinia

创建 store：

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter';

const counter = useCounterStore();
</script>