分类：Vue3

2022
05-30

手摸手教你实现Vue3 Reactivity

目录前言开始小小思考代码实现模仿实现track实现trigger实现observe实现computed前言Vue3的响应式基于Proxy，对比Vue2中使用的Object.definedProperty的方式，使用Proxy在新增的对象以及数组的拦截上都有很好的支持。Vue3的响应式是一个独立的系统，可以抽离出来使用，那他到底是如何实现的呢？都知道有Getter和Setter，那Getter和Setter中分别都进行了哪些主要操作才能实现响应式呢？哼哼，带着这些问题一起来看看吧，文章会一步... 继续阅读 >

2022
05-24

Vue3+script setup+ts+Vite+Volar搭建项目

目录使用Vite创建vue+ts项目Vue3的三种语法OptionAPICompositionAPIscriptsetup（CompositionAPI的语法糖）安装Volar结尾好久没有写了，最近看到Vue3.2发布了，害，又要开始卷了么。其实我自己本身还没有使用过Vue3做过实际的项目开发，然鹅又出新东西了……，新时代农民工真的是左手工作，右手游戏，还要用jio去学习呢。什么？你说谈对象？xswl，我特么一个农民工也配谈对象？不卷不行啊，我踏马再看看自己盆友... 继续阅读 >

2022
05-12

Vue3 composition API实现逻辑复用的方法

CompositionAPI实现逻辑复用的步骤：抽离逻辑代码到一个函数，这个函数命令约定为useXXX格式（这点同ReactHooks）在setup中引用函数useXXX举下例子，定义一个获取当前鼠标位置的方法第一种，直接使用ref定义的useMousePosition：这种方式，导出和导入都可以随意解构//useMousePosition.jsimport{ref,onMounted,onUnmounted}from'vue'//1.定义一个函数,抽离逻辑，命名使用useXXXfunctionuseMousePosition(){... 继续阅读 >

2022
04-06

浅谈Vue3 defineComponent有什么作用

目录defineComponent重载函数开发实践defineComponent函数，只是对setup函数进行封装，返回options的对象；exportfunctiondefineComponent(options:unknown){returnisFunction(options)?{setup:options}:options}defineComponent最重要的是：在TypeScript下，给予了组件正确的参数类型推断。defineComponent重载函数1：directsetupfunction//overload1:directsetupfunction//(usesuserdefinedprops... 继续阅读 >

2022
02-12

浅谈vue3在项目中的逻辑抽离和字段显示

目录逻辑分层将各个区域业务分开这样做的优势这样的场景应该如何处理优化reactive不一定非要写在setup函数中如何在页面上直接显示值逻辑分层我们在使用vue3开发项目的时候，如何进行【区域分层】呢？？？？举一个简单的小粒子一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】这个时候我们可以将一个区域的逻辑分离出去将各个区域业务分开exportde... 继续阅读 >

2022
02-10

浅谈Vue3中key的作用和工作原理

这个key属性有什么作用呢？我们先来看一下官方的解释：kekey属性主要用在Vue的虚拟DOMdiff算法中，在新旧nodes对比时辨识Vnodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素。先简单提一下我对VNode的理解：VNode的全称是VirtualNode，也就是虚拟节点；V... 继续阅读 >

2021
11-19

Vue3和Electron实现桌面端应用详解

目录VueCLI搭建Vue项目Vue项目改造为markdown编辑器VueCLIPluginElectronBuilder优化功能启动全屏显示修改菜单栏编辑器打开markdonw文件的内容markdonw的内容存入文件打包为了方便记录一些个人随笔，我最近用Laravel和Vue3.0撸了一个博客系统，其中使用到了一个基于markdown-it的markdown编辑器Vue组件v-md-editor。我感觉用它去编写markdown还是很方便的。后面就有了一个想法，基于此组件用Electron来实现一个markdown... 继续阅读 >

2021
11-01

Vue3 style CSS 变量注入的实现

