首页 > 其他分享 >vue2和vue3的响应式区别

vue2和vue3的响应式区别

时间:2023-02-17 11:47:04浏览次数:39  
标签:get 对象 代理 Reflect 响应 vue2 vue3 属性

vue响应式依赖的函数

vue2

vue2中依赖es5的Object.defineProperty 属性,该方法可以在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。监听的是对象的属性值。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj: 要在其上定义属性的对象。
prop: 要定义或修改的属性的名称。
descriptor: 将被定义或修改的属性的描述符。

 vue3

vue3中依赖的是es6的proxy和Reflect属性。

  Proxy(代理) 可以创建一个代理对象。它能够实现对其他对象的代理,Proxy 只能代理对象,无法代理非对象值,例如字符串、布尔值等。类似于一个拦截器,所有关于该对象的操作都会先经过proxy的代理。

  Reflect(反射)1.进行队原数据的数据操作。防止js的单线程将框架卡死。可以通过Reflect的返回值来判断是否成功,防止出现大量的try catch。

语法

let proxy = new Proxy(target, handler)

参数

target —— 是要包装的对象,可以是任何东西,包括函数。
handler —— 代理配置:带有“钩子”(“traps”,即拦截操作的方法)的对象。比如 get 钩子用于读取target属性,set 钩子写入 target 属性等等。

原理
let proxy = new Proxy (object ,{ 
    get(a,b) { return Reflect.get(a,b) }    // a是object的原对象, b是操作的属性。用 a[b]获得对象劫持代理
    set(a,b,c) {return Reflect.get(a,b,c) }  // a是object的原对象, b是操作的属性, c是修改的值,用 a[b] = c 来改变原数据的值。 修改,增加都是依靠set
 })
 // 修改删除类似操作进行数据劫持

 

标签:get,对象,代理,Reflect,响应,vue2,vue3,属性
From: https://www.cnblogs.com/kongxudeshenghuo/p/17129353.html

相关文章

  • 2023前端开发最新面试题收集-Vue2/3篇
    Vue整理1、谈谈MVVM的理解MVC(react):数据流是单向的,View和Model之间通过controller连接通信,用户操作会请求服务器,路由拦截分发请求,调用对应的控制器controller,控制器会......
  • Vue3+vite项目在局域网内通过ip在手机端访问
    使用vite启动项目后,想在手机端访问项目,此时是访问不到的在网上查阅了相关内容,小结一下1.修改vite.confifg,js(未使用ts,使用的修改vite,config.ts)exportdefaultdefineCo......
  • vue2 - 目录
    vue2-模板语法插值语法,属性单向绑定,属性双向绑定,v-clock,v-text,v-html,v-once,v-prevue2-事件,事件的绑定,事件属性,键盘事件vue2-计算属性,计算属性简写,监听属性,深度监......
  • vue2 - 绑定class,绑定style
    1.绑定class样式字符串写法:适用于类名不确定,要动态获取数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。对象写法适用于:要绑定多个样式,个数不确定,名字......
  • vue2 - 计算属性,计算属性简写,监听属性,深度监听,监听属性简写,两个重要的小原则
    1.计算属性<divid="root">性:<inputtype="text"v-model:value="firstName"><br>名:<inputtype="text"v-model:value="lastName"><br>全名:<span>{{full......
  • vue3+vant中自定义隐藏DropdownMenu下拉菜单
    一、概述需求:当点击确定按钮时隐藏下拉菜单。主要使用的方法:ref标识当前组件van-dropdown-item,当点击确定按钮时通过getCurrentInstance来获取组件身上的属性方法。......
  • vue3实现动态路由配置
    思路:1、登录成功后,返回动态的路由信息,存储在本地localStorage中。2、router.js中在路由守卫钩子函数中使用router.addRoute()进行动态路由添加。具体代码: login.vue......
  • vue3+jsx+antd项目,ant design vue组件中日期组件的自定义格式
    目标效果实际效果关键代码,直接从react版本的antd复制的代码,并修改了,current加上了moment(current)<DatePickerdateRender={current=>{conststyle......
  • Vite创建Vue3项目识别 ../ 与 @/ 引入路径失效解决方案
    Vite创建Vue3项目识别../与@/引入路径 在使用vite脚手架生成项目时,会出现一些引入路径失败的错误例子:router中用component引入路径时引入../路径失败找不......
  • 一次学俩Vue&Blazor:1.4基础-响应式数据
    一、声明式编程和响应式数据1、声明式编程逻辑层修改视图层元素属性值的方式有两种,一是命令式,先通过getElementById等方法获取元素对象,然后再修改对象的属性;二是声明式......