1_认识vue；2_劫持原理；3_指令+key；4_key的作用

原创 已于 2023-05-20 12:43:23 修改 · 73 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2021-04-05 12:47:34 首次发布
本文介绍了Vue3.0的劫持原理，探讨了Vue中的指令和key的使用，如v-cloak、v-pre以及diff算法在更新DOM时如何比较节点。key在Vue中用于标识唯一性，避免因元素复用导致的问题。同时，文章还提到了data和methods的区别，data中的属性会被劫持，而methods中的方法确保了this的指向。

1_认识vue

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2_劫持原理

在这里插入图片描述
在这里插入图片描述
vue3.0采用的方式
在这里插入图片描述

3_指令+key

属性选择器，vue渲染完成之后，会把v-cloak移除掉
在这里插入图片描述
加上v-pre之后vue解析的时候就不看了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
diff算法先会虚拟dom进行比较，先比较key是否一样，一样的话直接复用，不一样再比较标签往下依次判断
在这里插入图片描述
在这里插入图片描述
用index做key，因为index总是从0到length-1，如果删除了一项，有可能出现删除项key和元素key重复的问题，出现元素复用出现一些问题
v-once只渲染一次

4_key的作用

data中的属性都会被劫持，methods中的方法不会，最后都会被挂载到vm实例上，data中也能写函数，也会正常执行，如果跟methods中的方法名重复会报错，但是data中定义的函数体内的this指向不确定，因为他先会被劫持再挂载，methods中的函数中this指向vm实例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Vue2与Vue3响应式原理对比
qq_40792800的博客
08-11 2343
因为Vue3重新改写了底层响应式原理，那我们大胆猜测一下，Vue3 应该修复了 Vue2.x 版本的问题，也就是说 Vue3 能够直接监听到对于对象的新增属性或删除属性，同时还能直接通过数组下标来操作数组，或通过 length 属性直接改变数组长度，而不用依赖于 $set 方法、$delete 方法或 splice 方法。上面说到了 在 ref函数中如果接收了一个对象，且需要深层响应的话，就会调用 reactive 函数来进行响应式转化，那我们现在来看看 reactive 函数转化响应式数据的原理。
【Vue知识点】——Vue2和Vue3的数据劫持
m0_50785976的博客
10-21 2314
Vue2的Object.defineProperty和Vue3的Proxy实现数据劫持
vue key重复_前端面试题——Vue
weixin_39942492的博客
11-20 344
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articles)，然后现在也是找了一些在 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴。如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过。以下 ↓1. 说一下...
Vue2及vue3原理
yecengxiangshi0426的专栏
06-30 642
根据key在this.cache中查找，如果存在则说明之前已经缓存过了，直接将缓存的vnode的componentInstance（组件实例）覆盖到目前的vnode上面。否则将vnode存储在cache中。如果没有命中缓存，即该组件还没被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中。命中缓存时会直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个。
vue2和vue3响应式原理的区别
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
09-06 7748
vue2和vue3响应式原理的区别
vue2和vue3的响应式原理
m0_51429350的博客
05-13 1589
Vue 2 的响应式原理是其核心特性之一，通过 数据劫持 和 发布-订阅模式 实现数据驱动视图更新。以下是 Vue 2 响应式原理的详细解析，涵盖其核心机制、实现细节以及实际应用中的限制。Vue 2 的响应式系统基于以下两个核心概念：数据劫持（Data Observe）：发布-订阅模式（Pub/Sub）：Vue 2 通过递归遍历对象的所有属性，使用 将每个属性转换为响应式属性： 2.Dep 类（依赖管理器） ：存储所有订阅者（Watcher）。 ：添加订阅者。 ：通知所有订阅者执行 。
vue2 响应式原理：1.数据劫持
qq_56459071的博客
12-07 968
下面是一个简化版的实现示例，帮助理解 Vue 2 数据劫持的基本机制：这个简化示例展示了 Vue 2 的核心响应式原理，但省略了很多细节和优化，比如数组的处理、深度嵌套对象的处理、计算属性和侦听器的实现等。Vue 会在 getter 中收集当前依赖（即当前的组件渲染函数或计算属性），并将其存储在一个叫做“依赖收集器”（Dep）的容器中。Vue 2 利用这一特性，对响应式数据进行劫持，从而能够在数据变化时自动触发视图更新。// 将当前实例设置为 Dep.target，以便在 getter 中收集依赖。
【Vue2+Vue3】开发指令使用总结，未完待续
BMG-Princess
05-11 9127
一、watch监听及深度监听 二、directive自定义指令详解+实例 三、vue父子组件中数据双向绑定的几种方法 四、Message消息提示每次只弹出一个 + 设置全局message弹框的格式 五、什么是重定向 六、为什么要进行重定向？什么时候需要重定向？ 七、HTTP协议详解之响应篇 八、export与export default区别 九、路由传参-使用encodeURI加密参数 十、base64格式的加密与解密 十一、vite 十二、快速生成vue3代码模板.....................
vue监听值有变化后调用接口_探索 Vue.js 响应式原理
weixin_35600779的博客
01-26 2306
提到“响应式”三个字，大家立刻想到啥？响应式布局？响应式编程？ 从字面意思可以看出，具有“响应式”特征的事物会根据条件变化，使得目标自动作出对应变化。比如在“响应式布局”中，页面根据不同设备尺寸自动显示不同样式。Vue.js 中的响应式也是一样，当数据发生变化后，使用到该数据的视图耶会相应进行自动更新。接下来我根据个人理解，和大家一起探索下 Vue.js 中的响应式原理，如有错误，欢迎指点 ~~一...
Vue 的双向绑定原理，Vue2 和 Vue3 双向绑定原理的区别
2203_75479159的博客
05-06 1174
Vue 的双向绑定（Two-way Data Binding）是其核心特性之一，其本质是通过结合实现的。
深入浅出：Vue2 数据劫持原理剖析
2301_81137804的博客
07-01 870
在 Vue2 的响应式系统中，数据劫持（Data Hijacking） 是最核心的机制之一。正是通过这种技术，Vue 能够自动追踪数据变化并更新视图。本文将深入讲解 Vue2 中数据劫持的实现原理。
深入浅出 Vue 系列 -- 数据劫持实现原理
10-17
深入浅出 Vue 系列 -- 数据劫持实现原理 数据劫持是 Vue 框架核心功能之一，它使得开发者能够轻松地实现数据的双向绑定。在本篇文章中，我们将深入探讨 Vue 实现数据劫持的原理，并对其实现细节进行剖析。 一、...
Vue思考题_03Vue响应式原理
qq_43260366的博客
11-26 898
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；需求：现在有如下代码，希望person对象存在一个age属性，属性值为number变量的值且 number值与age属性值能够实时双向绑定。所以在vue2.x中有时会出现双向绑定失败(实例化对象中的数据改变了，但是视图上并没有重新渲染)的现象-可以使用。在vue2.x中数据双向绑定的核心是使用。在vue2.x中数据双向绑定的核心是使用。
【无标题】实战：Vue3 + Element Plus 实现树形选择器全量预加载与层级控制
weixin_43699654的博客
12-17 693
本文实现的「树形选择器全量预加载」方案
elementplus组件中el-calendar组件自定义日期单元格内容及样式
m0_62508027的博客
12-18 176
el-calendar自定义日期单元格的内容
Vue Router：官方路由解决方案解析
刘一说的IT专栏
12-16 1882
Vue Router作为Vue官方路由解决方案，深度集成Vue核心特性，提供响应式路由匹配、组件级路由控制和声明式导航编程模型。其优势包括路由懒加载、导航守卫、滚动行为控制等性能优化功能，以及与Vue DevTools、Vuex和TypeScript的生态协同。相比React Router和Angular Router，Vue Router学习曲线更低，动态路由和代码分割支持更完善。作为Vue生态的核心基础设施，Vue Router通过极简API设计和与Vue的无缝协作，成为构建SPA的最佳路由选择。
基于java + vue物流信息管理系统(源码+数据库+文档)
最新发布
JIngJaneIL的博客
12-20 260
本文介绍了一个基于SpringBoot+Vue的物流信息管理系统，包含系统功能演示、技术选型（SpringBoot后端框架、Vue前端框架、MySQL数据库）、代码参考示例、测试用例及最新计算机毕设选题推荐。系统采用分层架构设计，遵循用户友好的界面原则，提供完整的源码获取方式。该项目经过博主严格测试验证，可作为毕业设计参考项目，适合Java和Web开发学习者使用。
12.15 element-plus的一些组件（上）
2503_92841156的博客
12-17 253
headers: {axios({url: url,data: pic,})
使用帧加载解决页面白屏问题
马优晨
12-17 177
本文介绍了一种优化页面加载性能的方案，通过使用requestAnimationFrame API实现组件分批加载。核心思路是创建一个useDefer.js工具函数，利用浏览器动画帧控制组件加载节奏。在APP.vue中，通过v-for循环渲染100个HeavyComp组件，但每个组件只在defer(n)返回true时才会渲染，实现组件按顺序分帧加载的效果。这种方法能有效避免一次性加载大量组件导致的白屏问题，提升用户体验。代码示例展示了具体实现方式，包括工具函数封装和组件条件渲染的应用。
vue2中target.__ob__.value指的是啥
08-04
在 Vue2 中，`target.__ob__.value` 是响应式系统中一个关键的属性，用于访问被 `Object.defineProperty` 劫持的对象的原始值。具体来说，`__ob__` 是 Vue 在数据对象上添加的一个属性，用来存储一个 `Observer` 实例。这个 `Observer` 实例负责将数据对象转换为响应式的，并且包含了一些必要的属性和方法来管理数据的依赖收集和更新通知。 `target.__ob__.value` 通常指向原始的数据对象，即 `target` 本身。这是因为在 Vue 的响应式处理过程中，`Observer` 实例会被附加到原始数据对象上，并且 `__ob__.value` 被设置为指向原始数据对象，以便在需要时能够访问到它。 ### 数据劫持与响应式处理 在 Vue2 中，数据的响应式处理是通过 `Object.defineProperty` 实现的。当一个数据对象被传入 Vue 实例的 `data` 选项时，Vue 会遍历该对象的所有属性，并使用 `Object.defineProperty` 对它们进行重新定义。这样做的目的是在属性被访问时收集依赖，在属性被修改时触发更新。 在这个过程中，Vue 会为每个被观测的对象添加一个 `__ob__` 属性，该属性是一个 `Observer` 实例。`Observer` 类负责管理数据对象的响应式特性，包括依赖的收集和更新的触发。`__ob__.value` 则用于保存原始的数据对象，以便在需要时能够访问到它。 ### Vue.set 的作用 对于 Vue2 中的 `Vue.set()` 方法，它提供了一种机制，使得我们可以在已经创建的 Vue 实例上添加新的响应式属性。由于 Vue 无法检测到对象属性的添加或删除，因此直接给对象添加新属性不会触发视图的更新。为了实现这一点，可以使用 `Vue.set()` 方法来确保新添加的属性也是响应式的。 ```javascript Vue.set(target, key, value); ``` - `target`: 目标对象，通常是 Vue 实例上的一个数据对象。 - `key`: 要添加的新属性的名称。 - `value`: 新属性的值。 通过 `Vue.set()` 添加的属性会被正确地转换为响应式的，并且能够触发视图的更新。这背后的工作原理同样依赖于 `__ob__` 属性，因为 `Vue.set()` 会检查目标对象是否已经被观测，并利用 `Observer` 实例来确保新属性的响应式特性[^1]。 ### 依赖收集与更新通知 在 Vue2 的响应式系统中，`Dep` 类用于依赖收集，而 `Watcher` 类用于视图更新与依赖更新。当一个组件的模板中引用了某个数据属性时，Vue 会在该属性的 `getter` 中收集依赖，这个依赖通常是当前组件的渲染 `Watcher`。当数据属性发生变化时，`setter` 会通知 `Dep`，然后 `Dep` 会通知所有相关的 `Watcher` 进行更新[^3]。 ### 总结 `target.__ob__.value` 是 Vue2 响应式系统中用于访问原始数据对象的一个属性。它通过 `Observer` 实例来管理数据的响应式特性，确保数据的变化能够被正确地检测到并触发视图的更新。同时，`Vue.set()` 方法也是基于这一机制来实现新属性的响应式添加。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值