首页 > 其他分享 >Vue面试题44:Vue3为什么要用Proxy代替defineProperty?(总结自B站up主‘前端杨村长’视频,仅供自用学习)

Vue面试题44:Vue3为什么要用Proxy代替defineProperty?(总结自B站up主‘前端杨村长’视频,仅供自用学习)

时间:2022-11-07 09:55:09浏览次数:65  
标签:面试题 Vue get 44 set Proxy key defineProperty 拦截

  • 分析

    • Vue3中最重大的更新之一就是响应式模块reactivity的重写。主要就是用Proxy替换`defineProperty 实现响应式;此变化主要是从性能方面考量;
  • 思路

    • 属性拦截的几种方式;
    • defineProperty的问题;
    • Proxy的优点;
    • 其他考量
  • 回答范例

    • js中做属性拦截常见的方式有三个:definePropertygetter/setterProxy
    • Vue2中使用defineProperty的原因是,当时还没有Proxy,只能用这种方式。由于该APl存在一些局限性,比如对于数组的拦截有问题,为此vue需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性,所以就得额外实现$set、$delete;最后defineProperty方案在初始化时就需要深度递归遍历待处理的对象才能对它进行完全拦截,明显增加了初始化的时间;
    • 以上两点在Proxy出现之后就可以迎刃而解,不仅可以对数组实现拦截,还能对Map、Set实现拦截;另外Proxy的拦截也是懒处理行为,如果用户没有访问嵌套对象,那么也不会实施拦截,这就让初始化的速度和内存占用都改善了;
    • 当然Proxy是有兼容性问题的,IE完全不支持,所以如果需要兼容IE就不能使用vue3;
  • 原理

  • //Proxy属性拦截的原理:利用get、set、deleteProperty实现
    function reactive(obj){
    	return new Proxy(obj,{
    		get(target,key){},
    		set(target,key,val){}
    		deleteProperty(target,key){}
    	})
    }
    
    //Object.defineProperty属性拦截原理:利用get、set实现
    function defineReactive(obj,key,val){
    	Object,defineProperty(obj,key){
    		get(key){},
    		set(key,val){}
    	}
    }
    

标签:面试题,Vue,get,44,set,Proxy,key,defineProperty,拦截
From: https://www.cnblogs.com/Mochenghualei/p/16865012.html

相关文章

  • 再来一次,新技术搞定老业务「GitHub 热点速览 v.22.44」
    上上周Next.js新版本火了一把,这不本周热点趋势就有了一个Next.js13新特性构建的网站,虽然它只是个实验性项目。同样可以搞定一些业务的还有lama-cleaner,不过它并不是......
  • 初识Vue
    模板的理解html中包含了一些JS语法代码,语法分为两种,分别为:1.插值语法(双大括号表达式)2.指令(以v-开头)插值语法1.功能:用于解析标签体内容2.语法:{{xxx}},xx......
  • 谈谈你对 vue 的理解
    whatvue vue是创建用户界面的js框架,是创建spa应用的框架;使用mvvm数据驱动视图模型,后端数据和页面解构分离,后端处理数据,动态显示页面;采用组件化模式,提高代码......
  • Vue-computed计算属性
    转载于:https://blog.csdn.net/qq_25015861/article/details/123610969作者:冰咖啡iii本文只做学习参考; computed计算属性1、什么是计算属性计算属性本质是方法,只是......
  • vue $nextTick方法
    $nextTick方法问题:异步代码没有执行,但是同步代码已经完成逻辑,所以就需要使用$nextTick来等待dom完毕后再执行同步代码解决方法:使用nextTick()等待dom更新完毕后,在......
  • 初识vue3
    Vue3vue3安装vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatemyv3##启动cdmyv3npmrunservevue3特点新增组合式api......
  • 10.Vue中常用的第三方组件
    第三方插件可以增强vue,帮助我们更好的开发项目,如axios,vuex,vue-router,elementui等我们可以自定义插件,步骤如下:在vue项目下的src文件夹下创建plugins文件夹,创建一个i......
  • python面试题汇总
    一基础阶段1数据类型:python数据类型:int/float/str/bool/list/tuple/set/dict可变类型(可以修改元素):list,dict,set不可变类型:int,float,bool,str,tuple2数据类......
  • Vue3 用keep-alive实现tab页缓存
    一般国产味道的后台界面,都会有一个类似于浏览器tab标签的东西大概就是这样的,可以点击标签切换不同的路由,并且不丢失之前录入的数据。但是vue-router默认是不支持该操......
  • vue 自定义v-model
    怎么通过子组件修改父级组件的表单组件v-model绑定的变量。其中,子组件这样写,通过@input事件(这个事件主要用于监听,只有输入值变化了就会触发input),然后触发修改父组件的sel......