关于Vue响应式原理的一点思考

最新推荐文章于 2023-08-06 14:05:34 发布

我要你好好的。

最新推荐文章于 2023-08-06 14:05:34 发布

阅读量109

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_43845044/article/details/106864220

版权

本文是作者阅读Vue官方文档后对响应式原理的思考。通过实验对比，揭示了Object.assign在不同情况下对Vue响应式的影响。当对象初始化为空或已有属性时，Vue如何添加getter/setter并实现响应式更新。作者提出，Vue采用的是套娃式监听，当对象引用改变时，会为新对象的所有属性设置getter/setter，确保视图的同步更新。

摘要由CSDN通过智能技术生成

以下是看Vue官方文档的一点笔记及思考
在这里插入图片描述

关于这两种Object.assign的方法，乍一看很迷惑，我寻思着效果不是一样吗？不信你看下面的实验：

其实单独看这两种操作，就是把地址变了一下，地址对应的内容是一样的，但一个地址对应的数据可全部响应，一个则只能响应旧数据。为了看看到底咋回事，我就去现场试了试，结果还真是！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我要你好好的。

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue的响应式原理

qq_25346499的博客

10-16

202

Vue的响应式原理 Tips：根据coderwhy老师的讲解写的通过数据劫持和发布者-订阅者模式来实现。一旦发现属性发生改变就通知订阅者，触发相应的回调，来改变视图。一、数据劫持(Observer) Observer实现对vue各个属性进行监听通过Object.defineProperty方法(定义属性)来劫持属性的getter和setter，监听属性的改变和获取依赖(谁在使用这个值)。 Object.defineProperty方法有三个参数，第一个是对象，第二个是key，第三个是value。可以

浅谈vue响应式原理

Bigfishseasugar

07-14

252

以下只是个人在学习过程中的总结，原理大概了解了一番，把自己的理解写在了概述里。但是看源码的时候就一脸懵逼，后续有更深入的理解再回来完善（捂脸），如有疏漏，欢迎指出。预备知识首先需要明白两个概念： Object.defineProperty(obj , prop , descriptor) 观察者模式（又名，发布者订阅者模式） Object.defineProperty 该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。三个参数分别表示：要定义属性的对.

参与评论您还未登录，请先登录后发表或查看评论

vue框架怎么做响应式_浅谈 Vue 框架中的响应式原理

weixin_39986178的博客

01-30

430

浅谈 Vue 框架中的响应式原理众所周知, 这几年前端发展的非常迅速, 涌现了好几大不错的框架体系, 其中 vue.js 以入门门槛低实用性高深得广大前端喜爱. 今天我们就谈谈 vue.js 框架的核心 -- 响应式系统说到响应式系统, 它的原理核心来自于 Object.defineProperty, 相信大多数人都认识它, 但今天也要基本的介绍介绍一下它.我们可以看看官方的介绍:然后我们在看看它...

Vue3_对响应式对象解构赋值之后失去响应性——toRefs()

最新发布

2201_75783276的博客

08-06

1977

在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用。1 当对一个响应式对象进行es6的解构赋值之后，它将失去响应性。可以看到点击修改name的时候，数据变了，但是页面却没有更新。2 可以使用vue的toRefs()方法，对对象进行解构。即可看到数据修改了以后，页面做出了响应。

vue2 操作响应式变量时需要注意！ 响应式变量失去响应性

柑橘乌云_

06-07

1164

以上7中API会修改原数组(vue2的内部重写了这7个API)为了解决第一类问题，以下两种方式都可以实现和。为了解决第二类问题，你可以使用。实例方法，该方法是全局方法。其他的操作都不会有响应式。

简述Vue的响应式原理

任她雨雪风晴

02-27

2814

当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。巴拉巴拉： ==...

超详细Vue3响应式原理介绍加源码阅读

weixin_47042983的博客

02-03

2753

本章介绍Vue中另一个非常重要的模块，响应式。介绍了基本原理（含图）简单实现以及如何阅读源码。

硬核Vue3响应式原理解析，为你保驾护航渡过寒冬

Talljack 的博客园

11-18

791

我知道学习vue3源码比较困难，所以在这里写了抽取了一个vue3响应式原理的核心代码，写成一个小demo，硬核代码，希望对你有帮助

Vue底层实现原理 - 深入响应式原理

极客不撩妹

08-06

1032

深入响应式原理写在前面如何追踪变化检测变化的注意事项对于对象对于数组声明响应式 property异步更新队列写在前面本篇是Vue底层原理的学习笔记，想要用好一个工具，最重要的就是能理解他的内在原理，所以在用了Vue小半年后，我决定好好研究一下Vue的响应式原理。如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter

