我通过ChatGpt复习Vue第一天

Vue.js 概述

1. Vue.js 的设计理念

• 渐进增强（Progressive Framework）: Vue.js 允许逐步引入特性，从简单功能到复杂应用，无需重写整个系统。
• 声明式渲染（Declarative Rendering）: 使用声明式模板简化数据与视图的绑定。
• 组件化（Component-based Architecture）: 通过独立、可复用的组件构建应用，提高代码的组织性和复用性。
• 响应式系统（Reactive System）: 数据变化时自动更新视图，减少手动操作 DOM 的需要。

2. Vue.js 主要特性

2.1 双向数据绑定（Two-Way Data Binding）

• 概念: 使用 v-model 实现数据与视图的双向绑定。

• 示例:

  <template>
    <input v-model="message" />
    <p>{{ message }}</p>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    }
  };
  </script>
  

2.2 虚拟 DOM（Virtual DOM）

• 概念: 使用虚拟 DOM 提高性能，减少实际 DOM 操作的开销。

2.3 指令系统（Directives）

• 概念: Vue 提供内置指令（如 v-if、v-for、v-bind）和自定义指令，简化 DOM 操作。

• 示例:

  <template>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </template>
  
  <script>
  export default {
    data() {
      return {
        items: ['Apple', 'Banana', 'Cherry']
      };
    }
  };
  </script>
  

2.4 生命周期钩子（Lifecycle Hooks）

• 概念: 组件在不同生命周期阶段的钩子函数，例如 created、mounted。

• 示例:

  <template>
    <p>{{ message }}</p>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    },
    created() {
      console.log('Component created');
    },
    mounted() {
      console.log('Component mounted');
    }
  };
  </script>
  

2.5 Vue Router

• 概念: 用于前端路由管理，支持页面导航和路由配置。

2.6 Vuex

• 概念: Vuex 是 Vue 的状态管理库，提供集中式的状态管理，适用于跨组件状态管理。

• 示例:

  // store/index.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      message: 'Hello, Vuex!'
    },
    mutations: {
      setMessage(state, newMessage) {
        state.message = newMessage;
      }
    },
    actions: {
      updateMessage({ commit }, newMessage) {
        commit('setMessage', newMessage);
      }
    },
    getters: {
      reversedMessage: state => {
        return state.message.split('').reverse().join('');
      }
    }
  });
  

  <!-- App.vue -->
  <template>
    <div>
      <p>{{ reversedMessage }}</p>
      <button @click="updateMessage('New Message')">Update Message</button>
    </div>
  </template>
  
  <script>
  import { mapGetters, mapActions } from 'vuex';
  
  export default {
    computed: {
      ...mapGetters(['reversedMessage'])
    },
    methods: {
      ...mapActions(['updateMessage'])
    }
  };
  </script>
  

2.7 Pinia

• 概念: Pinia 是 Vue 3 的状态管理库，作为 Vuex 的现代替代方案，使用 Composition API 风格。

• 示例:

  // stores/main.js
  import { defineStore } from 'pinia';
  
  export const useStore = defineStore('main', {
    state: () => ({
      message: 'Hello, Pinia!'
    }),
    actions: {
      greet() {
        alert(this.message);
      }
    },
    getters: {
      reversedMessage(state) {
        return state.message.split('').reverse().join('');
      }
    }
  });
  

  <!-- App.vue -->
  <template>
    <div>
      <p>{{ reversedMessage }}</p>
      <button @click="greet">Greet</button>
    </div>
  </template>
  
  <script>
  import { useStore } from './stores/main';
  
  export default {
    setup() {
      const store = useStore();
      return {
        reversedMessage: store.reversedMessage,
        greet: store.greet
      };
    }
  };
  </script>
  

2.8 Composition API（Vue 3）

• 概念: 提供更灵活的方式来组织组件逻辑，通过 setup 函数来管理状态和行为。

• 示例:

  // Vue 3.x Composition API 示例
  import { ref, computed, watch } from 'vue';
  
  export default {
    setup() {
      const message = ref('Hello, Vue!');
      const reversedMessage = computed(() => message.value.split('').reverse().join(''));
  
      function greet() {
        alert(message.value);
      }
  
      watch(message, (newVal, oldVal) => {
        console.log(`Message changed from ${oldVal} to ${newVal}`);
      });
  
      return {
        message,
        reversedMessage,
        greet
      };
    },
    template: `
      <div>
        <p>{{ reversedMessage }}</p>
        <button @click="greet">Greet</button>
      </div>
    `
  };
  

总结

• Options API: 使用配置对象组织组件逻辑，适合简单到中型组件，逻辑分散在不同选项中，如 data、methods 和 computed。
• Composition API: 提供更高的灵活性和逻辑复用性，适合复杂组件和应用，通过 setup 函数来组织组件逻辑。
• Vuex: 传统的状态管理库，适用于跨组件状态管理。
• Pinia: 新一代状态管理库，与 Composition API 兼容，提供更现代的状态管理方式。