深度探索 Vue.defineComponent()：构建企业级应用的基石

// 示例1：基础组件定义
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    siteLogo: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      visitCount: 0
    };
  },
  methods: {
    trackVisit() {
      this.visitCount++;
      // 「网址大全」访问统计逻辑
    }
  }
});

// 示例2：TSX 组件开发
import { defineComponent, PropType } from 'vue';

interface Website {
  title: string;
  url: string;
  category: '科技' | '生活';
}

export default defineComponent({
  props: {
    sites: {
      type: Array as PropType<Website[]>,
      default: () => []
    }
  },
  setup(props) {
    return () => (
      <div class="website-grid">
        {props.sites.map(site => (
          <a href={site.url} class="category-{site.category.toLowerCase()}">
            {site.title}
          </a>
        ))}
      </div>
    );
  }
});

// 示例3：组合式函数封装
import { defineComponent, ref, computed } from 'vue';

function useWebsiteFilter(initialList: Website[]) {
  const searchKeyword = ref('');
  
  const filteredList = computed(() => {
    return initialList.filter(item => 
      item.title.includes(searchKeyword.value)
    );
  });

  return { searchKeyword, filteredList };
}

export default defineComponent({
  props: { websites: Array as PropType<Website[]> },
  setup(props) {
    const { searchKeyword, filteredList } = useWebsiteFilter(props.websites || []);

    return { searchKeyword, filteredList };
  }
});

// 示例4：依赖注入体系
import { defineComponent, provide, inject } from 'vue';

const SiteContext = Symbol();

// 父组件
export default defineComponent({
  setup() {
    provide(SiteContext, {
      apiEndpoint: 'https://api.website-collection.com',
      authToken: import.meta.env.VITE_API_KEY
    });
  }
});

// 子组件
export default defineComponent({
  setup() {
    const context = inject(SiteContext);
    // 访问「网址大全」API 接口
  }
});

// 示例5：兼容性写法
import { defineComponent } from 'vue-demi';

export default defineComponent({
  // 同时支持 Vue 2/3 的选项
});