0
点赞
收藏
分享

微信扫一扫

Vue3响应式原理及如何使用

律楷粑粑 2022-03-14 阅读 57

在Vue3中的响应式与Vue2中响应式原理有着些许不一

在Vue2中,Vue实现的底层是通过Object.defineProperty()方法把数据设置为getter和setter的访问形式,这样我们就可以在数据被修改时在setter方法设置监视修改页面信息,也就是说每当数据被修改,就会触发对应的set方法,然后我们可以在set方法中去调用操作dom的方法。

在Vue3中,响应式ref(基本数据类型)中处理采用的是Object.defineProperty 中的set 和get方法,复杂数据类型采用的是proxy(内部求助了vue3.0的新函数reactive()函数)
Proxy 比Object.defineProperty 多了一个 deleteProerty 实现删除
通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等。
通过Reflect(反射):对被代理对象的属性进行操作。

在Vue3中怎么进行响应式开发呢?
如下:

 	import {ref ,reactive} from 'vue'
 	export default {
        name: '',
 		setup(){
  		 let num =ref(30)    // 基础数据类型用ref
		 let obj = reactive({   // 复杂数据类型用reactive
    		 a:{
    		   b:{
     		    c:'嘿嘿'
    		     }
   			  }
 		  })
   return {
     num,
     obj
 
   }
 }
};
举报

相关推荐

0 条评论