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

已于 2023-05-20 12:43:23 修改
阅读量29 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2021-04-05 12:47:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45849112/article/details/115421749
版权
本文介绍了Vue3.0的劫持原理，探讨了Vue中的指令和key的使用，如v-cloak、v-pre以及diff算法在更新DOM时如何比较节点。key在Vue中用于标识唯一性，避免因元素复用导致的问题。同时，文章还提到了data和methods的区别，data中的属性会被劫持，而methods中的方法确保了this的指向。
摘要由CSDN通过智能技术生成

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实例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

_MadD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入浅出 Vue 系列 -- 数据劫持实现原理
10-17
深入浅出 Vue 系列 -- 数据劫持实现原理 数据劫持是 Vue 框架核心功能之一，它使得开发者能够轻松地实现数据的双向绑定。在本篇文章中，我们将深入探讨 Vue 实现数据劫持的原理，并对其实现细节进行剖析。 一、...
15 分钟掌握vue-next响应式原理
12-13
在 vue-next 中，其实现原理和之前还是相同的，即通过观察者模式和数据劫持，只不过对其实现方式进行了改变。 对于解析原理的文章，我个人是比较喜欢那种“小白”风格的文章，即不要摘录特别多的代码，也不要阐述...
Vue 3.0双向绑定原理的实现方法
10-16
Vue.js作为前端开发中广泛应用的JavaScript框架，其核心功能之一便是实现了数据的双向绑定。...通过上述介绍的原理和代码实现，相信开发者可以对Vue.js的双向绑定有了更深层次的认识，并在项目开发中灵活运用。
vue2和vue3的区别以及常问的题
08-01
Vue2 和 Vue3 是两种不同的前端框架，它们之间存在许多差异，这些差异体现在双向数据绑定、生命周期钩子、指令用法等方面。在本文中，我们将详细地探讨 Vue2 和 Vue3 之间的差异，并对常见的问题进行解析。 一、...
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定原理解析 Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，...
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 269
【代码】Vue项目-Table添加Form表单校验。
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 194
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 239
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
monaco-editor自定义定制/扩展其他语言
m0_51431448的博客
08-12 79
目前monaco-editor内置有61种语言，但是只对css、html、json、typescript 支持的，功能也比较全。我们要是使用其他的语言比如javascript、java、sql等可能会报错，使用上面内置的四种语言之外的其他语言就需要我们自己定制、扩展了。如果有更多的可以自行扩展，monaco-editor中也都有对应语言的提示的自带的包，也可以自己编写逻辑哈。但是没考虑到语言的问题。我这边写了最常用的javascript、java、sql基础扩展支持。
Vue 3的Computed属性
计算机图形学
08-15 317
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
使用el-menu跳转时偶尔会出现路由已经变了，但是页面却显示空白的情况
qq_49080239的博客
08-15 199
我改的期间发现，是上一个跳转的组件如果出现template里包了多个标签，那么下一个组件就会变成空白。所以当你发现有一个页面跳转出错，但是怎么也找不到错误时，那你就去看看它的上一个跳转的页面是不是存在错误。刚开始我以为是我数据加载的问题，后来又看有人说是template里不能包多个div，但我去看我出错的组件，并没有出现两个div。后来我就把每个都给改了，即使是elemen-ui的标签也全部改在一个div里，就发现没问题了。
vue3中子向父传数据
最新发布
m0_61265297的博客
08-15 109
父组件首先，我们创建一个父组件，名为代码解释1，在 <template> 部分，我们展示父组件的数据 receivedData，并通过自定义事件 sendData 来接收子组件传递的数据。2，在 <script setup> 部分，我们引入了Vue3的 ref 来创建响应式变量 receivedData。3，updateData 方法用于更新接收到的数据。4，我们通过引入并使用子组件 ChildComponent，同时监听其 sendData 事件并调用 updateData 方法。
vue 3d echarts scatter3D元素塌陷，图标塌陷进地图完美解决方案
creatlh的博客
08-12 187
当我们手机用 scatter3D 类型时，最小值因为渲染问题会塌陷进模型里面，所以只要让value固定，再将label formatter 配合 boxHeight属性即可解决，（代码附带自定义label图标解决办法）
88.SAPUI5 Model Binding的问题-在view更改数据，model却不变
智盟科技智能制造团队的博客
08-15 186
在做一个UI5项目，后台读取sap.ui.model.Model后，把数据绑定到view的table里，在table更改数据，后台取sap.ui.model.Model后，数据没有改变，仍然保持当初从后台读取过来的值。后台同事问了一句，是不是和绑定模式有关。进而调查到model的最初绑定的代码段，果然发现绑定的是OneWay模式，更改后TwoWay后，问题得到解决。BindingMode双向意味着从模型到视图，反之亦然。BindingMode单向表示从模型到视图。我们研究了好长时间，没找到症结。
Vue中的路由与多种守卫常见问题及解决方案
zhaochen1127的博客
08-12 1107
Vue Router中的路由守卫主要分为三种类型：全局守卫、路由独享守卫和组件内守卫。全局守卫：作用于整个应用，包括beforeEach和afterEach。路由独享守卫：在路由配置中直接定义，只有进入该路由时才会触发，如。组件内守卫：定义在组件内部，包括和。路由守卫是Vue Router中一个强大的功能，能够帮助开发者在路由跳转前后执行重要的逻辑判断。然而，不当的使用和配置可能会引发一系列问题，如无限循环、守卫逻辑错误、守卫未正确触发以及异步处理不当等。
Vue2计算属性与Vue3的计算属性对比
qq_40792800的博客
08-12 486
但是这么写其实存在一个优化点，因为 Vue3 现在对于对象的响应式时通过Proxy代理实现的，是针对于对象的，现在可以直接删除或添加属性的同时还能实现响应式，而不用像Vue2一样还需要依赖 set、delete 等api。：允许开发者定义基于响应式数据的动态值。在Vue2 的例子中，我们改变了计算属性，同时响应式数据夜同步发生改变，我们现在在Vue3的语法中同样可以实现，且方法大致上和 Vue2 一致。上面说的是Vue2 和 Vue3 混用，现在我们来看看真正的Vue3的计算属性时怎么使用的。
【Vue3-Typescript】＜script setup lang=“ts“＞ 使用 ref标签 怎么获取 refs子组件呢
weixin_43343144的博客
08-13 263
注意：请确保子组件已经正确挂载，并且通过。暴露了您想要在父组件中访问的属性或方法。
@RequestParam @RequestBody @PathVariable 这三个注解对应的前端使用vue的http请求时不同的调用方式
QQ1817117243的博客
08-15 329
调用方式：通过查询参数或表单格式发送，适用于GET和POST请求。Vue表示：使用axios.get的params选项或在POST请求中拼接查询参数。调用方式：在请求体中以JSON格式发送数据，适用于POST和PUT请求。Vue表示：使用axios.post，直接传递一个JSON对象。调用方式：直接在URL中放置参数，适用于RESTful API风格的请求。Vue表示：在GET请求中直接拼接URL。
Vue快速入门(五)——组合式API(二)
bjzhang75的博客
08-13 46
深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。// 所以：此处需要借助于 “编译器宏” 函数接收子组件传递的数据。// 所以：此处需要借助于 “编译器宏” 函数接收子组件传递的数据。生命周期函数是可以执行多次的，多次执行时传入的回调会在时机成熟时。的，直接修改嵌套的对象属性不会触发回调执行，// 1. 给子组件，添加属性的方式传值。// 2. 在子组件，通过props接收。// 1. 给子组件，添加属性的方式传值。// 2. 在子组件，通过props接收。
Vue2与Vue3双向绑定实现原理解析
"本文将详细解释Vue2的双向绑定原理，包括如何通过`...Vue2和Vue3的双向绑定都基于数据劫持和依赖收集，但Vue3的`Proxy`实现提供了一个更为高效和全面的解决方案。理解这些原理对于深入学习Vue和优化应用性能至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值