vue响应式原理

最新推荐文章于 2024-03-20 15:09:34 发布
最新推荐文章于 2024-03-20 15:09:34 发布
阅读量53 收藏
点赞数
分类专栏： vue源码学习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjiakang12306/article/details/120754341
版权
  • 发布订阅模式
    • 消息中心DEP
    • 订阅者subscribe
    • 发布者publisher
    • 发布订阅模式
      • 由发布者订阅者和消息中心组成，适合消息事件更复杂的场景使用
      • 特性：特殊事件发生后，有发布者向消息中心发布指令，消息中心会根据指令向不同的订阅者发布信息
  • 观察者模式
    • 观察者模式是由观察者和被观察者组成，适合组件内部使用
    • 特性：特殊事件发生后，观察目标统一通知所有观察者

 

vue响应式模式流程

  1. vue
    1. 目标：将data注入vue实例，方便方法内操作
  2. observe（发布者）
    1. 数据劫持，监听数据变化，并在变化时通知dep
  3. Dep（消息中心）
    1. 存储订阅者，管理消息的发送
  4. watcher（订阅者）
    1. 订阅数据发生变化时，更新视图
  5. compiler（）
    1. 解析模板中 的指令和差值表达式，替换成响应的数据

  • vue类
    • 功能
      • 接受配置信息
      • 将data的属性转换成getter和setter，并注入vue实例中
      • 监听data中所有属性的变化，设置成响应式数据
      • 调用解析功能（解析模板内的差值表达式和指令等）

