Vue.js Composition API 介绍

import { ref, watch } from 'vue';

export default {
  props: {
    // 定义props
    initialCount: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      required: true
    }
  },

  emits: ['count-change'], // 定义自定义事件

  // setup 函数接收两个参数
  setup(props, context) {
    // 第一个参数: props - 响应式的props对象
    console.log('props:', props);
    console.log('initialCount:', props.initialCount);
    console.log('title:', props.title);

    // props是响应式的，可以使用watch监听
    watch(
      () => props.initialCount,
      (newVal, oldVal) => {
        console.log(`initialCount从${oldVal}变为${newVal}`);
      }
    );

    // 定义响应式数据，基于props
    const count = ref(props.initialCount);

    // 第二个参数: context - 上下文对象
    // context包含以下属性:
    // - attrs: 非响应式的属性对象
    // - slots: 插槽对象
    // - emit: 触发事件的函数
    // - expose: 暴露公共属性的函数

    const increment = () => {
      count.value++;
      // 使用context.emit触发自定义事件
      context.emit('count-change', count.value);
    };

    // 返回模板需要的内容
    return {
      count,
      increment,
      title: props.title // 可以直接返回props中的值
    };
  }
};
                                        

import { ref } from 'vue';

export default {
  setup(props, context) {
    // context.attrs - 包含所有非props的属性
    console.log('attrs:', context.attrs);
    // 例如: <MyComponent id="my-id" class="my-class" data-test="test" />
    // id、class、data-test都会在attrs中

    // context.slots - 包含所有插槽
    console.log('slots:', context.slots);
    // 可以访问具名插槽和默认插槽
    // context.slots.default() - 默认插槽内容
    // context.slots.header() - 名为header的插槽内容

    // context.emit - 触发自定义事件
    const handleClick = () => {
      context.emit('custom-event', { data: 'some data' });
    };

    // context.expose - 暴露公共属性给父组件
    const internalData = ref('内部数据');

    // 暴露给父组件的内容
    context.expose({
      getInternalData: () => internalData.value,
      resetData: () => {
        internalData.value = '重置后的数据';
      }
    });

    // 只有通过expose暴露的内容才能被父组件访问
    // 父组件可以通过ref访问: this.$refs.myComponent.getInternalData()

    return {
      handleClick
    };
  }
};
                                        

<!-- 使用 <script setup> 语法糖 -->
<script setup>
// 这个脚本会在组件每次创建时执行
// 所有内容都会自动暴露给模板

import { ref, computed, onMounted } from 'vue';

// 定义props
const props = defineProps({
  initialCount: {
    type: Number,
    default: 0
  },
  title: String
});

// 定义emit
const emit = defineEmits(['count-change']);

// 响应式数据
const count = ref(props.initialCount);
const message = ref('Hello Vue 3');

// 计算属性
const doubledCount = computed(() => count.value * 2);

// 方法
const increment = () => {
  count.value++;
  emit('count-change', count.value);
};

const updateMessage = (newMsg) => {
  message.value = newMsg;
};

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

// 不需要return，所有内容自动可用
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>计数: {{ count }}</p>
    <p>双倍计数: {{ doubledCount }}</p>
    <button @click="increment">增加</button>

    <p>消息: {{ message }}</p>
    <input :value="message" @input="updateMessage($event.target.value)">
  </div>
</template>

<style scoped>
/* 样式 */
</style>
                                        

<!-- 父组件 -->
<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 引用子组件
const childRef = ref(null);

onMounted(() => {
  console.log('子组件实例:', childRef.value);

  // 访问子组件的公共方法
  if (childRef.value) {
    console.log('子组件数据:', childRef.value.getData());

    // 调用子组件方法
    childRef.value.sayHello();
  }
});

// 调用子组件方法
const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.increment();
  }
};

const getChildData = () => {
  if (childRef.value) {
    const data = childRef.value.getData();
    alert(`子组件数据: count=${data.count}, message=${data.message}`);
  }
};
</script>

<template>
  <div>
    <h3>父组件</h3>
    <button @click="callChildMethod">调用子组件方法</button>
    <button @click="getChildData">获取子组件数据</button>

    <!-- 引用子组件 -->
    <ChildComponent ref="childRef" />
  </div>
</template>

<!-- 子组件: ChildComponent.vue -->
<script setup>
import { ref, defineExpose } from 'vue';

const count = ref(0);
const message = ref('Hello from child');

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

const sayHello = () => {
  alert('Hello!');
};

const getData = () => {
  return {
    count: count.value,
    message: message.value
  };
};

// 暴露给父组件的内容
defineExpose({
  increment,
  sayHello,
  getData,
  count, // 也可以暴露响应式数据（不推荐）
  message
});
</script>

