Vue框架

介绍

Vue是由尤雨溪开发的开源JavaScript框架，用于构建用户界面和单页应用。它的核心库只关注视图层，易于上手，同时也可以与其他库或现有项目集成。Vue结合了React和Angular的优点，提供了响应式数据绑定和组件化的开发方式。

原理

Vue的核心原理：

响应式数据绑定：通过Object.defineProperty或Proxy实现数据的响应式变化
组件化：将UI拆分为独立、可复用的组件
虚拟DOM：通过内存中的虚拟DOM树优化渲染性能
模板语法：基于HTML的模板语法，易于理解和使用
指令系统：提供v-bind、v-on、v-model等指令简化DOM操作
生命周期：组件从创建到销毁的一系列阶段
依赖收集：追踪数据变化，实现精确更新

图示

<template>
  <div class="counter">
    <h1>计数: {{ count }}</h1>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="toggleVisibility">
      {{ isVisible ? '隐藏' : '显示' }}
    </button>
    <div v-if="isVisible">可见内容</div>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0,
      isVisible: true
    }
  },
  methods: {
    increment() {
      this.count += 1;
    },
    decrement() {
      this.count -= 1;
    },
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  },
  mounted() {
    console.log('组件已挂载');
  },
  beforeUnmount() {
    console.log('组件将卸载');
  },
  watch: {
    count(newValue) {
      document.title = `计数: ${newValue}`;
    }
  }
}
</script>

实例

Vue组件通信示例

<!-- 父组件 Parent.vue -->
<template>
  <div class="parent" style="border: 1px solid blue; padding: 20px;">
    <h2>父组件</h2>
    <p>发送的消息: {{ message }}</p>
    <ChildComponent :message="message" @message-change="handleMessageChange" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  },
  methods: {
    handleMessageChange(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child" style="border: 1px solid #ccc; padding: 10px; margin: 10px;">
    <h3>子组件</h3>
    <p>收到的消息: {{ message }}</p>
    <input
      type="text"
      placeholder="输入消息"
      v-model="inputMessage"
      @input="handleInput"
    />
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      inputMessage: this.message
    }
  },
  methods: {
    handleInput() {
      this.$emit('message-change', this.inputMessage);
    }
  },
  watch: {
    message(newValue) {
      this.inputMessage = newValue;
    }
  }
}
</script>

Vue 3 Composition API示例

<template>
  <div class="counter" style="padding: 20px;">
    <h1>Composition API 示例</h1>
    <p>count: {{ count }}</p>
    <p>doubledCount: {{ doubledCount }}</p>
    <input
      type="text"
      v-model="input"
      placeholder="输入任意内容"
    />
    <button @click="increment" style="margin: 0 10px;">增加 count</button>
    <button @click="decrement">减少 count</button>
  </div>
</template>

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

// 响应式数据
const count = ref(0);
const input = ref('');

// 计算属性
const doubledCount = computed(() => {
  console.log('计算 doubledCount');
  return count.value * 2;
});

// 方法
const increment = () => {
  count.value += 1;
};

const decrement = () => {
  count.value -= 1;
};

// 监听
watch(count, (newValue) => {
  console.log(`count 变化为: ${newValue}`);
  document.title = `计数: ${newValue}`;
});

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
});

onBeforeUnmount(() => {
  console.log('组件将卸载');
});
</script>

专业解决方案

Vue核心概念

响应式数据：通过data函数返回的对象会被Vue转换为响应式数据
组件：Vue的基本构建块，包含模板、脚本和样式
Props：组件间通信的方式，父组件向子组件传递数据
事件：子组件通过事件向父组件传递数据
指令：以v-开头的特殊属性，如v-bind、v-on、v-model、v-if等
计算属性：基于响应式数据计算得出的值，会缓存结果
监听器：监听数据变化并执行相应操作
生命周期钩子：组件生命周期中的特定时间点执行的函数

Vue生态系统

Vue Router：官方路由库
Vuex/Pinia：状态管理库，Pinia是Vuex的继任者
Axios：HTTP客户端
Vue Test Utils：组件测试库
Vuetify/Ant Design Vue：UI组件库
Vite：快速的前端构建工具
Nuxt.js：Vue服务端渲染框架
VuePress：静态网站生成器

Vue 3新特性

Composition API：提供更灵活的组件逻辑组织方式
Teleport：允许组件模板渲染到DOM的其他位置
Suspense：处理异步组件加载状态
更好的TypeScript支持
性能优化：虚拟DOM重写、按需编译等

最佳实践

遵循Vue的风格指南
组件命名采用PascalCase或kebab-case
优先使用Composition API (Vue 3)
将业务逻辑与UI分离
使用计算属性替代复杂的模板表达式
合理使用组件拆分
避免在模板中使用复杂的条件判断
为组件编写单元测试
使用TypeScript增强类型安全性

工具推荐

Vue CLI：Vue应用脚手架
Vite：快速的前端构建工具
Vue DevTools：浏览器扩展，用于调试Vue应用
Jest：测试框架
Cypress：端到端测试工具
ESLint：代码检查工具
Prettier：代码格式化工具
Storybook：UI组件开发环境

介绍​

原理​

图示​

实例​

Vue组件通信示例​

Vue 3 Composition API示例​

专业解决方案​

Vue核心概念​

Vue生态系统​

Vue 3新特性​

最佳实践​

工具推荐​

介绍

原理

图示

实例

Vue组件通信示例

Vue 3 Composition API示例

专业解决方案

Vue核心概念

Vue生态系统

Vue 3新特性

最佳实践

工具推荐