小孩不能抽烟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE响应式原理
qq_42489251的博客
10-15 1319
Vue的响应式原理核心是通过ES5的保护对象的Object.defineProperty中的访问器属性中的get和set方法，data中声明的属性都被添加了访问器属性，当读取data中的数据时自动调用get方法，从实际保存数据的半隐藏属性中，读取出现在的属性值，return外部；自动调用set方法，检测到数据的变化，会通知观察者Watcher，观察者Watcher自动触发重新render当前组件（子组件不会重新渲染），生成新的虚拟Dom树，Vue框架会遍历并对比新虚拟DOM树和旧虚拟DOM树中每个节点的差别
详细分析vue响应式原理
10-15
主要介绍了vue响应式原理的的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
Vue响应式原理
星河梦~的博客
03-25 3934
Vue 最独特的特性之一，是其非侵入性（不用调用Vue的api来实现数据更新）的响应式系统。 响应式：即数据改变，对应的视图也会改变。 响应式原理：采用数据劫持结合发布-订阅模式的方式，通过Object-defineProperty()来劫持data里面各个属性的setter和getter，在数据变动的时候，发布消息给订阅者，触发相应的监听回调。 Object.defineProperty()可以直接在一个对象上定义一个新的属性，或者修改一个对象的现有属性，并返回此对象。还可以设置一些额外隐藏的属性（例如是
深入理解Vue响应式原理
qq_44588612的博客
06-09 7605
本文，由浅入深，详细讲述了Vue响应式原理
理解VUE响应式原理
buler_sky的博客
11-23 2586
1、响应式原理基础 响应式原理基础是基于Object.defineProperty(obj, prop, descriptor),descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法（可以收集依赖），设置属性值时触发set方法（更新依赖）。 扩展：上面是vue2.0的基础原理，vue3.0的基础原理是： 2、核心对象：Dep与Watcher Dep: vue在data里申明的每一个属性都会生成一个Dep的实例对象，De...
简述vue响应式原理
aXin_li的博客
08-09 3099
vue官方阐述：https://cn.vuejs.org/v2/guide/reactivity.html 响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。 在具体实现上，vue用到了几个核心部件： Observer Dep Watcher Scheduler Observer Observer要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象 为了实现这一点，Observer把对象的每个属性通过Object.defineProper.
浅谈Vue响应式原理
热门推荐
XinKun的博客
02-02 2万+
一、Vue中的响应式 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 二、响应式的基本原理 1.通过Object.definePropert来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持 2.观察者模式（发布者-订阅者） 观察者(订阅者) – Watcher： update()：当事件发生时，具体要做的事情 目标(发布者) – Dep: ①subs 数组：存储所有的观察者 ②
Vue响应式原理全解析
最新发布
CRMEB小程序商城的博客
03-20 672
大家好，我是程序员蒿里行。浅浅记录一下面试中的高频问题，请你谈一下Vue响应式原理。必备前置知识，​​Vue2​​官方文档中​​深入响应式原理​​​及​​Vue3​​官方文档中​​深入响应式系统​​。响应式本质是当数据变化的时候，会自动执行一些相关函数。price: 2,amount: 3假设去水果店买苹果，价格为两元，买三个，总价是六元。但是苹果价格调整后，我还得重新计算一遍总价，即调用totalPrice函数。
面试官：说说Vue响应式原理
前端、python爱好者
09-16 5658
Vue2和Vue3的响应式原理 前言： vue2的响应式原理主要使用的是Object.defineProperty( ),里面需要传入三个参数，分别是： 【响应源数据的对象，源数据中的需要读写的属性，相对应的对象方法（包含了get和set方法）】 vue3的响应式原理主要依靠的是ES6新增的Proxy方法，需要在Proxy的实例对象中传入两个参数 【源数据对象，处理对象的方法【get,set,deleteProperty…等】 从自己个人来说vue3感觉比vue2更简单了，很多方法封装的更方便使用可以直接在
详解Vue响应式原理
嘿嘿
09-27 1076
摘要：搞懂Vue响应式原理！ 作者：浪里行舟 原文：深入浅出Vue响应式原理 Fundebug经授权转载，版权归原作者所有。 前言 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。----官方文档 本文将针对响应式原理做一个详细介绍，并且带你实现一个基础版的响应式系统。本文的代码请猛戳Github博客 什么是响应式 我们.
Vue响应式原理详解
11-29
然而，Vue响应式系统有一些限制。首先，它无法检测到对象属性的动态添加和删除。这意味着在Vue实例初始化后，如果想要添加新的响应式属性，必须使用`Vue.set`或者实例上的`$set`方法。例如： ```javascript Vue.set...
vue响应式原理.pdf
04-19
响应式原理：在读取属性的时候收集依赖，在改变属性值的时候触发依赖的更新 实现一个observer，劫持对象属性的getter和setter 实现一个全局的订阅器Dep，可以追加订阅者，和通知依赖更新 在读取属性的时候追加当前...
Vue响应式原理Observer、Dep、Watcher理解
01-19
相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象，会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。...
vue响应式原理代码，手写简单vue
12-27
vue底层对象的响应式原理、观察者模式、数据劫持、数据代理、dep目标等vue底层知识 适合对vue和js有一定基础、并且能够熟练使用vue进行快速开发的程序员 主要包括以下文件: 1.index文件=>手写一个简单vue文件 2.vue...
浅谈Vue的响应式原理
10-16
让我们深入探讨Vue响应式原理及其底层实现。 首先，Vue采用的是MVVM（Model-View-ViewModel）架构模式。在Vue中，View层是DOM对象的HTML，ViewModel层是Vue实例的vm对象，而Model层则包含data、computed、methods等...
Vue响应式原理深入解析及注意事项
08-28
Vue.js的响应式原理是其核心特性之一，它使得数据模型与视图之间能自动保持同步，无需手动操作DOM。当数据发生变化时，Vue能够自动检测到这些变化，并更新对应的视图部分。这一机制主要是通过JavaScript的`Object....
vue响应式原理源码：带你一步精通vue
01-08
学过 vue 如果不了解响应式的原理，怎么能说自己熟练使用 vue，要是没有写过一个简易版的 vue 怎么能说自己精通vue，这篇文章通过300多行代码，带你写一个简易版的 vue，主要实现 vue 数据响应式 （数据劫持结合发布...
vue响应式原理面试题
07-27
Vue的响应式原理是通过使用Object.defineProperty()方法来实现的。在Vue中，通过将data对象传入Vue实例的data选项中，Vue会对data对象的所有属性进行递归地进行响应式处理。 具体来说，当访问data对象的某个属性时，Vue会将这个属性转化为getter和setter，并且在getter中收集依赖，在setter中触发更新。这样，当数据发生变化时，会自动通知依赖的地方进行更新。 在getter中，Vue会判断是否存在依赖收集目标（比如正在进行模板编译的Watcher），如果存在，则将该目标添加到属性的依赖列表中。而在setter中，当属性的值发生变化时，会遍历依赖列表，通知所有依赖进行更新。 此外，Vue还对数组和对象进行了特殊处理。对于数组，Vue重写了数组的原型方法，使其能够在调用这些方法时触发更新。对于对象，Vue会为每个属性创建一个新的响应式对象，并使用递归的方式处理嵌套对象。 总结起来，Vue的响应式原理通过getter和setter来实现数据的监听和更新，从而实现了数据驱动视图的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值