Category: vue

vue2.x vue3.x 快速入门,学习,问题解析

Vite+Vue3+Vant快速构建项目

Vite+Vue3+Vant快速构建项目

随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃。因此,越来越多的大厂也逐步拥抱 Vue3。 利用Vite 脚手架工具可...

组件的基本使用 | 脑图

组件的基本使用 | 脑图

为了方便查看,我将上文所有内容总结为一图,如下 10组件的基本使用.png 为了方便下载,我将相关的高清思维导图及源文件上传至GitHub,...

组件的基本使用 | 重学Vue3

组件的基本使用 | 重学Vue3

这个月开始重新开始学习Vue3,从理解基本使用到模拟实现! 这是关于组件。看文本篇,你将对组件有个清晰的认识 本文目录结构如下: image...

理解v-model及其修饰符 | 脑图

理解v-model及其修饰符 | 脑图

为了方便查看,我将上文所有内容总结为一图,如下 v-model及其修饰符.png 为了方便下载,我将相关的高清思维导图及源文件上传至GitH...

理解列表渲染 | 脑图

理解列表渲染 | 脑图

我仅将列表渲染所有内容汇成一图,如下: 列表渲染v-for.png 为了方便下载,我将相关的高清思维导图及源文件上传至GitHub,可移步下...

理解条件渲染 | 脑图

理解条件渲染 | 脑图

为了方便查看,我将上文所有内容总结为一图,如下 条件渲染.png 为了方便下载,我将相关的高清思维导图及源文件上传至GitHub,可移步下载...

理解条件渲染 | 重学Vue3

理解条件渲染 | 重学Vue3

这个月开始重新开始学习Vue3,从理解基本使用到模拟实现! 本文是关于Vue的条件渲染指令:v-if和v-show 看文本篇,你将会对条件渲...

理解计算属性和监听器 | 脑图

理解计算属性和监听器 | 脑图

为了方便查看,我将上文所有内容总结为一图,如下 计算属性和监听器.png 为了方便下载,我将相关的高清思维导图及源文件上传至GitHub,可...

理解计算属性和监听器 | 重学Vue3

理解计算属性和监听器 | 重学Vue3

这个月开始重新开始学习Vue3,从理解基本使用到模拟实现! 本文是关于Vue中的配置选项:计算属性和监听器 看文本篇,你将会对这两个选项有个...

理解模板语法 | 脑图

理解模板语法 | 脑图

为了方便查看,我将上文模板语法所有内容总结为一图,如下 image.png 为了方便下载,我将相关的高清思维导图及源文件上传至GitHub,...

理解模板语法 | 重学Vue3

理解模板语法 | 重学Vue3

前言 这个月开始重新开始学习Vue3,从理解基本使用到模拟实现! 本文内容是关于Vue的模板语法 基本目录如下: image.png 基本介...

Decorator | 重学ES6

Decorator | 重学ES6

Decorator是装饰器的意思,目前还没有定案 它是一种与类(class)相关的语法,用来注释或修改类和类方法 装饰器是一种函数,写成@ ...

深入了解Vue3组件 | 注册组件

深入了解Vue3组件 | 注册组件

此处分为以下3个部分讲 image.png 组件名 注册组件时,需要提供一个名作为组件名 在 DOM 中使用组件时,建议组件名的字母全小写,...

vue3 组合api写法

vue3 组合api写法

vue3写法 变量声明改变,不用在创建data函数,使用reactive声明,比如: {{state.name}}//这里直接使用 emit...

Vue3中生命周期函数的变化

Vue3中生命周期函数的变化

我们知道,在每个组件在被创建时,要经过一系列的初始化过程,比如,需要设置数据监听、编译模板、实例挂载并在数据变化时触发DOM更新等。 在Vu...

深入源码理解Vue3 reactive

深入源码理解Vue3 reactive

我们先来看官方对于reactive的解释,官方的解释也非常简单 返回对象的响应式副本 但从这句话我们可以得到以下信息 reactive接受一...

Vue3中提到的Tree-shaking

Vue3中提到的Tree-shaking

我们知道,Vue3中提到一个叫Tree-shaking的东西,其实也并不是一个新的东西,有人称之为”摇树优化“,什么...

深入源码剖析Vue3 ref

深入源码剖析Vue3 ref

关于ref,官方的解释是: 接受一个内部值并返回一个响应式且可变的 ref对象 https://www.vue3js.cn/docs/zh/...

v-on指令

v-on指令

v-on就是用于绑定事件的 例如:有个按钮,当点击的时候执行一些操作 click me 上述代码中,v-on:后面的值是一个方法,可以写成m...

vue3 Fragments和emits选项

vue3 Fragments和emits选项

Vue3中组件可以拥有多根 我们知道,在vue2.x中,每个组件只能有一个根,这意味着我们写每个组件模板时都要套一个父元素。vue3为了更方...

使用customRef函数自定义一个ref

使用customRef函数自定义一个ref

我们知道,ref函数可以创建一个响应式数据,在数据更新时同时更新UI界面 有的时候,我们希望可以显示的控制依赖追踪和触发响应,那就可以使用c...

vue3 Teleport组件

vue3 Teleport组件

Teleport,被称为传送门组件,用于提供一种简洁的方式,指定其里面内容的父元素 例如,定义一个模态框,该模态框原本是在一个组件中的,但我...

TS中的泛型

TS中的泛型

泛型可以理解为宽泛的类型,通常用于类和函数 一、泛型类 泛型可以用于类和构造器,例如: class Person{ private _val...

vue3 toRef函数和toRefs函数

vue3 toRef函数和toRefs函数

这篇我们看下toRef和toRefs的基本使用 我们知道ref可以用于创建一个响应式数据,而toRef也可以创建一个响应式数据,那他们之间有...

vue3 toRaw函数和markRaw函数

vue3 toRaw函数和markRaw函数

在setup函数中,我们通过ref和reactive函数创建响应式数据,其特点是,每次修改数据都会更新UI界面,这样的问题是非常消耗性能 所...

vue3递归监听和非递归监听

vue3递归监听和非递归监听

我们知道ref函数和reactive函数用于将一个普通数据变成一个响应式的数据。当数据发生改变时,界面也会立即更新。 其实还有一个规律,就是...

vue3 setup函数的注意点

vue3 setup函数的注意点

我们知道setup函数是组合API的核心入口函数,使用时需要注意几点: setup函数的执行时机是在beforeCreate和created...

vue3 reactive函数

vue3 reactive函数

reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型,而re...

Vue3.0更优雅的使用v-model

Vue3.0更优雅的使用v-model

我们知道,在Vue2.0中如何实现双向数据绑定一种是v-model,另一种是.sync。通常一个组件只能用于一个v-model,但是有的组件...