vue整体实现思想及mini-vue的实现 vue整体实现思想及mini-vue的实现一、三大核心系统二、实现Mini-Vue1、描述2、渲染系统实现一、三大核心系统Compiler模块：编译模板系统主要用来将template模板转换为render渲染函数Runtime模块：也可以称之为Renderer模块，真正渲染的模块主要用来将虚拟DOM转变为真实DOM，并且渲染到浏览器页面上主要的实现原理是利用了snabbdom的思想，具体可以看我的另一篇转载文章，点下方虚拟DOM原理Reactivity模块：响应式系统主要用来当dom发生
vue虚拟DOM原理了解 vue虚拟DOM原理了解一、什么是虚拟DOM？二、为什么要使用虚拟 DOM？三、虚拟DOM的作用四、虚拟DOM的实现原理1、snabbdom2、snabbdom模块3、snabbdom源码概述4、Snabbdom 源码实现一、什么是虚拟DOM？虚拟 DOM(Virtual DOM) 是由普通的 JavaScript 对象来描述 DOM对象状态的变化首先作用于虚拟 DOM，最终映射到真实的DOM中Vue.js2.x内部使用的虚拟 DOM是改造的Snabbdom二、为什么要使用虚拟 DOM？虚
数组去重以及数组对象去重方法总结 数组去重以及数组对象去重方法总结一、数组对象去重1、reduce方法2、利用原生js+空对象+空数组3、利用原生js+标志位+空数组4、利用双指针思想+splice方法二、数组去重1、利用新数组+标志位2、排序+新数组+相邻比较3、新对象+新数组4、新数组+indexOf5、新数组+includes6、新数组+filter+includes7、新数组+foreach+includes8、 双指针思想+splice9、新数组+lastIndexOf10、ES6的set 方法一、数组对象去重1、reduce
vue3的Teleport和插件的认识与 了解 vue3的Teleport和插件的认识与 了解一、认识Teleport二、和组件结合使用三、多个teleport四、认识Vue插件五、插件的编写方式一、认识Teleport在组件化开发中，我们封装一个组件A，在另外一个组件B中使用那么组件A中template的元素，会被挂载到组件B中template的某个位置最终我们的应用程序会形成一颗DOM树结构但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置比如移动到body元素上，或者我们有其他的div#
vue3的自定义指令详解 vue3的自定义指令详解一、认识自定义指令二、指令的生命周期三、指令的参数和修饰符四、自定义指令练习一、认识自定义指令在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令注意：在Vue中，代码的复用和抽象主要还是通过组件通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令自定义指令分为两种自定义局部指令：组件中通过directives 选项，只能在当前组件中
vue中render函数和h函数以及jsx使用的详解 vue中h函数的详解一、认识h函数二、h()函数 如何使用呢？三、h函数的基本使用四、h函数计数器案例五、setup函数计数器案例六、函数组件和插槽的使用七、jsx组件的使用一、认识h函数Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用 渲染函数 ，它比模板更接近编译器Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚 拟DOM（VDOM）
vue3中的单文件组件＜script setup＞详解 vue3中的单文件组件<script setup>详解一、相比普通script语法的优势二、基本语法三、响应式四、使用组件五、使用自定义指令六、defineProps 和 defineEmits七、defineExpose八、useSlots 和 useAttrs九、顶层 await一、相比普通script语法的优势<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势更少的
vue3的Composition API详解，包含hook的思想 vue3的Composition API详解一、Options API的弊端二、认识Composition API三、setup1、setup函数的参数2、setup函数的返回值3、setup不可以使用this4、Reactive API5、Ref API1、基本使用2、Ref自动解包6、readonly1、认识readonly2、readonly的使用3、readonly的应用一、Options API的弊端在Vue2中，我们编写组件的方式是Options APIOptions API的一大特点就
vue3中的Mixin和extends详解 vue3中的Mixin详解一、认识Mixin二、Mixin的基本使用三、Mixin的合并规则一、认识Mixin目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能一个Mixin对象可以包含任何组件选项当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选
vue3过渡和动画详解 vue3过渡和动画详解一、认识动画二、Vue的transition动画三、Transition组件的原理一、认识动画在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-groupVue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果我们来看一个案例Hello World的显示和隐藏通过下面
从vue2迁移到vue3，细节处有啥变化？ vue3新增api及vue2部分属性在vue3中变化的地方一、说明二、子传父时使用的emit一、说明其实vue3大部分的知识点和vue2都是一样的，这篇文章是介绍vue2中部分属性在vue3中的变化，以及vue3新增加的一些东西。二、子传父时使用的emit在 Vue 2 中，你可以定义一个组件可接收的 prop，但是你无法声明它可以触发哪些事件<template> <div> <p>{{ text }}</p> &
vue的动态组件和异步组件及keep-alive vue的动态组件和异步组件一、动态组件二、keep-alive三、异步组件一、动态组件动态组件是使用 component 组件，通过一个特殊的attribute is 来实现下面通过一个例子去解释动态组件怎么用如上图所示，比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示这个案例我们可以通过三种不同的实现思路来实现方式一：通过v-if来判断，显示不同的组件方式二：动态组件的方式方式三：使用路由router-link和router-viewv-if显
Vite入门与了解 Vite入门与了解一、认识vite二、浏览器原生支持模块化三、Vite的安装和使用四、Vite对css的支持五、Vite对TypeScript的支持六、Vite对vue的支持七、Vite打包项目八、ESBuild解析九、Vite脚手架工具一、认识viteWebpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具比如rollup、parcel、gulp、vite等等什么是vite呢？ 官方的定位：下一代前端开发与构建工具如何定义下一代开发和构建工具呢？我们知
webpack5常用配置--从零开始学webpack，搭建自己的脚手架 webpack入门学习一、是什么一、是什么本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。我们来对上面的解释进行拆解：打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具静态的static：这样表述的原因是我们
javascript对象的引用赋值以及浅拷贝与深拷贝 javascript对象的引用赋值以及浅拷贝与深拷贝一、对象的引用赋值1、js中的数据类型2、案例一3、案例二3、案例三4、案例四5、总结：(精髓所在)二、浅拷贝与深拷贝1、区别与概念2、如果是基本数据类型，名字和值都会储存在栈内存中3、如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值4、实现浅拷贝的方法5、 实现深拷贝的方法一、对象的引用赋值1、js中的数据类型基本类型数字（number）字符串（string）布尔值（boolean）空值
关注