<template>
  <div style="padding: 20px; border: 2px solid #42b983; margin: 10px 0;">
    <h4>子组件</h4>
    <p>计数: {{ count }}</p>
    <p>消息: {{ message }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>
                                        

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

// 模板引用
const elementRef = ref(null);
const inputRef = ref(null);

// 响应式数据
const elementInfo = ref('元素未加载');
const inputValue = ref('');

// 监听引用变化
watch(elementRef, (newElement, oldElement) => {
  console.log('元素引用变化:', { old: oldElement, new: newElement });

  if (newElement) {
    elementInfo.value = `元素已加载，标签名: ${newElement.tagName}`;

    // 可以立即操作元素
    newElement.style.border = '2px solid #3498db';
    newElement.style.padding = '10px';
  } else if (oldElement) {
    elementInfo.value = '元素已卸载';
  }
}, {
  immediate: true // 立即执行一次
});

// 监听输入框引用变化
watch(inputRef, (newInput) => {
  if (newInput) {
    console.log('输入框已加载');
    newInput.focus();

    // 监听输入框输入事件
    newInput.addEventListener('input', (event) => {
      inputValue.value = event.target.value;
    });
  }
});

// 动态修改样式
const changeElementStyle = () => {
  if (elementRef.value) {
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];

    elementRef.value.style.backgroundColor = randomColor;
    elementRef.value.style.color = 'white';
    elementRef.value.style.fontWeight = 'bold';
  }
};

// 清除输入框
const clearInput = () => {
  if (inputRef.value) {
    inputRef.value.value = '';
    inputRef.value.focus();
    inputValue.value = '';
  }
};
</script>

<template>
  <div>
    <h3>响应式模板引用</h3>

    <div ref="elementRef" style="margin: 10px 0; padding: 15px;">
      <p>{{ elementInfo }}</p>
    </div>
    <button @click="changeElementStyle">修改元素样式</button>

    <div style="margin: 20px 0;">
      <input ref="inputRef" type="text" placeholder="输入内容...">
      <button @click="clearInput" style="margin-left: 10px;">清除</button>
    </div>

    <p>输入的值: {{ inputValue }}</p>
  </div>
</template>
                                        

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

// 项目列表
const items = ref([
  { id: 1, name: '项目1' },
  { id: 2, name: '项目2' },
  { id: 3, name: '项目3' },
  { id: 4, name: '项目4' }
]);

// 引用数组
const itemRefs = ref([]);

// 动态添加项目
const addItem = () => {
  const newId = items.value.length + 1;
  items.value.push({ id: newId, name: `项目${newId}` });
};

// 移除项目
const removeItem = (index) => {
  items.value.splice(index, 1);
};

// 高亮指定项目
const highlightItem = (index) => {
  if (itemRefs.value[index]) {
    // 先清除所有高亮
    clearHighlights();

    // 高亮指定项目
    const element = itemRefs.value[index];
    element.style.backgroundColor = '#ffeb3b';
    element.style.fontWeight = 'bold';
  }
};

// 清除所有高亮
const clearHighlights = () => {
  itemRefs.value.forEach(element => {
    if (element) {
      element.style.backgroundColor = '';
      element.style.fontWeight = '';
    }
  });
};

// 获取所有项目文本
const getAllItemText = () => {
  const texts = itemRefs.value
    .filter(element => element)
    .map(element => element.textContent.trim());

  alert(`所有项目: ${texts.join(', ')}`);
};

// 设置引用函数
const setItemRef = (el) => {
  if (el) {
    itemRefs.value.push(el);
  }
};

// 组件挂载后
onMounted(() => {
  console.log('项目引用数组:', itemRefs.value);
  console.log('项目数量:', itemRefs.value.length);
});
</script>

<template>
  <div>
    <h3>v-for 中的模板引用</h3>

    <button @click="addItem" style="margin-right: 10px;">添加项目</button>
    <button @click="clearHighlights" style="margin-right: 10px;">清除高亮</button>
    <button @click="getAllItemText">获取所有项目文本</button>

    <ul style="margin-top: 20px;">
      <li v-for="(item, index) in items"
          :key="item.id"
          :ref="setItemRef"
          style="padding: 10px; margin: 5px 0; border: 1px solid #ccc;">
        {{ item.name }}
        <button @click="highlightItem(index)" style="margin-left: 10px;">高亮此项</button>
        <button @click="removeItem(index)" style="margin-left: 5px;">移除</button>
      </li>
    </ul>

    <p>项目总数: {{ items.length }}</p>
  </div>
</template>
                                        

// useMouse.js - 鼠标跟踪组合式函数
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  // 状态
  const x = ref(0);
  const y = ref(0);

  // 计算属性
  const position = computed(() => ({ x: x.value, y: y.value }));

  // 更新鼠标位置
  const update = (event) => {
    x.value = event.clientX;
    y.value = event.clientY;
  };

  // 添加事件监听
  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  // 移除事件监听
  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  // 返回状态和方法
  return {
    x,
    y,
    position,
    update // 也可以暴露update方法
  };
}

