上海opencart网站建设,网站开发风险,软件开发和网页设计的区别,做鞋设备网站原文地址#xff1a;https://www.cnblogs.com/limou956259/p/17195546.html
1、双向数据绑定原理不同
vue2#xff1a;vue2的双向数据绑定是利用ES5的一个API#xff1a;Object.definePropert() 对数据进行劫持#xff0c;结合发布订阅模式的方式来实现的。vue3#xff…原文地址https://www.cnblogs.com/limou956259/p/17195546.html
1、双向数据绑定原理不同
vue2vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持结合发布订阅模式的方式来实现的。vue3vue3中使用了ES6的Proxy API对数据代理。相比vue2.x使用proxy的优势如下defineProperty只能监听某个属性不能对全对象监听可以省去for in闭包等内容来提升效率(直接绑定整个对象即可)可以监听数组不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。
2、是否支持碎片
vue2vue2不支持碎片。vue3vue3支持碎片Fragments就是说可以拥有多个根节点。
3、API类型不同
vue2vue2使用选项类型api选项型api在代码里分割了不同的属性data,computed,methods等。vue3vue3使用组合式api新的合成型api能让我们使用方法来分割相比于旧的api使用属性来分组这样代码会更加简便和整洁。
4、定义数据变量和方法不同
vue2vue2是把数据放入data中在vue2中定义数据变量是data(){}创建的方法要在methods:{}中。vue3vue3就需要使用一个新的setup()方法此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据从vue引入reactive使用reactive() 方法来声明数据为响应性数据使用setup()方法来返回我们的响应性数据从而template可以获取这些响应性数据。
5、生命周期钩子函数不同 vue2中的生命周期 beforeCreate 组件创建之前 created 组件创建之后 beforeMount 组价挂载到页面之前执行 mounted 组件挂载到页面之后执行 beforeUpdate 组件更新之前 updated 组件更新之后
vue3vue3中的生命周期 setup 开始创建组件前 onBeforeMount 组价挂载到页面之前执行 onMounted 组件挂载到页面之后执行 onBeforeUpdate 组件更新之前 onUpdated 组件更新之后
而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外vue3.x还增加了onRenderTracked 和onRenderTriggered函数。
6、父子传参不同 vue2父传子用props,子传父用事件 Emitting Events。在vue2中会调用this$emit然后传入事件名和对象。 vue3父传子用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
7、指令与插槽不同 vue2vue2中使用slot可以直接使用slotv-for与v-if在vue2中优先级高的是v-for指令而且不建议一起使用。 vue3vue3中必须使用v-slot的形式vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句不会相互冲突vue3中移除keyCode作为v-on的修饰符当然也不支持config.keyCodesvue3中移除v-on.native修饰符vue3中移除过滤器filter。
8、main.js文件不同 vue2vue2中我们可以使用pototype(原型)的形式去进行操作引入的是构造函数。 vue3vue3中需要使用结构的形式进行操作引入的是工厂函数vue3中app组件中可以没有根标签。
关键词 组合式apiproxy支持碎片组合式apicomposition生命周期
二、vue3新增的响应式相关的函数 refreactivereadonlycomputedwatchwatchEffect
关键词 refreactivereadonlycomputedwatchwatchEffect
三、ref的理解 1、功能接受一个内部值返回一个响应式的、可更改的 ref 对象ref对象只有一个属性value。 2、使用ref对象模板上不需要写 .value 属性会自动解构在js中使用 .value 来完成数据的读写。 3、ref接收基本类型和引用类型 ref可以接收基本类型。 ref也可以接收引用类型如果将一个对象传给 ref函数那么这个对象将通过 reactive() 转为具有深层次响应式的对象。
关键词 value响应式
四、reactive的理解 1、功能 接受一个对象返回一个对象的响应式代理proxy。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹因此不等于源对象建议只使用响应式代理避免使用原始对象。
响应式转换是“深层”的它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性同时保持响应性。 2、注意点当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时不会执行 ref 的解包。
关键词 对象、proxy、深层、数组、Map
五、readonly 1、功能接受一个对象 (不论是响应式还是普通的) 或是一个 ref返回一个原值的只读代理。 2、只读代理是深层的对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同但解包得到的值是只读的。
关键词 只读readonly
六、computed
功能computed是计算属性。和选项式api中的计算属性实现的功能一样。
参数 可以接受一个 getter 函数返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。 也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。
七、watch 功能侦听数据的变化和选项式api中的watch实现的功能一样组合式api中watch功能更加强大灵活。默认是懒侦听的即仅在侦听源发生变化时才执行回调函数。
参数 第一个参数侦听器的源可以是以下几种 一个函数返回一个值的函数 一个 ref 一个响应式对象 ...或是由以上类型的值组成的数组 第二个参数在第一个参数的值发生变化时要调用的回调函数。这个回调函数接受三个参数新值、旧值以及一个用于注册副作用清理的回调函数。该回调函数会在 副作用下一次重新执行前调用可以用来清除无效的副作用例如等待中的异步请求。 当侦听多个来源时回调函数接受两个数组分别对应来源数组中的新值和旧值。 第三个参数可选的 是一个对象支持以下这些选项 immediate在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。 deep如果源是对象强制深度遍历以便在深层级变更时触发回调。参考深层侦听器。
关键词 侦听监听副作用immediatedeep深度遍历懒侦听
八、watchEffect 功能 watchEffect也是监听数据但是它会立即运行一个函数而不是懒侦听。watchEffect的侦听依赖的数据watchEffect里使用了哪个数据哪个数据就是 watchEffect的依赖。
参数 第一个参数要运行的副作用函数。这个副作用函数的参数也是一个函数注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用可以用来清除无效的副作用例如等待中的异步请求。和watch的第二个参数中回调函数的第三参数一样。 第二个参数可选的选项可以用来调整副作用的刷新时机或调试副作用的依赖。因为侦听默认是在vue组件更新前调用如果你希望组件更新后调用可以把第二个参数传入{ flush: post } 返回值用来停止该副作用的函数。
关键词 侦听监听副作用依赖不是懒侦听
九、watch和watchEffect的区别 与 watchEffect() 相比watch() 使我们可以 懒执行副作用watch是懒侦听执行的watchEffect是首次就会执行 触发侦听器的来源watch是明确知道由哪个依赖引起的侦听watchEffect不明确 可以访问所侦听状态的前一个值和当前值watch可以watchEffect不可以。
关键词 懒侦听、当前值、前一个值新值旧值
十、setup函数的参数 props接收组件的属性 context上下文对象包括 slotsattrsemitexpose
关键词 slotsattrsemitsexpose
十一、setup语法糖写法如何获取setup函数的参数 setup函数的参数 setup语法糖 props defineProps context.emit defineEmits context.expose: defineExpose context.slots useSlots context.attrs: useAttrs
关键词 definePropsdefineEmitsdefineExposeuseSlotsuseAttrs
十二、vue3和vue2生命周期的变化以及compositionApi中的生命周期钩子函数 1、Vue3.0中可以继续使用Vue2.x中的生命周期钩子但有有两个被更名 beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted 2、Vue3.0也提供了 Composition API 形式的生命周期钩子Option API形式的钩子对应关系如下 beforeCreatesetup() createdsetup() beforeMount onBeforeMount mountedonMounted beforeUpdateonBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounted onUnmounted
关键词 beforeUnmountunmountedonBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmounted
十三、Vue3.X和vue2.X中的响应式原理分别是什么区别是什么
1、vue2.x的响应式
实现原理 对象类型通过Object.defineProperty()对属性的读取、修改进行拦截数据劫持。 数组类型通过重写更新数组的一系列方法如pushpop等来实现拦截。对数组的变更方法进行了包裹。
存在问题 新增属性、删除属性, 界面不会更新。 直接通过下标修改数组, 界面不会自动更新。
2、Vue3.0的响应式
实现原理: 通过Proxy代理: 拦截对象中任意属性的变化, 包括属性值的读写、属性的添加、属性的删除等。 通过Reflect反射: 对源对象的属性进行操作。
十四、vue3响应式数据的判断 isRef: 检查一个值是否为一个 ref 对象 isReactive: 检查一个对象是否是由 reactive 创建的响应式代理 isReadonly: 检查一个对象是否是由 readonly 创建的只读代理 isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
关键词 isRefisReactiveisReadonlyisProxy
十五、reactive与ref的区别
定义数据角度 ref用来定义基本类型数据。 reactive用来定义对象或数组类型数据。 备注ref也可以用来定义对象或数组类型数据, 它内部会自动通过reactive转为代理对象。 原理角度 ref通过Object.defineProperty()的get与set来实现响应式数据劫持。 reactive通过使用Proxy来实现响应式数据劫持, 并通过Reflect操作源对象内部的数据。 使用角度 ref定义的数据操作数据需要.value读取数据时模板中直接读取不需要.value。 reactive定义的数据操作数据与读取数据均不需要.value。
关键词 refreactiveProxyvalue
