盘锦化工网站建设,旅游网站哪个好,企业网站定制设计公司,如何规避电子政务门户网站建设1.Vue指令
v-bind#xff1a;动态绑定数据 v-on#xff1a;绑定事件监听器 v-for#xff1a;循环指令#xff0c;可以循环数组或对象 v-if#xff1a;根据表达式的真假值#xff0c;判断是否渲染元素#xff0c;会销毁并重建 v-show#xff1a;显示隐藏元素#xff0…1.Vue指令
v-bind动态绑定数据 v-on绑定事件监听器 v-for循环指令可以循环数组或对象 v-if根据表达式的真假值判断是否渲染元素会销毁并重建 v-show显示隐藏元素修改元素的display属性 v-model实现双向绑定
插槽vue2 使用slot是直接使用slot的vue3 使用插槽必须为 v-slot
vue2和3的是双向绑定实现方式也不一样
1.数据双向绑定 new proxy() 替代 object.defineProperty() Vue3对响应式模块进行了重写主要修改就是proxy替换了defineProperty实现响应式。 Vue2使用defineProperty存在一些原因 对数组拦截有问题需要做特殊处理 不能拦截新增、删除的属性 defineProperty方案在初始化时候通过 数据劫持 结合 发布订阅模式的方式来实现的 也就是说数据和视图同步数据发生变化视图跟着变化视图变化数据也随之发生改变核心关于VUE双向数据绑定其核心是 Object.defineProperty()方法加载时间有点慢。 Proxy代理 对数组进行拦截还能对MapSet实现拦截 proxy是懒处理行为没有嵌套对象时不会实施拦截也使之初始化速度和内存得到改善 proxy存在兼容性问题IE不支持。 proxy属性拦截原理
function reactive( obj ) {return new Proxy ( obj, {get(target,key){},set(target,key,val) {},deleteProperty(target,key){}}
}vue3双向绑定优点与vue2双向绑定的缺点 001: 在vue2之中假如设置了obj:{a:1} 若是给obj对象添加一个b属性值直接在methods之中使用方法 obj.b 2导致的问题是数据有更新但是视图没有更新 需要使用this.$set()方法去设置b属性为响应式属性值才能支持试图更新 vue3之中直接使用reactive定义对象则当前对象为响应式对象对于obj.b 2 视图会更新 002 object.defineProperty对于后期添加的属性值是不参与劫持设置为响应式属性的这就是为什么上面obj.b没有更新视图的缘故 003 new Proxy对于后期添加的属性值是依旧走proxy内的set和get这就是obj.b更新视图的缘故
3.vue2与vue3 设置响应式demo
// vue2 设置响应式属性demolet obj {a: 1,b: 2}let vue {}for (let k in obj) {Object.defineProperty(vue, k, {get() {console.log(获取了)return obj[k]},set(value) {obj[k] value}})}console.log(obj, obj) // obj {a: 1, b: 2}vue.c 000console.log(vue-c, vue.c) // vue-c 000 没有走 Object.defineProperty这个逻辑console.log(vue-a, vue.a) // 获取了 vue-a 1 打印了由于有a属性则走了Object.defineProperty这个逻辑// vue3 设置响应式属性demolet obj {a: 1,b: 2}let vue {}vue new Proxy(obj, {get(target, key, receiver) {console.log(获取了)return Reflect.get(target, key, receiver)},set(target, key, val, receiver) {console.log(设置了)return Reflect.set(target, key, val, receiver)},deleteProperty(target, key) {}})vue.n 000console.log(vue-n, vue.n) // vue-c 000 设置了 获取了 vue3之中走了new Proxy的逻辑设置为了响应式数据2.v-if和v-show的区别是什么
切换元素时v-if会销毁并重建元素v-show是修改display属性来做到显示和隐藏。
v-show项目用处回到顶部组件的显示隐藏v-if项目用处登陆方式切换。
3.v-if和v-for的优先级
当 v-if与 v-for 一起使用时v-for具有比v-if更高的优先级这意味着v-if 将分别重复运行于每个v-for 循环中。所以不推荐 v-if 和 v-for 同时使用。如果 v-if 和 v-for一起用的话vue中的的会自动提示 v-if应该放到外层去。
注意的是 vue2的时候 v-for指令优先级比v-if高先执行v-for再执行v-if而且不推荐一起使用vue3则再v-for之中使用的时候把v-if当成一个判断语句不会互相冲突的
4.v-for中key作用
需要使用key来给每个节点做一个唯一标识Diff算法就可以正确的识别此节点找到正确的位置区插入新的节点
Vue3 相比于 Vue2虚拟DOM上增加 patchFlag 字段。借助Vue3 Template Explorer来看
div idapph1vue3虚拟DOM讲解/h1p今天天气真不错/pdiv{{name}}/div
/divimport { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from vueconst _withScopeId n (_pushScopeId(scope-id),nn(),_popScopeId(),n)
const _hoisted_1 { id: app }
const _hoisted_2 /*#__PURE__*/ _withScopeId(() /*#__PURE__*/_createElementVNode(h1, null, vue3虚拟DOM讲解, -1 /* HOISTED */))
const _hoisted_3 /*#__PURE__*/ _withScopeId(() /*#__PURE__*/_createElementVNode(p, null, 今天天气真不错, -1 /* HOISTED */))export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createElementBlock(div, _hoisted_1, [_hoisted_2,_hoisted_3,_createElementVNode(div, null, _toDisplayString(_ctx.name), 1 /* TEXT */)]))
}第3个_createElementVNode的第4个参数即 patchFlag 字段类型。 字段类型情况1 代表节点为动态文本节点那在 diff 过程中只需比对文本对容无需关注 class、style等。除此之外发现所有的静态节点HOISTED 为 -1都保存为一个变量进行静态提升可在重新渲染时直接引用无需重新创建。
// patchFlags 字段类型列举
export const enum PatchFlags { TEXT 1, // 动态文本内容CLASS 1 1, // 动态类名STYLE 1 2, // 动态样式PROPS 1 3, // 动态属性不包含类名和样式FULL_PROPS 1 4, // 具有动态 key 属性当 key 改变需要进行完整的 diff 比较HYDRATE_EVENTS 1 5, // 带有监听事件的节点STABLE_FRAGMENT 1 6, // 不会改变子节点顺序的 fragmentKEYED_FRAGMENT 1 7, // 带有 key 属性的 fragment 或部分子节点UNKEYED_FRAGMENT 1 8, // 子节点没有 key 的fragmentNEED_PATCH 1 9, // 只会进行非 props 的比较DYNAMIC_SLOTS 1 10, // 动态的插槽HOISTED -1, // 静态节点diff阶段忽略其子节点BAIL -2 // 代表 diff 应该结束
}5.Vue的生命周期
1.vue2生命周期函数 beforeCreate在实例创建之间执行数据是未加载状态。 created在实例创建、数据加载后能初始化数据DOM渲染之前执行。 beforeMount虚拟DOM已创建完成在数据渲染前最后一次更改数据。el未挂载。 mounted页面、数据渲染完成。el挂载完毕。可以访问DOM节点。 beforeUpdate重新渲染之前触发。不会造成重渲染。 Updated数据已经更新完成DOM也重新render完成更改数据会陷入死循环。 beforeDestroy实例销毁前执行实例仍然完全可用。 destroyed实例销毁后执行这时候只剩下DOM空壳。 第一次页面加载会触发beforeCreate created beforeMount mounted。 一般获取数据在 created/beforeMount/mounted中调用 操作 DOM 在mounted操作 2.vue3生命周期函数 setup 、onBeforeMount 、 onMounted 、onBeforeUpdate 、onUpdated 、onBeforeUnmount、onUnmounted
6.vue3的新Composition API 组合api区别
1.ref和reactive的区别ref一般用于定义普通数据类型和dom节点使用 .value去取值 toRefs 结构数据变成响应式数据reactive一般用于定义复杂数据类型使用的时候直接取值即可。源码上的区别ref若是定义的是简单数据类型那么响应式原理走的是vue2的Object.defineProperty()的get与set方式若是ref定义的是引用类型数据那么响应式原理使用的proxy中Reflect.set与getreactive响应式原理直接使用的是proxy处理负责数据类型内部使用了Reflect.get与set实现响应式的。 2.watch和watchEffect的区别watch侦测一个或者多个响应式数据并在数据源变化时再调用一个回调函数watchEffect立即运行一个函数被动地追踪它的依赖当这些依赖改变时重新执行该函数
7.vue2每个周期适用场景
beforeCreate 在new一个vue实例后只有一些默认的生命周期钩子和默认事件其他的东西都还没创建。在beforeCreate生命周期执行的时候data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create data 和 methods都已经被初始化好了如果要调用 methods 中的方法或者操作 data 中的数据最早可以在这个阶段中操作
beforeMount 执行到这个钩子的时候在内存中已经编译好了模板了但是还没有挂载到页面中此时页面还是旧的
mounted 执行到这个钩子的时候就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点最早可以在和这个阶段中进行
beforeUpdate 当执行这个钩子时页面中的显示的数据还是旧的data中的数据是更新后的 页面还没有和最新的数据保持同步
updated 页面显示的数据和data中的数据已经保持同步了都是最新的
beforeDestory Vue实例从运行阶段进入到了销毁阶段这个时候上所有的 data 和 methods 指令 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed 这个时候上所有的 data 和 methods 指令 过滤器 ……都是处于不可用状态。组件已经被销毁了。
8.Diff算法
Vue3 patchChildren 源码。结合上文与源码patchFlag 帮助 diff 时区分静态节点以及不同类型的动态节点。一定程度地减少节点本身及其属性的比对
function patchChildren(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {// 获取新老孩子节点const c1 n1 n1.childrenconst c2 n2.childrenconst prevShapeFlag n1 ? n1.shapeFlag : 0const { patchFlag, shapeFlag } n2// 处理 patchFlag 大于 0 if(patchFlag 0) {if(patchFlag PatchFlags.KEYED_FRAGMENT) {// 存在 keypatchKeyedChildren()return} els if(patchFlag PatchFlags.UNKEYED_FRAGMENT) {// 不存在 keypatchUnkeyedChildren()return}}// 匹配是文本节点静态移除老节点设置文本节点if(shapeFlag ShapeFlags.TEXT_CHILDREN) {if (prevShapeFlag ShapeFlags.ARRAY_CHILDREN) {unmountChildren(c1 as VNode[], parentComponent, parentSuspense)}if (c2 ! c1) {hostSetElementText(container, c2 as string)}} else {// 匹配新老 Vnode 是数组则全量比较否则移除当前所有的节点if (prevShapeFlag ShapeFlags.ARRAY_CHILDREN) {if (shapeFlag ShapeFlags.ARRAY_CHILDREN) {patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense,...)} else {unmountChildren(c1 as VNode[], parentComponent, parentSuspense, true)}} else {if(prevShapeFlag ShapeFlags.TEXT_CHILDREN) {hostSetElementText(container, )} if (shapeFlag ShapeFlags.ARRAY_CHILDREN) {mountChildren(c2 as VNodeArrayChildren, container,anchor,parentComponent,...)}}}
}patchUnkeyedChildren 源码如下所示
function patchUnkeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {c1 c1 || EMPTY_ARRc2 c2 || EMPTY_ARRconst oldLength c1.lengthconst newLength c2.lengthconst commonLength Math.min(oldLength, newLength)let ifor(i 0; i commonLength; i) {// 如果新 Vnode 已经挂载则直接 clone 一份否则新建一个节点const nextChild (c2[i] optimized ? cloneIfMounted(c2[i] as Vnode)) : normalizeVnode(c2[i])patch()}if(oldLength newLength) {// 移除多余的节点unmountedChildren()} else {// 创建新的节点mountChildren()}}9.去除URL中的#
将路由的hash模式改为history模式
10.Vue3事件缓存
Vue3 的cacheHandler可在第一次渲染后缓存我们的事件。相比于 Vue2 无需每次渲染都传递一个新函数。加一个 click 事件。
div idapph1vue3事件缓存讲解/h1p今天天气真不错/pdiv{{name}}/divspan onCLick() {}span
/divimport { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from vueconst _withScopeId n (_pushScopeId(scope-id),nn(),_popScopeId(),n)
const _hoisted_1 { id: app }
const _hoisted_2 /*#__PURE__*/ _withScopeId(() /*#__PURE__*/_createElementVNode(h1, null, vue3事件缓存讲解, -1 /* HOISTED */))
const _hoisted_3 /*#__PURE__*/ _withScopeId(() /*#__PURE__*/_createElementVNode(p, null, 今天天气真不错, -1 /* HOISTED */))
const _hoisted_4 /*#__PURE__*/ _withScopeId(() /*#__PURE__*/_createElementVNode(span, { onCLick: () {} }, [/*#__PURE__*/_createElementVNode(span)
], -1 /* HOISTED */))export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createElementBlock(div, _hoisted_1, [_hoisted_2,_hoisted_3,_createElementVNode(div, null, _toDisplayString(_ctx.name), 1 /* TEXT */),_hoisted_4]))
}观察以上渲染函数你会发现 click 事件节点为静态节点HOISTED 为 -1即不需要每次重新渲染。
11
12.vue-router的两种模式
hash模式 即地址栏 URL 中的 # 符号 history模式 window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法需要特定浏览器支持
13.$NextTick
$nextTick是在下次DOM更新循环结束之后执行延迟回调在修改数据之后使用
14.Vue-router跳转和location.href有什么区别?
使用 location.href /url来跳转简单方便但是刷新了页面使用 history.pushState( /url )无刷新页面静态跳转引进 router然后使用 router.push( /url ) 来跳转使用了 diff 算法实现了按需加载减少了 dom 的消耗。其实使用router跳转和使用 history.pushState()没什么差别的因为vue-router就是用了 history.pushState() 尤其是在history模式下
15.vue修饰符
.stop等同于 JavaScript 中的 event.stopPropagation() 防止事件冒泡 .prevent 等同于 JavaScript 中的 event.preventDefault()防止执行预设的行为如果事件可取消则取消该事件而不停止事件的进一步传播 .capture 与事件冒泡的方向相反事件捕获由外到内 .self 只会触发自己范围内的事件不包含子元素 .once 只会触发一次
16.多根节点
// vue2只能存在一个根节点需要用一个div来包裹着
templatedivheader/headermain/mainfooter/footer/div
/template
//Vue3 支持多个根节点也就是 fragment。即以下多根节点的写法是被允许的
templateheader/headermain/mainfooter/footer
/template17.vue2组件中data为什么必须是一个函数
因为 JavaScript 的特性所导致在component中data必须以函数的形式存在不可以是对象。组建中的 data 写成一个函数数据以函数返回值的形式定义这样每次复用组件的时候都会返回一份新的 data 相当于每个组件实例都有自己私有的数据空间它们只负责各自维护的数据不会造成混乱。而单纯的写成对象形式就是所有的组件实例共用了一个 data 这样改一个全都改了。
18.params和query的区别
用法query要用path来引入params要用name来引入接收参数都是类似的分别是 this. r o u t e . q u e r y . n a m e 和 t h i s . route.query.name 和 this. route.query.name和this.route.params.name 。url地址显示query更加类似于我们ajax中get传参params则类似于post说的再简单一点前者在浏览器地址栏中显示参数后者则不显示
19.computed、watch、methods的区别
computed要有返回值支持缓存。 watch不支持缓存。 methods不支持缓存。 watch项目用处搜索框输入框的监听监听路由地址的改变
20.keep-alive
可以实现组件缓存当组件切换时不会对当前组件进行卸载 有include、exclude两个属性可以有条件的进行组件缓存 两个钩子函数activated/ deactivated,用来得知当前组件是否处于活跃状态 keep-alive项目用处页面跳转保留当前位置。
21.父子组件通信
vue2 父传子直接props子传父采用Emitting Eventsthis. e m i t ( ‘事件’ , 参数 ) 父组件访问子组件 emit(‘事件’,参数)父组件访问子组件 emit(‘事件’,参数)父组件访问子组件children获取全部、 r e f s 获取指定的子组件访问父组件 refs获取指定的 子组件访问父组件 refs获取指定的子组件访问父组件parent、$root根组件
vue3 父传子直接props子传父采用Emitting Events但需要从vue之中解构出defineEmits再defineEmits([事件名称‘]) const emit defineEmits([“change-handerAdd”, “change-handerStep”]); emit(“change-handerAdd”, id);
22.兄弟组件通信
Vue.prototype.$bus new Vue()
this.$bus.$emit(data-to-b, some data);
this.$bus.$on(data-to-b, this.receiveData);23.监听组件原生事件
给对应的事件加上native修饰符才能进行监听
24.单页面应用的优缺点
优点 良好的交互体验。 良好的前后端工作分离模式。 减轻服务器压力。 缺点 SEO难度较高。 前进、后退管理。 初次加载耗时多。
25.MVVM
MVVM是Model-View-ViewModel缩写是把MVC中的Controller演变成ViewModel,Model层代表数据模型View代表视图UIViewModel是View和Model层的桥梁数据会绑定到viewModel层并自动将数据渲染到页面中视图变化的时候会通知viewModel层更新数据
26.路由守卫
//全局前置守卫
router.beforeEach((to, from,next) {// 返回 false 以取消导航return false
})
/* 全局后置守卫 */
router.afterEach((to,from,nex){document.title to.meta.title;// 1修改当前页面的标题window.scrollTo(0,0) // 2,每次切换页面的时候让页面滚动到最顶部})//路由独享守卫// 西瓜播放器页面 beforeEnter介绍{path: /xgplayer,name: Xgplayer,meta: { title: 西瓜播放器 },component: () import(../views/xgplayer/xgplayer.vue),/* 路由独享守卫 只在进入路由时触发 不想让进可以直接 return false */beforeEnter: (to, from,next) {if (to.path /login) {next()} else {alert(请登入);next(/login)}},},
//组件内部守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave27.vue2生命周期的理解
总共分为8个阶段创建前/后载入前/后更新前/后销毁前/后。
创建前/后 在beforeCreate阶段vue实例的挂载元素el和数据对象data都为undefined还未初始化。在created阶段vue实例的数据对象data有了el为undefined还未初始化。
载入前/后在beforeMount阶段vue实例的$el和data都初始化了但还是挂载之前为虚拟的dom节点data.message还未替换。在mounted阶段vue实例挂载完成data.message成功渲染。
更新前/后当data变化时会触发beforeUpdate和updated方法
销毁前/后在执行destroy方法后对data的改变不会再触发周期函数说明此时vue实例已经解除了事件监听以及和dom的绑定但是dom结构依然存在
28.vue如何获取dom
先给标签设置一个ref值再通过this.$refs.domName获取例如
div reftest/divconst dom this.$refs.test29.v-on可以监听多个方法
input typetext v-on{ input:onInput,focus:onFocus,blur:onBlur, }30.assets和static的区别?
这两个都是用来存放项目中所使用的静态资源文件。
两者的区别 assets中的文件在运行npm run build的时候会打包简单来说就是会被压缩体积代码格式化之类的。打包之后也会放到static中。 static中的文件则不会被打包。 建议将图片等未处理的文件放在assets中打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中因为这些文件已经经过处理了。
31.vue初始化页面闪动问题?
使用vue开发时在vue初始化之前由于div是不归vue管的所以我们写的代码在还没有解析的情况下会容易出现花屏现象看到类似于{{message}}的字样虽然一般情况下这个时间很短暂但是我们还是有必要让解决这个问题的。
首先在css里加上以下代码
[v-cloak] {display: none;
}如果没有彻底解决问题则在根元素加上style“display: none;” :style“{display: ‘block’}”
32.vuex中有几个核心属性分别是什么
State:数据唯一来源(数据源)vuex所有的数据都会存在state中就像一个很大的仓库存储所有数据可以实例化用来存储所有的数据如何存储呢实际上status就是一个庞大的对象本身是一个json对象用来存储所有的数据 Getter:获取数据。本来可以通过state实例化拿到所有数据但是getter有其存在的道理好比是vue的computed计算属性相似性从现有的state来派生出一个新的state大大方便我们获取数据或者state派生出新的状态的时候有很大的作用 Mutation:修改数据不是通过直接修改需要通过一个commit mutation来修改数据mutation本质上就是一个function为什么不能直接通过实例化state直接去给state里面的数据做修改而是通过commit一个mutation在通过mutation传入一个state再对state进行修改呢这里主要是因为每次提交mutation都会有一个记录vue这样做是为了更方便的记录下每一个数据改变的历史和轨迹方便于监听和回滚之类的操作。还需要注意一点mutation的操作一定是同步的写成异步会有很大的麻烦具体看文档 Action:提交mutation为什么会多出这个呢实际上mutation是同步修改数据而往往业务需求有很多的异步操作来修改vuex的数据状态action里面可以进行异步操作因为我们提交的时候mutationmutation是通过同步修改数据。Action相当于包装了一层可以进行任意的异步编程。来提交mutation在通过mutation同步修改数据
面对复杂的应用程序当管理的状态比较多时我们需要将vuex的store对象分割成模块(modules)。 const store new Vuex.Store({ modules:{} })
33.ajax请求代码应该写在组件的methods中还是vuex的actions中
如果请求来的数据是不是要被其他组件公用仅仅在请求的组件内使用就不需要放入vuex 的state里。
如果被其他地方复用这个很大几率上是需要的如果需要请将请求放入action里方便复用
34.vuex中的数据在页面刷新后数据消失问题
用sessionstorage 或者 localstorage 存储数据 存储 sessionStorage.setItem(‘名’,JSON.stringify(值) ) 使用 sessionStorage.getItem(‘名’) —得到的值为字符串类型用JSON.parse()去引号
35.怎么在组件中批量使用Vuex的getter属性
使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中
import {mapGetters} from vuex
export default{computed:{...mapGetters([total,discountTotal])}
}36.组件中重复使用mutation
使用mapMutations辅助函数,在组件中这么使用
import { mapMutations } from vuex
methods:{...mapMutations({setNumber:SET_NUMBER,})
}然后调用this.setNumber(10)相当调用this.$store.commit(‘SET_NUMBER’,10)
37.mutation和action有什么区别
38.在v-model上怎么用Vuex中state的值
需要通过computed计算属性来转换
input v-modelmessage
// ...
computed: {message: {get () {return this.$store.state.message},set (value) {this.$store.commit(updateMessage, value)}}
}39.vue2和vue3响应式原理区别
vue3对于vue2来说最大的变化就是composition Api 替换了vue2的options Api
vue3的响应式原理替换为了proxyvue2的则是Object.defineproperty。其中proxy有着以下这些优点- 1对象新增的属性不需要使用$set添加响应式因为proxy默认会监听动态添加属性和删除属性等操作- 2消除数组上无法监听数组索引、length属性不再进行数组原型对象上重写数组方法- 3Object.defineproperty是劫持所有对象的属性设置为getter、setter然后遍历递归去实现。而proxy则是代理了整个对象。- 4vue2使用Object.defineproperty拦截对象的get和set属性进行操作。而proxy有着13种拦截方法。- 5由vue2的响应式原理可以看出vue底层需要对vue实例的返回的每一个key进行get和set操作无论这个值有没有被用到。所以在vue中定义的data属性越多那么初始化开销就会越大。而proxy是一个惰性的操作它只会在用到这个key的时候才会执行get改值的时候才会执行set。所以在vue3中实现响应式的性能实际上要比vue2实现响应式性能要好 proxy原理- 作用能够为另外一个对象创建代理该代理可以拦截和重新定义该对象的基本操作(获取设置定义属性等)- proxy的两个参数 参数1 要代理的原始对象 参数2一个对象这个对象定义了操作将被拦截以及如何重新定义被拦截的操作
js
const target {name: ts,age: 18};
const handler {};
const proxy new Proxy(target, handler); // 使用proxy代理了一个空对象 proxy对象具有响应式const target2 {name: ts,age: 18};
const handler2 {get(target, key, receiver) {console.log(访问属性${key}值)return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {console.log(设置属性${key}值)return Reflect.set(target, key, value, receiver)}
};
const proxy2 new Proxy(target2, handler2); // 使用proxy代理了一个handler2对象 handler2对象中设置了get和set属性
console.log(proxy2.name, proxy2.name)
proxy2.name jkl;
proxy2.sex male;
console.log(proxy2,proxy2);Object.defineproperty 与 proxy 的区别:由 vue2 的响应式原理可以看出vue 底层需要对 vue 实例的返回的每一个 key 进行 get 和 set 操作无论这个值有没有被用到。所以在 vue 中定义的 data 属性越多那么初始化开销就会越大。而 proxy 是一个惰性的操作它只会在用到这个 key 的时候才会执行 get改值的时候才会执行 set。所以在 vue3 中实现响应式的性能实际上要比 vue2 实现响应式性能要好
1Object.defineproperty 初始化的时候拦截对象设置为get和set属性
const obj {name: wxs,age: 25,
};
Object.entries(obj).forEach(([key, value]) {Object.defineProperty(obj, key, {get() {return value;},set(newValue) {console.log(监听到属性${key}改变);value newValue;},});
});
obj.name 11;
obj.age 22;
obj.ak47 ak47;1输出结果 监听到属性name改变、监听到属性age改变2: proxy 初始化的时候有使用这个key值则get一下有设置这个key值则set一下
const obj {name:wxs,age:25
}const prxoyTarget new Proxy(obj,{get(target,key){return target.key},set(target,key,value){console.log(监听到属性${key}需要改成${value})target[key] value}
})prxoyTarget.name 11
prxoyTarget.age 22
prxoyTarget.ak47 ak472输出结果 监听到属性name需要改成11、监听到属性age需要改成22、监听到属性ak47需要改成ak47