// 增强版: 带选项的useMouse
export function useMouseWithOptions(options = {}) {
  const { throttleDelay = 0 } = options;

  const x = ref(0);
  const y = ref(0);

  let throttleTimer = null;

  const update = (event) => {
    if (throttleDelay > 0) {
      if (throttleTimer) return;

      throttleTimer = setTimeout(() => {
        x.value = event.clientX;
        y.value = event.clientY;
        throttleTimer = null;
      }, throttleDelay);
    } else {
      x.value = event.clientX;
      y.value = event.clientY;
    }
  };

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
    if (throttleTimer) {
      clearTimeout(throttleTimer);
    }
  });

  return { x, y };
}

// 在组件中使用
<script setup>
import { useMouse, useMouseWithOptions } from './useMouse';

// 基本用法
const { x, y } = useMouse();

// 带选项的用法
const { x: throttledX, y: throttledY } = useMouseWithOptions({
  throttleDelay: 100 // 100ms节流
});
</script>

<template>
  <div>
    <h3>鼠标跟踪</h3>
    <p>鼠标位置: X={{ x }}, Y={{ y }}</p>
    <p>节流位置: X={{ throttledX }}, Y={{ throttledY }}</p>

    <div style="height: 300px; border: 1px solid #ccc; margin-top: 20px;">
      在此区域移动鼠标
    </div>
  </div>
</template>
                                        

// useFetch.js - 数据获取组合式函数
import { ref, watch, computed } from 'vue';

export function useFetch(url, options = {}) {
  // 状态
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(false);

  // 配置
  const {
    immediate = true,
    manual = false,
    onSuccess,
    onError,
    transform
  } = options;

  // 计算属性
  const hasError = computed(() => !!error.value);
  const hasData = computed(() => !!data.value);
  const isEmpty = computed(() =>
    Array.isArray(data.value) ? data.value.length === 0 : !data.value
  );

  // 获取数据
  const execute = async (executeUrl = url, executeOptions = {}) => {
    isLoading.value = true;
    error.value = null;

    try {
      const response = await fetch(executeUrl, executeOptions);

      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
      }

      let result = await response.json();

      // 数据转换
      if (transform && typeof transform === 'function') {
        result = transform(result);
      }

      data.value = result;

      // 成功回调
      if (onSuccess) {
        onSuccess(result);
      }

      return result;
    } catch (err) {
      error.value = err.message || '未知错误';

      // 错误回调
      if (onError) {
        onError(err);
      }

      throw err;
    } finally {
      isLoading.value = false;
    }
  };

  // 重新获取
  const refetch = () => execute();

  // 重置状态
  const reset = () => {
    data.value = null;
    error.value = null;
    isLoading.value = false;
  };

  // 自动获取
  if (immediate && !manual) {
    execute();
  }

  // 监听URL变化
  if (typeof url === 'function' || (options.watch && typeof url !== 'function')) {
    watch(
      () => (typeof url === 'function' ? url() : url),
      (newUrl) => {
        if (newUrl) {
          execute(newUrl);
        }
      },
      { immediate: !manual }
    );
  }

  return {
    // 状态
    data,
    error,
    isLoading,

    // 计算属性
    hasError,
    hasData,
    isEmpty,

    // 方法
    execute,
    refetch,
    reset
  };
}

// 在组件中使用
<script setup>
import { computed } from 'vue';
import { useFetch } from './useFetch';

// 基本用法
const { data: userData, isLoading, error } = useFetch(
  'https://jsonplaceholder.typicode.com/users/1'
);

// 带选项的用法
const { data: posts, refetch } = useFetch(
  () => `https://jsonplaceholder.typicode.com/posts?userId=${userId.value}`,
  {
    manual: true, // 手动执行
    transform: (data) => data.slice(0, 5), // 只取前5条
    onSuccess: (data) => {
      console.log('数据获取成功:', data);
    },
    onError: (err) => {
      console.error('数据获取失败:', err);
    }
  }
);

// 依赖其他数据的获取
const userId = ref(1);
const { data: user } = useFetch(
  () => `https://jsonplaceholder.typicode.com/users/${userId.value}`,
  { watch: true } // 监听userId变化
);

const changeUser = () => {
  userId.value = userId.value === 1 ? 2 : 1;
};
</script>