目录摘要基础示例动机设计细节编译细节采用策略实践提示绑定恰当的属性注意style的更新参考资料摘要在单文件组件样式中支持使用组件状态驱动的CSS变量（CSS自定义属性）。基础示例<template><divclass="text">hello</div></template><script>exportdefault{data(){return{color:'red',font:{size:'2em',},}},}</script><style>.text{color:v-b... 继续阅读 >

2021
10-15

Vue3.0中Ref与Reactive的区别示例详析

目录Ref与ReactiveRefReactiveRef与Reactive的区别shallowRef与shallowReactivetoRaw---只修改数据不渲染页面markRaw---不追踪数据toRef---跟数据源关联不修改UItoRefs---设置多个toRef属性值customRef---自定义一个refref捆绑页面的标签总结Ref与ReactiveRefRef用来创建基础类型的响应式数据，模板默认调用value显示数据。方法中修改需要修改value的值才能修改<!--模板语法><template><div>{{state}}</div></temp... 继续阅读 >

2021
10-12

Vue3中watchEffect的用途浅析

前言vue2里面的watchapi大家应该都挺熟悉的了，vue2中vue实例里面有一个$watch方法在sfc(siglefilecomponent)里面有一个watch选项。他可以实现在一个属性变更的时候，去执行我们想要的行为。比如：当ID改变的时候，从数据库里面获取新的数据。当属性变换的时候执行一个动画。当搜索条件变更的时候，更新查询到的数据。但是vue3除了watchapi，还新增了一个watchEffect的api，我们来看看他的用... 继续阅读 >

2021
10-01

Vue3中SetUp函数的参数props、context详解

1.setUp函数的第1个参数propssetup(props,context){}第一个参数props:props是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象也就是说:如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}如果你未通过Props进行接受配置，则输出的值是undefined<template><divclass="box">父组件</div><no-cont:my... 继续阅读 >

2021
09-28

Vue3中ref与reactive的详解与扩展

目录一、ref和reactive1.reactive2.ref二、shallowRef和shallowReactive1.ref和shallowRef2.reactive和shallowReactive三、toRaw四、markRaw五、toRef和toRefs1.ref2. toRef3. toRefs总结一、ref和reactive死死记住：ref本质也是reactive，ref(obj)等价于reactive({value:obj})vue3中实现响应式数据的方法是就是使用ref和reactive，所谓响应式就是界面和数据同步，能实现实时更新vue2中响应式是通过define... 继续阅读 >

2021
09-24

如何在Vue 3中扩展Vue Router链接详解

前言<router-link>标签是一个很好的工具，可以在你的Vue应用程序的不同页面之间进行导航，但当导航到一个外部链接时，它不是一个工具，为此，你应该使用一个普通的<a>标签。也许这只是我的问题，但很多时候，我都懒得去理会这其中的差别。其他时候，链接可能是动态的，也就是说，来自数据库或一些用户提供的数据源。在这种情况下，你根本不知道这个链接是外部的还是内部的，而且在每个可能使用这个链接的地方手动做V-if是多么痛... 继续阅读 >

2021
09-19

京东 Vue3 组件库支持小程序开发的详细流程

源码抢先看：https://github.com/jdf2e/nutuiNutUI3.0官网：https://nutui.jd.com/3x/小程序多端适配设计初衷在跨端小程序的开发过程中，我们发现没有合适的组件库可以使用，尤其在做电商商城类场景的业务时，没有符合京东App规范的组件库为我们的小程序项目提供支持。为了填补这一空白，同时让NutUI组件库能够为更多的开发者带来便利，我们决定在NutUI3.0中增加小程序多端适配的能力。如何适配Taro在小程序跨端开发中... 继续阅读 >

2021
09-16

Vue3中ref与toRef的区别浅析

1.ref是复制,视图会更新如果利用ref将某一个对象中的某一个属性值变成响应式数据我们修改响应式数据是不会影响原始数据的;同时视图会跟新。ref就是复制复制是不会影响原始数据的<template><div><div><div>{{stateObj}}</div><button@click="func1">按钮</button></div></div></template><script>import{ref}from'vue'exportdefault{name:'App',setup(){letobj={name:"张三",age:22}... 继续阅读 >

2021
09-14

Vue3实现Message消息组件示例

目录组件设计定义最终的组件API定义组件结构模板和样式模板Template消息图标样式组件脚本创建组件实例1、创建包裹容器，并设置外层的Class属性2、创建实例并挂载到body3、其中定义取消挂载和重新设置top值的方法实现渲染实例API在大多数web产品中，全局的Message组件占有较大的使用场景，它常出现在给与用户反馈、信息提示和与系统的对话场景中。如果使用传统的组件写法，则需要引入组件并在components中注册，然后... 继续阅读 >