Vue如何实现响应式系统

12-10

vue响应式原理以数据劫持方式，拦截数据变化；以依赖收集方式，触发视图更新。利用es5 Object.defineProperty拦截数据的setter、getter；getter收集依赖，setter触发依赖更新，而组件render也会变为一个watch

vue的响应式原理

垂耳兔的博客

04-28

8783

一、reduce 1.数值的累加作用：将****前一项*和*后一项****的值进行运算，返回累积的结果格式：数组.reduce（function（prev，next）{…}）其中，prev表示前一项，next表示后一项。运算规则：默认情况下，会把数组的第一个元素作为prev的初始值。每循环一次，把累积的结果赋给prev，next就变为下一个数组元素 var arr3 = [10,22,23,25,50]; const total = arr3.reduce(function(pre,ne

vue解构赋值_vue.js 3.0响应式系统原理实现

weixin_34238178的博客

12-17

1208

1）Vue.js 响应式回顾Proxy 对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和 length 属性可以作为单独的模块使用2）Proxy'use strict' // 问题1： set 和 deleteProperty 中需要返回布尔类型的值 // 在严格模式下，如果返回 false 的...

谈谈 vue 响应式原理

push

03-16

476

Vue 是一个 MVVM 框架，核心是双向数据绑定，VM（视图模型）是作为 V（视图）和 M（模型）的桥梁。下面是对 Vue 响应式（双向数据绑定）的理解，如果错误尽请指出，一起交流，共同进步。 Vue响应式原理核心是数据劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。从一个例子出发： <template> ...

React踩坑之useState的两次渲染

weixin_43845044的博客

07-11

7188

问题背景，函数组件中使用useState后，console.log发现组件重复渲染。一开始我以为是useState的问题，经查验，发现是index.tsx里<React.StrictMode>的坑 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); 以下内容，摘自react官网，如果你很忙可

Echarts数据实时更新

weixin_43845044的博客

06-15

6351

转载原博链接最近用饼图做每个月的消费占比，出现了更新月份，两个月数据合并了的bug，一开始以为是逻辑错了，可是检查逻辑又没啥问题，后来多次测试，才发现是Echarts数据不随data实时更新，而是直接合并。解决原理以及方案：官方文档setOption方法传参如下： setOption(option, notMerge, lazUpdate) 可以看到第二个参数，表示合并，这里表示是否option合并数据，默认值为false，这就是为什么数据源条数变化了，而图表数据条数缺没发生变化，正确姿势是setO

修改ant design组件自带样式

weixin_43845044的博客

06-05

5442

背景 Vue-CLI创建的项目需求把走马灯的面板指示点（如图1）改成真正的点（如图2）解决方法走马灯自带面板指示点类名dotsClass = "slick-dots"，考虑到项目中可能多处会用到走马灯，请自行更改类名（我的项目只有一处用到，故不想改）在src/assets/style/（这个是我用来放全局样式文件目录）下新建一个.css文件（其它类型的stylesheet文件也可以用，但我没试过），再次强调，如同一组件须多次使用、且样式要求不同，请自行更改类名，样式文件也请分开创建，注意互相

关于ant-design-vue安装报错的解决方法

weixin_43845044的博客

06-04

4991

版本 Vue-CLI@4.3.0 Less-Loader@6.1.0 解决方法在vue.config.js里加入解决~ module.exports = { + css: { + loaderOptions: { + less: { + lessOptions: { + javascriptEnabled: true + } + } + } + } } 下面是我的吐槽，可以不看说来也是无语，按照官

Vue项目中TS引入多个.svg文件的总结

weixin_43845044的博客

06-19

2192

背景： Vue-CLI创建的项目，想要用自定义的icon，icon是在阿里icon-font下载的svg文件，直接使用import xxx from '@/assets/icons/xxx.svg'TS编译报错，称无法找到此模块（插播一条小百科：svg 是使用 XML 格式定义图像）。 StackOverFlow上有人提出，在项目文件中添加一个custom.d.ts的文件，写上以下内容： declare module '*.svg'{ const content: string; export de

Vue前端面试指南：高频面试题与算法解析

- **响应式设计**：理解viewport、媒体查询等在实现响应式布局中的作用。 3. **CSS**： - **盒模型**：理解不同盒模型（W3C与IE）的差异。 - **布局技术**：了解Flexbox和Grid布局的基本概念及应用。 - **CSS预...