![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 85
JonnyLan
暂时忽略!
展开
-
Vue Router 4 的使用,一篇文章给你讲透彻
Vue 3.X 使用Vue Router 4.x 进行路由配置,本文我们就来研究下如何使用Vue Router 4.x,本文中所有的使用方式都是使用 Composition API的方式。本文通过一步步介绍Vue Router 4.x的使用,来搭建一个简单的博客系统,让你对新版的Vue Router 4.x有一个完整的认识,然后能够非常轻松滴将Vue Router 4.x应用在自己的项目中。项目初始化项目搭建项目使用vite进行创建。npm init vite@latest vue-router-原创 2022-02-06 19:12:17 · 11966 阅读 · 5 评论 -
手写 Vuex 4.x
Vuex是官方提供的状态管理库,为了深入了解它的实现逻辑,本文我们一起来一步步实现它。初始化用法// 1. 引入createStore函数import { createStore } from "vuex";// 2. 通过创建一个新的 store 实例const store = createStore({});// 3. 将 store 实例作为插件安装createApp(App).use(store).mount('#app')模拟实现// 创建一个生成Store的ex原创 2022-02-01 23:52:16 · 1018 阅读 · 0 评论 -
探究Vue3的keep-alive和动态组件的实现逻辑
keep-alive组件是Vue提供的组件,它可以缓存组件实例,在某些情况下避免了组件的挂载和卸载,在某些场景下非常实用。例如最近我们遇到了一种场景,某个组件上传较大的文件是个耗时的操作,如果上传的时候切换到其他页面内容,组件会被卸载,对应的下载也会被取消。此时可以用keep-alive组件包裹这个组件,在切换到其他页面时该组件仍然可以继续上传文件,切换回来也可以看到上传进度。keep-alive渲染子节点const KeepAliveImpl: ComponentOptions = { nam原创 2022-01-30 17:20:29 · 1811 阅读 · 0 评论 -
Vue3.0的插槽是如何实现的?
Vue提供了pro可以进行参数的传递,但是有时需要给子组件的模板进行定制化,此时传递参数有时候就不太方便了。 Vue借鉴了Web Components实现了插槽slot。插槽slot通过在父组件中编写DOM,在子组件渲染的时候将这些DOM放置在对应的位置,从而实现内容的分发。使用方法介绍基本使用<Son> <p>父组件传入的内容</p></Son>我们想将一些内容渲染在Son子组件中,我们在组件中间写了一些内容,例如<p>父组件传原创 2022-01-29 20:26:26 · 1950 阅读 · 0 评论 -
Vue3的双向绑定是如何实现的
Vue的双向绑定是指数据变化能引起界面的变化,界面数据的变化也能驱动数据的改变。这个功能其实和单向数据流规范不一样,所以开始接触Vue的时候非常吸引我的一个功能。我们发现Element UI的表单也有大量使用v-model进行双向绑定。双向绑定 其实 不是所有的元素/组件都支持的,目前Vue支持 input,select, checkbox, radio 和组件 利用 v-model 指令进行 双向绑定。我以前对 双向绑定 这个功能有很大的一个疑惑:就是双向绑定为什么不会造成更新死循环?即 界面变化原创 2022-01-28 20:45:03 · 2637 阅读 · 0 评论 -
Vue3的事件绑定的实现逻辑是什么
Vue的事件绑定主要是通过v-on指令来实现的,这个指令既可以实现原生事件绑定,例如onclick等。也可以实现组件的自定义事件,从而实现组件的数据通信。本文我们就来分析下Vue的事件处理的逻辑。v-on作用于普通元素用在普通元素上时,只能监听原生 DOM 事件,最多的就是onclick事件了。我们就以onclick事件来分析原理。案例let click = () => { console.log("点击我,很快乐")};<!-- template --><di原创 2022-01-26 12:44:57 · 1572 阅读 · 0 评论 -
Vue常用的内置指令的底层细节分析
上一篇文章我们知道了指令的实现原理,接下来我们来研究下Vue提供的一些默认指令的实现原理。v-text使用案例<div v-text="'value'"实现逻辑先来看下render函数const _hoisted_1 = ["textContent"]function render(_ctx, _cache) { with (_ctx) { const { toDisplayString: _toDisplayString, openBlock: _openBlock原创 2022-01-25 20:00:25 · 670 阅读 · 0 评论 -
Vue 3.0 Provide和Inject实现共享数据
Provide和Inject可以在祖(父)组件和子(孙)组件间实现传值。相比prop只能父子之间传值而言,Provide和Inject传值更方便,相比vuex又更轻量。接下来我们就从使用和实现原理两方面来介绍Provide和Inject。Provide和Inject的使用概括: 祖(父)组件中使用一个provide函数来提供数据,而子(孙)组件使用inject函数来获取数据。provide API 的使用我们这里就用官方的例子, 阅读过官方例子的童鞋可以跳过本节。使用前需要先从vue中引用原创 2022-01-25 09:37:34 · 922 阅读 · 0 评论 -
你知道Vue3指令是如何实现的吗?
Vue 指令 是指 对普通DOM元素进行底层操作的JS对象, 它们会被挂在Element VNode对象上,在Element VNode的一些生命周期中会被调用,从而可以操作Element VNode的底层DOM元素。指令注册指令注册 是指将指令对应的JS代码放置在某些地方,需要使用的时候可以在这些地方进行查找。全局注册全局注册是调用app.directive('指令名称', { 指令代码 }) 来实现的app.directive('pin', (el, binding) => {原创 2022-01-24 11:46:47 · 697 阅读 · 0 评论 -
Vue3侦听器和异步任务调度, 其中有个神秘角色
侦听器的实现逻辑我们先来看看一个最简单的使用方式(watch的使用方式非常灵活,我们通过简单的使用方式来了解流程):let disabled = ref(false);let unwatch = watch(disabled, (value, oldValue, oninvalidate) => { console.log(oldValue); console.log(value); nextTick(() => { console.log("hoho");原创 2022-01-19 13:23:50 · 1080 阅读 · 0 评论 -
Vue 3.0 Teleport的使用和原理分析
Vue3.0 新增了一个Teleport组件,开发者可以使用它将其所在组件模板的部分内容移动到特定的DOM位置,譬如body或者其他任意位置。Vue 2.0要实现对应的功能则需要使用portal-vue三方库,或者使用$el操作DOM等来实现。接下来我们就从使用方式和实现原理两个方面来分别介绍。Teleport组件的使用Teleport组件的使用很简单,把需要移动的内容包起来即可:<teleport :to="#id" :disabled="false"> <div>原创 2022-01-16 22:11:00 · 1244 阅读 · 0 评论 -
Vue3.0 常用响应式API的使用和原理分析(二)
reactive对传入的类型是有限制的,必须是对象或者数组。对一些基础类型,例如string, number,boolean等不支持,如果要使用reactiveAPI必须将这些基础类型封装成对象,这样显然是不太科学的。因此Vue 3.0提供了refAPI。Ref是一个接口, 它最主要的是有一个value属性可以获取值和赋值。export interface Ref<T = any> { value: T _shallow?: boolean}ref使用场景将数据变为响应式原创 2021-09-06 20:12:41 · 4154 阅读 · 2 评论 -
Vue3.0 常用响应式API的使用和原理分析(一)
前面关于响应式的两篇文章,分别介绍了响应式实现原理和计算属性,本篇文章我们来看看其他响应式API的使用和实现原理。reactive说明:将对象或者数组变为响应式对象主要API之一。使用方式说明:使用reactive将p原始对象转为响应式对象person;使用changeName可以修改响应式对象person的name的值;使用changeChildName可以修改响应式对象person的child的name的值;实现原理请参阅本系列的Vue3.0 响应式实现原理分析的这篇文章原创 2021-09-04 16:32:18 · 685 阅读 · 0 评论 -
Vue 3.0 计算属性的实现原理分析
我们在上一章节介绍了响应式的原理,本文我们来探讨一下Vue 3.0的计算属性的实现原理。如果没有阅读过上一篇文章,建议请先阅读上一篇文章再来看本文,否则可能会有些迷糊。使用方法我们先来看看计算属性的用法:代码说明:使用computedAPI 定义了一个计算属性computedCounter,它有一个get方法返回的值是counter这个响应式数据的平方,有一个set方法,可以对counter设置值;实现的效果:counter的值变化,computedCounter的值也随之变化。实现逻辑原创 2021-09-02 20:06:11 · 523 阅读 · 0 评论 -
Vue3.0 响应式实现原理分析
我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持,但是这个API不能监听对象属性的监听和删除,此外为了深度劫持对象的内部属性,必须在初始化的时候对内部属性进行递归调用Ojbect.defineProperty,这就造成了一个性能上的消耗。为了解决这些问题,Vue 3.0利用Proxy重写了响应式逻辑并且优化了相关性能。使用案例我们先来个示例看下Vue 3.0的相应式API的写法:changePerson能改变响应式数据person的值,pe原创 2021-08-29 14:52:43 · 1357 阅读 · 2 评论 -
Vue 3.0 Props的初始化和更新流程的细节分析
Vue.js可以让组件的使用者在组件外部传递props参数,组件拿到这些props的值来实现各种各样的功能。本文我们就来探讨下组件props的初始化和更新流程。在前一篇文章中,我们知道setup函数的第一个参数是props,本文我们就来了解下props是如何初始化和更新的。在开始之前我们先弄清两个概念:Props配置:就是编写组件时写的props属性,描述一个组件的Props的数据类型和默认值等信息。例如组件定义时:props: ['msg']Props数据:是在使用组件时给组件传递的数据。例如组原创 2021-08-27 20:22:09 · 2612 阅读 · 0 评论 -
揭开Vue3.0 setup函数的神秘面纱
在Vue 3.0的使用中我们可以不使用data、props、methods、computed等Option函数,可以只下在setup函数中进行编写代码逻辑。当然为了和Vue 2.0兼容,也可以继续使用Option函数。先提出两个个问题:setup函数的执行时机是什么?setup函数的返回结果为何与模板的渲染建立联系的?mountComponent 挂载组件const mountComponent: MountComponentFn = ( initialVNode, container原创 2021-08-26 08:23:42 · 1201 阅读 · 0 评论 -
Vue 3.0组件的更新流程和diff算法详解
上篇文章我们介绍了组件的渲染流程,本篇文章我们来介绍响应式数据变化后组件的更新渲染流程。最后有不看文章的分析总结图。案例为了方便介绍流程,我们这里举一个例子:App组件中有一个Hello组件,并且赋值msg这个prop值给Hello组件;当msg为Vue 3时,App组件中有li标签数组显示vue3.feature,即显示Vue 3的新特性,当msg为Vue 2时则不显示;App组件中有一个按钮切换msg的值。App.vue<template> <HelloWorld原创 2021-08-13 00:39:37 · 545 阅读 · 0 评论 -
Vue 3.0组件的渲染流程
Vue简单易上手,只需要简单的文档说明就能上手开发。虽然本人也有一直使用Vue 2.0的项目开发经验,以前也只了解一点核心代码逻辑,没有全面阅读过Vue 2.0的源码。Vue 3.0发布后我也有了一些Vue 3.0项目使用经验,顺藤摸瓜来学习下Vue 3.0源码,向高手学习下编码技巧,以便在项目中更加游刃有余。由于Vue 3.0使用了TypeScript进行了重构,所以阅读本系列前需要对TypeScript基础语法有所了解,此外需要了解递归调用和函数柯里化等。Vue 3.0系列文章预估会有30个左右的文原创 2021-08-08 17:04:22 · 2134 阅读 · 0 评论 -
Vue3和Electron实现桌面端应用
为了方便记录一些个人随笔,我最近用Laravel和Vue 3.0撸了一个博客系统,其中使用到了一个基于 markdown-it 的 markdown 编辑器Vue组件v-md-editor。我感觉用它去编写markdown还是很方便的。后面就有了一个想法,基于此组件用Electron来实现一个markdown桌面端应用,自己平时拿来使用也是个不错的选择。题外话:VS Code就是用Electron开发出来的桌面应用,我现在除了移动端的开发外,其他的都是使用VS Code来开发了,各种插件开发起来真的很方原创 2021-07-24 21:23:44 · 1851 阅读 · 12 评论