怎样让网站被百度收录分类目录网站程序

怎样让网站被百度收录,分类目录网站程序,如何做企业招聘网站,冯站长之家官网目录 一、Mixin 源码分析 1. 核心源码位置 2. 源码实现 3. 合并策略源码#xff08;核心#xff09; 4. 不同选项的合并策略 二、合并策略总结 三、使用场景 1. 提取公共逻辑 2. 页面埋点统计 3. 列表页通用逻辑 4. 表单验证 四、面试回答模板 问题1#xff1a…目录一、Mixin 源码分析1. 核心源码位置2. 源码实现3. 合并策略源码核心4. 不同选项的合并策略二、合并策略总结三、使用场景1. 提取公共逻辑2. 页面埋点统计3. 列表页通用逻辑4. 表单验证四、面试回答模板问题1什么是 Vue Mixin问题2Mixin 的合并策略是什么问题3Mixin 的优缺点问题4实际项目中如何使用 Mixin问题5全局 Mixin 和局部 Mixin 的区别五、Vue 3 替代方案一、Mixin 源码分析1. 核心源码位置Vue 2.x 中 mixin 的核心代码位于src/core/global-api/mixin.js和src/core/util/options.js2. 源码实现// src/core/global-api/mixin.js export function initMixin (Vue: GlobalAPI) { Vue.mixin function (mixin: Object) { // 将传入的 mixin 对象与 Vue.options 进行合并 this.options mergeOptions(this.options, mixin) return this } }3. 合并策略源码核心// src/core/util/options.js export function mergeOptions ( parent: Object, child: Object, vm?: Component ): Object { // ... const options {} let key // 遍历父选项 for (key in parent) { mergeField(key) } // 遍历子选项 for (key in child) { if (!hasOwn(parent, key)) { mergeField(key) } } function mergeField (key) { // 根据不同的选项使用不同的合并策略 const strat strats[key] || defaultStrat options[key] strat(parent[key], child[key], vm, key) } return options }4. 不同选项的合并策略// 生命周期钩子合并策略 - 合并成数组 strats.created strats.mounted strats.beforeMount function (parentVal, childVal) { return childVal ? parentVal ? parentVal.concat(childVal) // 都存在合并成数组 : Array.isArray(childVal) ? childVal : [childVal] : parentVal } // data 合并策略 - 递归合并组件优先 strats.data function (parentVal, childVal, vm) { return mergeDataOrFn(parentVal, childVal, vm) } // methods、props、computed 合并策略 - 组件覆盖 mixin strats.methods strats.props strats.computed function (parentVal, childVal) { if (!parentVal) return childVal const ret Object.create(null) extend(ret, parentVal) if (childVal) extend(ret, childVal) // 子组件会覆盖 return ret } // watch 合并策略 - 合并成数组 strats.watch function (parentVal, childVal) { // 合并成数组都会执行 if (!childVal) return Object.create(parentVal || null) if (!parentVal) return childVal const ret {} extend(ret, parentVal) for (const key in childVal) { let parent ret[key] const child childVal[key] if (parent !Array.isArray(parent)) { parent [parent] } ret[key] parent ? parent.concat(child) : Array.isArray(child) ? child : [child] } return ret }二、合并策略总结选项类型合并策略执行顺序生命周期钩子合并成数组mixin 先执行组件后执行data递归合并对象组件数据优先覆盖 mixinmethods/computed/props对象合并组件选项覆盖 mixinwatch合并成数组都会执行components/directives/filters对象合并组件选项覆盖 mixin三、使用场景1. 提取公共逻辑// 权限检查 mixin export const permissionMixin { methods: { hasPermission(permission) { return this.$store.getters.permissions.includes(permission) }, checkPermission(permission) { if (!this.hasPermission(permission)) { this.$message.error(无权限访问) this.$router.push(/403) } } } }2. 页面埋点统计export const trackMixin { mounted() { // 页面访问埋点 this.$track(page_view, { page: this.$route.path, title: document.title }) }, beforeDestroy() { // 页面离开埋点 this.$track(page_leave, { page: this.$route.path, duration: Date.now() - this.enterTime }) }, data() { return { enterTime: Date.now() } } }3. 列表页通用逻辑export const listMixin { data() { return { list: [], loading: false, pagination: { current: 1, pageSize: 10, total: 0 } } }, methods: { async fetchList() { this.loading true try { const { data, total } await this.getListApi(this.pagination) this.list data this.pagination.total total } finally { this.loading false } }, handlePageChange(page) { this.pagination.current page this.fetchList() } }, mounted() { this.fetchList() } }4. 表单验证export const formMixin { data() { return { formLoading: false } }, methods: { async submitForm(formName) { return new Promise((resolve, reject) { this.$refs[formName].validate((valid) { if (valid) { resolve() } else { reject(new Error(表单验证失败)) } }) }) }, resetForm(formName) { this.$refs[formName].resetFields() } } }四、面试回答模板问题1什么是 Vue Mixin回答Mixin 是 Vue 提供的一种代码复用机制可以将组件的公共逻辑抽离出来。Mixin 对象可以包含任意组件选项data、methods、生命周期等当组件使用 mixin 时mixin 的选项会被混入到组件自身的选项中。问题2Mixin 的合并策略是什么回答Vue 对不同类型的选项采用不同的合并策略生命周期钩子合并成数组mixin 的钩子先执行组件的后执行data 数据递归合并组件数据优先会覆盖 mixin 中同名属性methods/computed/props对象合并组件选项会覆盖 mixinwatch合并成数组都会执行源码中通过mergeOptions函数实现针对不同选项类型使用strats策略对象中定义的合并函数。问题3Mixin 的优缺点回答优点提高代码复用性减少重复代码便于维护公共逻辑集中管理灵活性高可以混入多个 mixin缺点命名冲突多个 mixin 可能有同名属性/方法依赖不明确组件依赖的数据来源不清晰滥用导致维护困难过多 mixin 会让代码难以追踪现代替代方案Vue 3 推荐使用Composition API组合式 API使用composables函数替代 mixin依赖关系更清晰问题4实际项目中如何使用 Mixin回答在实际项目中我主要在以下场景使用 mixin列表页通用逻辑分页、加载、刷新等权限控制统一的权限检查方法埋点统计页面访问、用户行为追踪表单处理验证、提交、重置等通用方法但现在新项目中我更倾向使用 Vue 3 的 Composition API通过自定义 hookscomposables来实现代码复用因为它更灵活、依赖更清晰。问题5全局 Mixin 和局部 Mixin 的区别回答// 全局 mixin - 影响所有组件 Vue.mixin({ created() { console.log(全局 mixin) } }) // 局部 mixin - 只影响当前组件 export default { mixins: [myMixin], // ... }全局 mixin 会影响所有 Vue 实例包括第三方组件应谨慎使用。通常只在插件开发或全局配置时使用。局部 mixin 只影响引入它的组件更加安全可控。五、Vue 3 替代方案// 使用 Composition API 替代 mixin import { ref, onMounted } from vue export function useList(api) { const list ref([]) const loading ref(false) const pagination ref({ current: 1, pageSize: 10, total: 0 }) const fetchList async () { loading.value true try { const { data, total } await api(pagination.value) list.value data pagination.value.total total } finally { loading.value false } } onMounted(() { fetchList() }) return { list, loading, pagination, fetchList } }