企业官网建设流程全解析

深圳市官网网站建设平台,个人优惠券网站怎么做,分销商城开发公司,wordpress源码站整站源码1.vue2开发中一些注意事项 1.1数据响应式问题 // ❌ Bug#xff1a;直接通过索引修改数组元素不会触发更新 this.items[0] new value// ❌ 修改数组长度不会触发更新 this.items.length 0解决方案#xff1a; // ✅ 使用Vue.set或$set this.$set(this.items, 0, new value)…1.vue2开发中一些注意事项1.1数据响应式问题// ❌ Bug直接通过索引修改数组元素不会触发更新 this.items[0]new value// ❌ 修改数组长度不会触发更新 this.items.length0解决方案// ✅ 使用Vue.set或$setthis.$set(this.items,0,new value)// ✅ 使用数组变异方法 this.items.splice(0,1,new value)// ✅ 清空数组的正确方式 this.items.splice(0)1.2对象属性添加/删除// ❌ 动态添加新属性不会触发更新 this.user.age25// ❌ 删除属性不会触发更新 delete this.user.name解决方案// ✅ 使用Vue.set Vue.set(this.user,age,25)// ✅ 使用$setthis.$set(this.user,name,John)// ✅ 删除属性使用$deletethis.$delete(this.user,name)1.3disabled和v-if同时使用注意事项当v-if和disabled同时出现时可能会导致页面不能响应式更新需要刷新一次页面才可以解决方法如下在el-button中添加key属性1.4mixins的不规范使用典型事故案例解析Case 1: 异步数据竞争条件// mixinA.jsexportdefault{asynccreated(){const resawait apiCall();this.sharedDatares.data;// 假设此时组件尚未初始化完毕}}// mixinB.jsexportdefault{data(){return{sharedData: null}},mounted(){console.log(this.sharedData)}// undefined!因为执行时机早于赋值} 根本原因: Vue的生命周期钩子执行顺序由内部队列决定跨mixin的异步操作会产生竞态条件。Case 2: 计算属性污染// mathMixin.jsexportdefault{computed:{totalPrice(){returnthis.items.reduce((sum, i)sum i.price,0)}}}// cartComponent.jsexportdefault{mixins:[mathMixin],data(){return{items:[]}}, // 如果另一个mixin也定义了totalPrice会怎样后者覆盖前者} 灾难后果: 最终显示的价格可能是任意一个mixin的版本取决于加载顺序而非业务需求。 最佳实践守则1.单一职责原则单个mixin仅解决一个问题如滚动监听、表单验证禁止创建全能型mixin。2.前缀约定强制规范// good practice const scrollHandler{/*... */};exportdefault scrollHandler;// bad practice - 无意义命名 const utilityMixin{/*... */};3.显式导入代替全局注册// ❌ 危险做法 Vue.mixin({computed:{...}});// ✅ 安全做法importmyMixin from./myMixin;exportdefault{mixins:[myMixin]};4.防御性编程技巧// 防止关键属性被覆盖 const safeMixin{beforeCreate(){if(this.$options.methods?.criticalMethod){throw new Error(Critical method conflict detected!);}}, //...其他逻辑}; 建议对于新项目应优先采用 Composition API setup语法糖已存在的重度mixin项目建议分阶段重构至组合式API架构。若必须使用mixins务必配合ESLint插件实现以下校验规则{rules:{no-mixin-overlap:error,require-explicit-key:error,disallow-global-mixin:error}}2.vue3开发中一些注意事项2.1响应式数据解构问题Vue3特有// ❌ 直接解构reactive对象 const statereactive({count:0, name:test})const{count, name}state // 失去响应性 // ✅ 解决方案使用toRefs const statereactive({count:0, name:test})const{count, name}toRefs(state)// 保持响应性 // ✅ 或者使用computed const countcomputed(()state.count)2.2生命周期和异步更新相关Bugvue2和vue3通用2.21DOM更新异步性问题// ❌ 错误修改数据后立即访问DOM this.messagenew messageconsole.log(this.$el.textContent)// 可能还是旧值 // ✅ 解决方案使用nextTick this.messagenew messagethis.$nextTick((){console.log(this.$el.textContent)// 新值})// Vue3 Composition API写法import{nextTick}fromvueconst changeMessageasync(){message.valuenew messageawait nextTick()console.log(container.value.textContent)}2.22生命周期钩子中的异步操作// ❌ 在beforeDestroy/beforeUnmount中忘记清理created(){this.timersetInterval((){console.log(timer running)},1000)}// ❌ 忘记清理beforeDestroy(){// 缺少clearInterval}// ✅ 正确的清理beforeDestroy(){clearInterval(this.timer)}// Vue3 setup写法import{onUnmounted}fromvuesetup(){const timersetInterval((){},1000)onUnmounted((){clearInterval(timer)})}2.23Props直接修改// ❌ 直接修改props props:[value], methods:{updateValue(){this.valuenew value// 报错}}// ✅ 正确方式触发事件通知父组件 // 子组件 this.$emit(update:value,new value)// Vue3 v-model写法 // 父组件ChildComponent v-model:titlepageTitle/// 子组件 props:[title], emits:[update:title], methods:{updateTitle(){this.$emit(update:title,new title)}}2.24事件监听器泄漏// ❌ 忘记移除事件监听器mounted(){window.addEventListener(resize, this.handleResize)}// ✅ 正确方式mounted(){window.addEventListener(resize, this.handleResize)},beforeDestroy(){window.removeEventListener(resize, this.handleResize)}// Vue3 Composition APIimport{onMounted, onUnmounted}fromvuesetup(){const handleResize(){// 处理resize}onMounted((){window.addEventListener(resize, handleResize)})onUnmounted((){window.removeEventListener(resize, handleResize)})}3.常见问题检查清单1.数组修改是否使用变异方法或Vue.set2.动态添加属性是否使用Vue.set3.异步操作后是否使用nextTick访问DOM4.是否清理了所有事件监听器和定时器5.v-for是否提供了唯一的key6.是否直接修改了props7.路由参数变化时组件是否更新8.Composition API中是否正确处理响应式数据4.从Vue2到Vue3注意事项1.全局API变化Vue.prototype → app.config.globalProperties2.事件API变化$on, $off 被移除3.过滤器移除使用计算属性或方法替代4.v-model变化支持多个v-model和自定义修饰符5.使用Composition API进行渐进式重构