<template>
  <div>
    <h3>数据获取示例</h3>

    <div v-if="isLoading">加载中...</div>
    <div v-else-if="error" class="error">错误: {{ error }}</div>
    <div v-else-if="userData">
      <p>用户: {{ userData.name }}</p>
      <p>邮箱: {{ userData.email }}</p>
    </div>

    <div>
      <p>当前用户ID: {{ userId }}</p>
      <button @click="changeUser">切换用户</button>
      <button @click="refetch">重新获取数据</button>
    </div>

    <div v-if="user">
      <h4>用户信息</h4>
      <p>{{ user.name }} - {{ user.email }}</p>
    </div>
  </div>
</template>
                                        

// useLocalStorage.js - 本地存储组合式函数
import { ref, watch } from 'vue';

export function useLocalStorage(key, initialValue) {
  // 从localStorage读取初始值
  const readValue = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.warn(`读取localStorage键"${key}"时出错:`, error);
      return initialValue;
    }
  };

  // 状态
  const storedValue = ref(readValue());

  // 写入localStorage
  const setValue = (value) => {
    try {
      // 允许值是函数，像useState一样
      const valueToStore =
        typeof value === 'function' ? value(storedValue.value) : value;

      // 保存状态
      storedValue.value = valueToStore;

      // 保存到localStorage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));

      // 触发storage事件，让其他标签页也能响应
      window.dispatchEvent(new StorageEvent('storage', { key }));
    } catch (error) {
      console.warn(`写入localStorage键"${key}"时出错:`, error);
    }
  };

  // 移除
  const removeValue = () => {
    try {
      window.localStorage.removeItem(key);
      storedValue.value = initialValue;
      window.dispatchEvent(new StorageEvent('storage', { key }));
    } catch (error) {
      console.warn(`移除localStorage键"${key}"时出错:`, error);
    }
  };

  // 监听其他标签页的变化
  const handleStorageChange = (event) => {
    if (event.key === key && event.storageArea === window.localStorage) {
      storedValue.value = readValue();
    }
  };

  // 添加事件监听
  window.addEventListener('storage', handleStorageChange);

  // 组件卸载时清理
  const cleanup = () => {
    window.removeEventListener('storage', handleStorageChange);
  };

  return {
    value: storedValue,
    setValue,
    removeValue,
    cleanup
  };
}

// useSessionStorage.js - SessionStorage版本
export function useSessionStorage(key, initialValue) {
  const readValue = () => {
    try {
      const item = window.sessionStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.warn(`读取sessionStorage键"${key}"时出错:`, error);
      return initialValue;
    }
  };

  const storedValue = ref(readValue());

  const setValue = (value) => {
    try {
      const valueToStore =
        typeof value === 'function' ? value(storedValue.value) : value;

      storedValue.value = valueToStore;
      window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.warn(`写入sessionStorage键"${key}"时出错:`, error);
    }
  };

  const removeValue = () => {
    try {
      window.sessionStorage.removeItem(key);
      storedValue.value = initialValue;
    } catch (error) {
      console.warn(`移除sessionStorage键"${key}"时出错:`, error);
    }
  };

  return {
    value: storedValue,
    setValue,
    removeValue
  };
}

// 在组件中使用
<script setup>
import { useLocalStorage, useSessionStorage } from './useStorage';

// 使用localStorage
const { value: theme, setValue: setTheme } = useLocalStorage('theme', 'light');

const { value: userPreferences } = useLocalStorage('userPreferences', {
  notifications: true,
  language: 'zh-CN',
  fontSize: 14
});

// 使用sessionStorage
const { value: sessionToken, setValue: setSessionToken } =
  useSessionStorage('sessionToken', null);

// 方法
const toggleTheme = () => {
  setTheme(theme.value === 'light' ? 'dark' : 'light');
};

const updatePreferences = () => {
  setTheme({
    ...userPreferences.value,
    fontSize: 16,
    theme: theme.value
  });
};

const login = () => {
  setSessionToken('mock-jwt-token-123456');
};

const logout = () => {
  setSessionToken(null);
};
</script>

<template>
  <div :class="theme">
    <h3>本地存储示例</h3>

    <p>当前主题: {{ theme }}</p>
    <button @click="toggleTheme">切换主题</button>

    <div style="margin-top: 20px;">
      <p>用户偏好设置:</p>
      <pre>{{ userPreferences }}</pre>
      <button @click="updatePreferences">更新偏好设置</button>
    </div>

    <div style="margin-top: 20px;">
      <p>会话令牌: {{ sessionToken || '未登录' }}</p>
      <button @click="login">登录</button>
      <button @click="logout">登出</button>
    </div>

    <p style="margin-top: 20px; font-size: 12px; color: #666;">
      提示: 尝试在多个标签页中打开此页面，切换主题时会同步更新。
    </p>
  </div>
</template>

<style>
.light {
  background-color: white;
  color: black;
  padding: 20px;
}

.dark {
  background-color: #333;
  color: white;
  padding: 20px;
}
</style>