建一个app和网站那个比较好做网站的计划书

建一个app和网站那个比较好,做网站的计划书,重庆靓号网站建设,做APP必须要有网站么前言 在Vue开发中#xff0c;响应式数据是核心基石——它能让数据变化自动驱动视图更新#xff0c;无需手动操作DOM。但你是否遇到过这些困惑#xff1f;Vue2中直接给对象加属性#xff0c;页面为啥不更新#xff1f;Vue3里到底该用ref还是reactive#xff1f;不同数据类…前言在Vue开发中响应式数据是核心基石——它能让数据变化自动驱动视图更新无需手动操作DOM。但你是否遇到过这些困惑Vue2中直接给对象加属性页面为啥不更新Vue3里到底该用ref还是reactive不同数据类型该怎么选响应式方案本文将从Vue2到Vue3的响应式实现原理入手详细拆解两者的核心差异手把手教你处理响应式数据的增删改查再深入对比ref和reactive的使用场景帮你彻底搞懂Vue响应式的底层逻辑与实战技巧。一、Vue2.x 响应式基于 Object.defineProperty 的实现Vue2的响应式机制陪伴了无数开发者但它的实现方式决定了存在一些固有的局限。1. 核心实现原理Vue2的响应式核心依赖Object.definePropertyAPI通过数据劫持的方式拦截属性的读写操作具体分为两种场景对象类型通过Object.defineProperty为对象的每个属性设置getter和setter当读取属性时触发getter收集依赖修改属性时触发setter触发更新。数组类型没有使用Object.defineProperty而是重写了数组的7个变更方法push、pop、shift、unshift、splice、sort、reverse通过包裹这些方法来拦截数组的修改操作。模拟Vue2响应式实现// 源数据letperson{name:张三,age:18};// 模拟Vue2响应式处理letp{};Object.defineProperty(p,name,{// 可配置允许后续删除属性configurable:true,get(){console.log(读取了name属性收集依赖);returnperson.name;},set(value){console.log(修改了name属性触发视图更新);person.namevalue;}});Object.defineProperty(p,age,{configurable:true,get(){console.log(读取了age属性收集依赖);returnperson.age;},set(value){console.log(修改了age属性触发视图更新);person.agevalue;}});2. Vue2响应式的固有问题虽然Object.defineProperty能实现基本的响应式但在实际开发中会遇到三个棘手问题必须手动处理新增属性不响应直接给对象添加新属性由于没有提前通过Object.defineProperty拦截视图不会更新。删除属性不响应使用delete关键字删除对象属性同样无法触发响应式更新。数组下标修改不响应直接通过下标修改数组元素如arr[0] 新值或修改数组长度如arr.length 0不会触发视图更新。3. Vue2中解决响应式问题的方案针对以上问题Vue2提供了Vue.set全局和this.$set组件内两个API以及Vue.delete/this.$delete来处理属性删除实战代码示例template div p姓名{{ person.name }}/p p年龄{{ person.age }}/p p性别{{ person.sex }}/p p爱好{{ person.hobby }}/p button clickaddSex新增性别属性/button button clickdeleteName删除姓名属性/button button clickupdateHobby修改第一个爱好/button /div /template script import Vue from vue; export default { data() { return { person: { name: 张三, age: 18, hobby: [吃饭, 学习] } }; }, methods: { addSex() { // 错误写法直接新增属性视图不更新 // this.person.sex 女; // 正确写法1组件内使用this.$set this.$set(this.person, sex, 女); // 正确写法2全局使用Vue.set需导入Vue // Vue.set(this.person, sex, 女); }, deleteName() { // 错误写法直接删除属性视图不更新 // delete this.person.name; // 正确写法1组件内使用this.$delete this.$delete(this.person, name); // 正确写法2全局使用Vue.delete // Vue.delete(this.person, name); }, updateHobby() { // 错误写法下标修改数组视图不更新 // this.person.hobby[0] 逛街; // 正确写法1使用this.$set this.$set(this.person.hobby, 0, 逛街); // 正确写法2使用数组重写方法如splice // this.person.hobby.splice(0, 1, 逛街); } } }; /script二、Vue3.x 响应式基于 Proxy Reflect 的革新为了解决Vue2的响应式局限Vue3彻底重构了响应式系统核心采用ES6的Proxy和ReflectAPI实现了更强大、更灵活的响应式能力。1. 核心实现原理Vue3的响应式实现分为两步Proxy 代理创建源对象的代理对象拦截对象的所有操作包括属性的读写、新增、删除数组的下标修改、长度变更等相比Object.defineProperty拦截范围更广。Reflect 反射通过ReflectAPI操作源对象的属性它能统一返回操作结果成功/失败并且与Proxy的拦截方法一一对应让代码更规范、更健壮。模拟Vue3响应式实现// 源数据letperson{name:张三,age:18};// 模拟Vue3响应式Proxy ReflectconstpnewProxy(person,{// 拦截属性读取如 p.nameget(target,propName){console.log(读取了${propName}属性收集依赖);// 反射读取源对象属性returnReflect.get(target,propName);},// 拦截属性修改或新增如 p.name 李四 或 p.sex 女set(target,propName,value){console.log(修改/新增了${propName}属性触发视图更新);// 反射修改源对象属性returnReflect.set(target,propName,value);},// 拦截属性删除如 delete p.namedeleteProperty(target,propName){console.log(删除了${propName}属性触发视图更新);// 反射删除源对象属性returnReflect.deleteProperty(target,propName);}});2. Vue3响应式的核心优势相比Vue2Vue3的响应式机制从根本上解决了之前的局限无需手动调用额外API 支持对象新增属性直接p.sex 女即可触发响应式。 支持对象删除属性直接delete p.name即可触发响应式。 支持数组下标修改直接p.hobby[0] 逛街即可触发响应式。 支持数组长度修改直接p.hobby.length 1即可触发响应式。 响应式深度穿透默认支持嵌套对象/数组的响应式如p.address.city 北京。3. Vue3响应式的两大核心APIref 与 reactiveVue3提供了ref和reactive两个核心API来创建响应式数据它们分工明确覆盖了所有数据类型的响应式需求。1reactive处理对象/数组类型reactive专门用于将对象或数组转为响应式数据返回一个Proxy代理对象操作方式与原生对象一致无需额外语法。使用示例import{reactive}fromvue;// 响应式对象constuserreactive({name:itclanCoder,age:10,address:{city:上海,district:浦东新区}});// 响应式数组consthobbyreactive([编程,读书,运动]);// 直接修改属性自动响应式user.name李四;user.address.city北京;// 嵌套对象也支持hobby[0]前端开发;// 数组下标修改hobby.push(旅游);// 数组方法修改deleteuser.age;// 删除属性2ref处理基本类型 兼容对象/数组ref主要用于将基本类型数据字符串、数字、布尔值等转为响应式数据同时也支持对象/数组内部会自动通过reactive转为Proxy代理。核心特点脚本中操作时需要通过.value访问/修改数据。模板中使用时Vue会自动解包无需.value。使用示例import{ref}fromvue;// 基本类型响应式constcountref(0);constmsgref(Hello Vue3);// 脚本中操作需要 .valuecount.value1;msg.valueHello 响应式;// 对象类型响应式内部自动转为reactiveconstproductref({name:手机,price:3999});product.value.price4999;// 脚本中仍需 .value// 模板中使用无需 .value/* template p{{ count }}/p p{{ msg }}/p p{{ product.name }}{{ product.price }}/p /template */三、ref 与 reactive 深度对比该怎么选很多开发者会纠结到底用ref还是reactive其实两者没有绝对的优劣核心看数据类型和使用场景。下面从三个维度做详细对比对比维度refreactive适用数据类型优先基本类型string/number/boolean等也支持对象/数组仅支持对象/数组不支持单独基本类型实现原理基本类型Object.defineProperty 的 get/set对象/数组内部转为 reactiveProxy基于 Proxy Reflect深度响应式脚本中操作需通过 .value 访问/修改直接操作无需 .value模板中使用自动解包无需 .value直接使用无需额外语法解构/传递特性解构后仍保持响应式.value 保留引用直接解构会丢失响应式需配合 toRefs核心优势类型支持全面使用灵活适合零散数据操作原生无需记忆 .value适合整体状态实战选择建议单个基本类型数据用ref如计数器、表单输入值、开关状态等。复杂对象/数组用reactive如用户信息、表单整体数据、列表数据等。组件间传递响应式数据优先ref解构不丢失响应式更稳定。零散数据集合用ref如页面中多个独立的状态变量。整体状态管理用reactive如页面级的状态对象逻辑更聚合。四、总结Vue的响应式系统从Vue2到Vue3实现了质的飞跃Vue2基于Object.defineProperty存在新增/删除属性、数组下标修改等响应式局限需手动通过$set/$delete处理。Vue3基于Proxy Reflect彻底解决了Vue2的局限响应式能力更强大、更灵活。ref和reactive是Vue3的核心响应式APIref主打基本类型灵活兼容reactive主打对象/数组原生操作。最后记住一个简单的选择口诀基本类型用ref对象数组用reactive零散数据用ref整体状态用reactive。根据实际场景灵活选择才能让响应式开发更高效如果觉得本文对你有帮助欢迎点赞、收藏关注我获取更多Vue实战技巧