首页 > 其他分享 >vue 的响应式原理

vue 的响应式原理

时间:2022-10-17 19:11:05浏览次数:64  
标签:vue 视图 响应 依赖 原理 数据 setter

通过 Obejct.defineProperty 定义数据,给数据加上 geter 和 setter ,获取数据和触发 getter 设置数据触发 setter ,从而实现数据的监听 ;

通过发布订阅模式进行依赖收集与视图更新 ;

 

想完成这个响应式,我们需要:

  • 侦测数据的变化

  • 收集视图依赖了哪些数据

  • 如果视图的依赖数据发生改变 ,视图自动更新

对应专业术语分别是:

  • 数据劫持 / 数据代理

  • 依赖收集

  • 发布订阅模式

标签:vue,视图,响应,依赖,原理,数据,setter
From: https://www.cnblogs.com/zhulongxu/p/16800276.html

相关文章

  • vue3中的defineProps,watch,computed
    在vue3的setup语法糖中,defineProps不需要引入了<scriptsetup>import{computed}from'@vue/reactivity';import{onMounted,watch}from'vue';letprops=de......
  • Java JDK 动态代理(AOP)使用及实现原理分析
    目录​​一、什么是代理?​​​​二、Java动态代理类 ​​​​三、JDK的动态代理怎么使用?​​​​四、动态代理怎么实现的?​​​​五、结论​​一、什么是代理?代理是一种常......
  • @vitejs/plugin-vue
      需要cmd命令下载,我指定的版本是1.0.0,这里需要的node版本的要>=12.0.0 而我的vue版本是3.04>npmi@vitejs/[email protected] 以下的@vitejs/plugin-vue的......
  • vue项目Eslint和prettier结合使用
    一、eslint介绍——代码语法检查工具Eslint是一个代码检查工具,用来检查你的代码语法是否符合指定的规范,ECMAScript标准二、prettier插件——代码格式化工具prettier是......
  • 解决vuex刷新页面数据丢失问题(数据持久化)
    1、为什么刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是......
  • 11.0 Spring整合Mybatis原理
    一、整合核心思路由很多框架都需要和Spring进行整合,而整合的核心思想就是把其他框架所产生的对象放到Spring容器中,让其成为Bean,只要成为了Bean,在Spring项目中就能很方便的......
  • vue+elementui 的表格单元格内修改数据
    cellDbClick(row,column,cell,event){   varthat=this     event.target.innerHTML=''     varcellInput=document.createElem......
  • vue中 动态改变CSS样式
    需求:我想要动态改变css样式。我当前的应用场景:如果我用绝对定位给每个标签添加一个‘*号’,但是每个标签所需‘*号’的位置需要不一样,我希望写一个css样式,来迎合不同的尺寸......
  • 记录--图解 Vue 响应式原理
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助最近部门分享,有同学提到了Vue响应式原理,大家在讨论时,发现一些同学对这一知识理解还不够深入,不能形成......
  • vue-10 router路由
    配置:安装使用npminstallvue-router添加路由配置文件,例router.js并在文件中进行路由配置将路由配置添加到main.js中的vue对象使用路由router.js文件//1、引入基......