Vue3
关注
分享
扫一扫
文章平均质量分 94
学全栈的灌汤包
这个作者很懒，什么都没留下…
展开
-
Vue响应式系统分支切换与cleanup | 清除遗留的副作用函数
本篇文章代码思路来自 Vue3.0 源码, 部分理解来源于霍春阳 《Vue.js设计与实现》这本书的理解, 感兴趣的小伙伴可以自行购买阅读。可以非常明确的感受到作者对 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知识点, 强烈推荐给大家。接上文Vue响应式原理和本质 - 实现一个完善的响应式系统。原创 2024-06-06 22:02:45 · 925 阅读 · 1 评论 -
Vue响应式系统分支切换与cleanup - 清除遗留的副作用函数
本篇文章代码思路来自 Vue3.0 源码, 部分理解来源于霍春阳 《Vue.js设计与实现》这本书的理解, 感兴趣的小伙伴可以自行购买阅读。可以非常明确的感受到作者对 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知识点, 强烈推荐给大家。原创 2024-06-06 22:01:43 · 1164 阅读 · 0 评论 -
Vue响应式原理和本质 - 实现一个完善的响应式系统
本篇文章代码思路来自Vue3.0源码, 部分理解来源于霍春阳 《Vue.js设计与实现》这本书的理解, 感兴趣的小伙伴可以自行购买阅读。可以非常明确的感受到作者对 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知识点, 强烈推荐给大家。原创 2023-10-30 20:20:32 · 630 阅读 · 1 评论 -
Vue虚拟DOM理解-深入且易懂
先抛出一个结论, 这个结论对本篇文章的理解很有帮助: Vue是一个保留了运行时+编译时架构的框架, 编译时, 用户可以提供 HTML 字符串, 我们将其编译为数据对象再交给运行时处理;运行时根据提供的原创 2023-10-13 16:33:52 · 448 阅读 · 10 评论 -
深度剖析Vue2、Vue3响应式原理 | 逐步推敲手写响应式原理全过程
应该在我们调用了get捕获器时, 因为如果一个函数中使用了某个对象的key，那么它应该被收集依赖, 而又当一个函数中使用了某个对象的key, 那么就会执行该对象的get方法, 我们可以在get捕获器中, 将正确的依赖收集进来；如果向类中添加两个函数, 但是如果其中一个依赖name, 另一个没有依赖name属性, 这样的添加方法是有问题的, 没有依赖name属性的函数, 我们应该不去向类中添加。目前我们是通过watchFn不管三七二十一的, 将函数添加到类中, 当属性改变时重新执行添加到类中的函数。...原创 2022-08-10 09:00:00 · 1457 阅读 · 38 评论 -
Vue中实现过渡动画
目前为止，过渡动画我们只要是针对单个元素或者组件的：要么是单个节点；要么是同一时间渲染多个节点中的一个；那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？这个时候我们要使用组件来完成；使用有如下的特点：默认情况下，它不会渲染成任何一个元素，但是你可以指定一个元素并以 tag attribute 让他进行渲染；过渡模式不可用，因为我们不再相互切换特有的元素；...原创 2022-08-09 09:00:00 · 3286 阅读 · 58 评论 -
Vue高级语法(三) | render函数和jsx的基本使用
Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用渲染函数，它比模板更接近编译器；前面我们讲解过VNode和VDOM的概念：Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM （VDOM）；事实上，我们之前编写的 template 中的HTML最终也是使用渲染函数生成对应的VNode；......原创 2022-08-08 09:00:00 · 2807 阅读 · 34 评论 -
Vue高级语法(二) | 内置组件和了解Vue安装插件
在组件化开发中，我们封装一个组件Hello World，在另外一个组件App中使用, 如下hello-world组件原创 2022-08-07 09:00:00 · 428 阅读 · 30 评论 -
Vue高级语法(一) | 自定义指令详解
在Vue的模板语法中我们学习过各种各样的指令： v-show、 v-for、 v-model等等，除了使用这些指令之外， Vue也允许我们来自定义自己的指令。注意：在Vue中，代码的复用和抽象主要还是通过组件；通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；自定义指令分为两种：自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；自定义全局指令： app的 directive 方法，可以在任意组件中被使用；...原创 2022-08-06 09:00:00 · 835 阅读 · 20 评论 -
网络请求库axios使用详解-简单封装
有了原生网络请求为什么还需要axios库原生的AJAX和fetch,某些功能不完善,需要自己封装,例如响应拦截和请求拦截,使用起来是非常繁琐的于是出现了对原生网络请求封装的库,就是axios库,它相对原生网络请求提供了很多好用的功能,并且axios库同时适配浏览器和Node的,在浏览器和Node中使用axios库的API完全相同Vue作者推荐使用axios库axios库的功能特点补充axios名称的由来?个人理解axios不是一个单词,没有具体的翻译.......原创 2022-08-03 09:00:00 · 1197 阅读 · 49 评论 -
Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节
一个Store（如Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态；它有点像始终存在，并且每个人都可以读取和写入的组件；你可以在你的应用程序中定义。...原创 2022-08-02 09:00:00 · 4333 阅读 · 58 评论 -
Vue全家桶 Vuex的详细介绍
在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 。在前面我们是如何管理自己的状态呢？由于JavaScript开发的应用程序，已经变得越来越复杂了当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：我们是否可以通过组件数据的传递来完成呢？管理不断变化的state本身是非常困难的：因此，我们是否可以考虑将组件的内部状态抽离出来，以一个全局单例的方式来管理呢？这就是Vuex背后的基本思想，它借鉴了Flux、Redux原创 2022-08-01 09:00:00 · 1266 阅读 · 40 评论 -
Vue全家桶 Vue-router的详细介绍
在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；...原创 2022-07-31 09:00:00 · 1293 阅读 · 17 评论 -
Vue3中Compositions API的使用(二)
setup函数中还有其他的函数,比如computed,Provide,Inject,watch等等。上一篇讲解了setup的基本使用以及setup函数中的ref和reactive函数实现响应式数据。//绑定函数,并发出ShowInfoClick事件。变量，函数声明，以及import引入的内容。//defineProps接收传递过来的参数。接下来我们会讲解setup中的其他函数的使用。//引入子组件,无需注册,引入即可使用。"showIndo传递的参数"//定义响应式数据。......原创 2022-07-30 09:00:00 · 853 阅读 · 7 评论 -
Vue3中Compositions API的使用(一)
在Vue2中，我们编写组件的方式是Options API：但是这种代码有一个很大的弊端：下面我们来看一个非常大的组件，其中的逻辑功能按照颜色进行了划分：那么既然知道Composition API想要帮助我们做什么事情，接下来看一下到底是怎么做呢？setup其实就是组件的另外一个选项：接下来我们一起学习这个函数的使用：我们先来研究一个setup函数的参数，它主要有两个参数props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可以直接通过props参原创 2022-07-29 09:00:00 · 846 阅读 · 47 评论 -
Vue组件中的生命周期函数执行流程
created(重要)原创 2022-07-28 09:00:00 · 692 阅读 · 26 评论 -
Vue组件化开发-插槽的使用详解
在开发中，我们会经常封装一个个可复用的组件前面我们会通过props传递给组件一些数据，让组件来进行展示；但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；我们应该让使用者可以决定某一块区域到底存放什么内容和元素；举个栗子假如我们定制一个通用的导航组件-NavBar这个组件分成三块区域左边-中间-右边，每块区域的内容是不固定；；；...原创 2022-07-27 09:00:00 · 2507 阅读 · 26 评论 -
Vue非父子组件之间的通信
让App.vue提供一些数据给HomeContent.vue使用[外链图片转存失败,在provide中引入的this.name本身并不是响应式。此篇讲解的是,在学习状态管理之前,非父子间通信的方案。一些深度嵌套的组件，子组件想要获取父组件的部分内容。computed返回的是一个ref对象。mitt或tiny-emitter。在开发中，我们构建了组件树之后，除了。//通过provide将数据传出。一个provide选项。//发送事件到事件总线上。//监听事件总线上的事件。...原创 2022-07-26 09:00:00 · 1639 阅读 · 27 评论 -
Vue组件之间的通信-父传子-子传父
前面我们是将所有的逻辑放到一个App.vue中：我们可以按照如下的方式进行拆分：按照如上的拆分方式后，我们开发对应的逻辑只需要去对应的组件编写就可, App.vue中的代码如下 :上面的嵌套逻辑如下，它们存在如下关系：在开发过程中，我们会经常遇到需要组件之间相互进行通信：总之，在一个Vue项目中，组件之间的通信是非常重要的环节，所以接下来我们就具体学习一下组件之间是如何相互之间传递数据的；父子组件之间如何进行通信呢？在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：什原创 2022-07-25 09:00:00 · 1754 阅读 · 21 评论 -
Vue组件化开发-Cli搭建项目
现在可以说整个的大前端开发都是组件化的天下 :无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想。所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。我们需要通过组件化的思想来思考整个应用程序：我们将一个完整的页面分成很多个组件；每个组件都用于实现页面的一个功能块；而每一个组件又可以进行细分；而组件本身又可以在多个地方进行复用；组件化是Vue、React、Angu原创 2022-07-24 09:00:00 · 543 阅读 · 19 评论 -
Vue的双向绑定v-model详细介绍
当我们选中option中的一个时，会将它对应的value赋值到fruit中；如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为。会将选中的option对应的value添加到数组fruit中。此时input的value属性并不影响v-model的值。监听到函数中，函数会获取最新的值赋值到绑定的属性中；每次内容输入后就将最新的值和绑定的属性进行同步。，v-model在进行双向绑定时，绑定的是。v-bind绑定value属性的值。v-model绑定的是一个数组；v-model绑定的是一个值；.原创 2022-07-23 09:00:00 · 4902 阅读 · 17 评论 -
Vue的基础语法-常用v-on、v-if、v-bind等指令的细节(最详细)
v-bind指令是帮助我们动态绑定属性的**前面讲的一系列指令，主要是将值插入到模板内容**中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性；比如动态绑定img元素的src属性；绑定属性我们使用v-bind(以下是官方对v-bind的描述,看不懂了解即可,很多东西我们都是用不上缩写预期参数修饰符.camel-将kebab-caseattribute名转换为camelCase。用法。......原创 2022-07-21 09:00:00 · 1615 阅读 · 14 评论 -
Vue的简单介绍
Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式JavaScript框架。全称是Vue.js或者Vuejs；它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型；帮助你高效地开发用户界面，无论任务是简单还是复杂；什么叫渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；但是目前实际开发中,我们都是使用Vue来开发整个项目的;...原创 2022-07-20 09:00:00 · 3964 阅读 · 1 评论 -
浅谈前端三大框架和vue2、vue3的选择
目前前端最流行的是三大框架：Vue、React、Angular。框架数据对比:谁是最好的前端框架?但是，我们从现实的角度，分析一下，学习哪一门语言更容易找到工作或者说更适合我们找到工作？那么，就前端来说，学习了HTML、CSS、JavaScript，哪一个框架更容易找到工作？如果是打算在国内工作的小伙伴, 看到这里应该明确了Vue的重要性, 也是我们前端开发必不可少的一个技能那么Vue2和Vue3我们该如何去选择呢?在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece原创 2022-07-13 10:44:40 · 5813 阅读 · 0 评论