vue3随手记第30页

【vue3】ref、reactive、shallowRef、shallowReactive、readonly和shallowReadonly

申明变量的几种方法一般情况下使用ref和reactive即可如果有一个对象数据，结构比较深，但变化只是外层属性变化===>shallowReactive如果有一个对象数据，后面会产生新的对象来替换===>shallowRef深度只读数据===>readonly浅度只读数据===>shallowReadonlym1:{{m1}}m2:{{m2}}m3:{{m3}}m4:{{m4}}m5:{{m5}}

顾鸟·2024-01-26 12:50

Vue3快速入门-shallowRef 与 shallowReactive

查看本系列文章合集clickme下载本系列文章源码clickmeshallowRefshallowRef类似ref，不同的是，shallowRef只处理基本类型的响应式，不处理对象类型的响应式。shallowReactiveshallowReactive类似reactive，不同的是，shallowReactive只处理对象最外层属性的响应式。也就是浅响应式shallowRef基本数据类型:{{r

温情key·2024-01-26 12:50

Vue学习计划-Vue3--其他API：shallowRef与shallowReactive、readonly与shallowReadonly、toRaw与markRaw、customRef

其它API【shallowRef与shallowReactive】shallowRef作用：创建一个响应式数据，但只对顶层属性进行响应式处理。用法：letmyVar=shallowRef(initValue)特点：只跟踪引用值的变化，不关心值内部的变化shallowReactive作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的用法：letmy

化作繁星·2024-01-26 12:20

Vue3全局组件和自定义指令

目录全局组件全局指令局部指令全局组件全局组件是在main.js中注册的，通过app实例.component创建main.jsimport{createApp}from'vue'importAppfrom'./App.vue'//导入组件importCustormCompfrom'./components/CustormComp.vue'//创建App实例挂载到id为app的dom元素constap

诗霖雪·2024-01-26 12:49

vue3 shallowRef和shallowReactive

shallowRef使用定义一个不会其对象内的值改变的数据时,或者每次改变都是替换掉整个对象而不是去单单替换掉其中的某个属性

兜里揣着星星·2024-01-26 12:48

vue3 的组件通信

1、propsprops主要用于父组件向子组件通信。在父组件中通过用:msg="msg"绑定需要传给子组件的属性值，然后再在子组件中用props接收该属性值。方法一：//父组件传值importchildfrom"./child.vue";import{ref,reactive}from"vue";exportdefault{setup(){//基础类型传值constmsg1=ref("父组件传给子

奇奇怪怪.*·2024-01-26 12:49

0125-1-vue3初体验

vue3尝鲜体验初始化安装@vue/cli@next：yarnglobaladd@vue/cli@next#ORnpminstall-g@vue/cli@next然后在Vue项目运行：vueupgrade

武昌库里写JAVA·2024-01-26 12:41

Vue3基础：如何通俗得理解vue3里面的“应用实例”（Application Instance）

在Vue3中，“应用实例”（ApplicationInstance）是一个非常核心的概念。要通俗地理解这个概念，可以将其想象为一座房子，而你的Vue应用就是这座房子。创建应用实例想象你要建造一座房子。

code_space·2024-01-26 11:52

Vue3基础：挂载事例方法.mount()是什么？根组件模板又是什么？

.mount()Vue3演示app.js//创建一个Vue应用实例constapp=Vue.createApp({data(){return{message:"Hello,Vue3!"}}})

code_space·2024-01-26 11:52

Vue3基础：pnpm是什么？npm和pnpm的区别？如何使用pnpm？

pnpm是一个流行的JavaScript包管理器，类似于npm和yarn。它是performantnpm的缩写，意在表明它是一个更高效的npm替代品。pnpm的主要特点和优势包括：高效的存储空间使用pnpm使用称为“内容寻址存储”的机制来存储npm包。这意味着即使多个项目使用相同的包，该包在磁盘上只存储一次。这与npm和yarn不同，后者会在每个项目的node_modules目录中分别存储一份副本

code_space·2024-01-26 11:50

Element-Plus如何实现表单校验和表单重置

一：页面布局介绍：这是我刚刚用基于vue3+element-plus写好的一个部门管理的页面基本的增删改查已经写好，下面我只提供页面的template和style的代码：template部门管理

烛.照103·2024-01-26 11:48

vue3---inputRef.value.focus()报错Cannot read properties of null (reading ‘focus‘)

问题描述：点击编辑按钮，出现el-input框（el-input显示隐藏通过v-if控制）constisEdit=ref(false)constinputRef=ref(null)//编辑模型名称consteditModelName=()=>{isEdit.value=true;inputRef.value.focus();};解决方法：方法1：添加nextTick函数，因为使用了v-if执行;n

maidu_xbd·2024-01-26 11:47

vue3 数据放置的两种方式

Ciilk·2024-01-26 10:59

Two output files share the same path but have different contents

vue3+viteX[ERROR]Twooutputfilessharethesamepathbuthavedifferentcontents:node_modules\.vite\deps_temp\

前端专业写bug·2024-01-26 10:36

vue3 watch理解

监听变化vue3版本watch(1,2,3)接收三个参数第1个参数需要监听的数据第2个参数是监听的回调参数回调里常用的两个参数,(一,二)=>{第一个参数是新值,第二个参数是旧值其实还有第三个参数是个函数清除副作用

前端专业写bug·2024-01-26 10:36

【vue】Vue2和Vue3中的代码逻辑复用对比（mixins、自定义hook）：

【3】mixins的一些特性：【4】mixins的缺点：三、hook：【1】Vue3.x中的自定义hook函数是什么？

Sun Peng·2024-01-26 10:47

vue3路由报错解决方法

报错：解决办法：createWebHashHistory是否为createWebHashHistory()方法//指定路由模式为哈希模式修改：改为方法就行了

香香爱编程·2024-01-26 09:43

vue —— h函数的学习与使用

二、h函数格式说明及使用示例1：简单创建一个VNode（vue3）示例2：vue2中h函数用法示例3：vue3中h函数的用法vue2和vue3中h函数的区别？

Ying（英子）·2024-01-26 09:41

vue3里的watch与 watchEffect

watchEffect特点：回调函数立即调用回调函数依赖的数据都会被监控深度监控watch与watchEffect相同点都可以对数据进行侦听不同点watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控watch和watchEffect都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。watch会明确监听某一个响应数据，而watchEffect则是隐式的监听回

香香爱编程·2024-01-26 09:41

uniapp vue3关于setup语法ref父组件使用子组件方法失效问题

setup下默认不暴露子组件的方法所以不需要将子组件的方法暴露出去defineExpose就可以了constgetList=()=>{//子组件方法}defineExpose({getList})父组件使用constHome=ref(null)constgetSon=()=>{Home.value.getList()//父亲组件方法}

前端专业写bug·2024-01-26 09:05

vue 点击按钮跳转另一个项目的链接地址，从另一个项目返回回来页面怎么让他刷新

如果你在Vue3中点击按钮跳转到另一个项目的链接地址，然后从另一个项目返回时想要刷新页面，这就涉及到不同域的页面之间的通信问题。因为跨域的限制，返回的页面无法直接刷新原始页面。

Judy1623·2024-01-26 09:03

vue3.0规范学习记录

组合式函数使用use+name进行命名，例如useMouse；自定义指令使用v+name进行命名，例如vFocus；在组件使用v-model实现“双向绑定”时，子组件默认通过emits(‘update:modelValue’,params)触发更新；setup()钩子是在组件中使用组合式API的入口，通常只在以下情况下使用：需要在非单文件组件中使用组合式API时。需要在基于选项式API的组件中集成

椒盐大肥猫·2024-01-26 09:58

Vue学习笔记12--Vue3之setup/ref函数/reactive函数/Vue3响应式原理/reactive对比ref

一、拉开序幕的setup理解：Vue3中一个新的配置项，值为一个函数。setup是所有CompositionAPI(组合API）表演的舞台。组件中所用到的：数据、方法等，均要配置在setup中。

jxncxgx·2024-01-26 09:54

【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）

目录项目搭建步骤确定node版本使用Vite创建Vue3项目规范目录结构配置环境修改Vite配置文件集成路由工具VueRouter集成状态管理工具Pinia集成CSS预编译器Sasssvg图标组件集成UI

aDiaoYa_·2024-01-26 08:07

搭建个人博客网站时，前台博客详情页代码块的显示优化

项目使用的技术栈：后台管理：Vue3+Element-Plus+SCSS前台系统：Nuxt3+Element-Plus+SCSS服务端：Node.js+Mysql+Express1、优化前的展示效果：1

wen_文文·2024-01-26 08:00

使用宝塔面板部署Nuxt3项目到云服务器上

1、前期准备1）准备一台云服务器2）在云服务器上安装宝塔面板软件应用，安装步骤可参考博客:使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上2、进行Nuxt3项目的部署

wen_文文·2024-01-26 08:00

基于node.js和Vue3的医院挂号就诊住院信息管理系统

本系统基于Node.js后端技术和Vue3前端框架进行开发，利用其高效的非阻塞I/O处理能力和响应式数据绑定特性，实现一个可靠且用户友好的医疗信息管理平台。

程序猿大波·2024-01-26 08:53

使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上

准备工作一台云服务器，可以先用免费试用一个月的服务器进行练手；我这里选择的是腾讯云的轻量云服务器；1、在云服务器上安装宝塔面板宝塔面板官网地址：https://www.kancloud.cn/chudong/bt2017/4242091.1安装Xshell脚本工具，通过这个工具来连接云服务器，进行宝塔面板的安装根据云服务器的系统选择对应的命令进行安装安装步骤参考：https://blog.csdn

wen_文文·2024-01-26 08:50

vue3 + antd 封装动态表单组件（二）

传送带：vue3+antd封装动态表单组件（一）前置条件：vue版本v3.3.11ant-design-vue版本v4.1.1vue3+antd封装动态表单组件（一）是基础版本，但是并不好用，因为需要配置很多表单项的

guizi0809·2024-01-26 08:16

vue3.0+ts优化SEO问题~这个坑卡了我好久

博客写完了，到了要上线时候才想起来要优化不优化的话不利于爬虫的抓取这样就没办法排名靠前啊~~可是优化这方面我又不懂，就简单的了解一下。渲染主要分（CSR）客户端跟（SSR）服务端。可是vue就是CSR，检查源代码并没有东西，这可不行啊这不利于爬虫。然后一个下午各种百度，发现了有SSR渲染和预渲染都可以做到生成一个静态HTML，这传统的html静态页面就对爬虫很有利，反正我需要渲染的页面不多就首页跟

橙子cms·2024-01-26 07:48

Vue 3 + Vite + SSR

后来我在实际项目中，使用了第三方框架NUXT，总的来说还是这个框架还是不错的，但是在个性化定制方面不好控制，还有一个问题是到目前为止仍未支持vue3。

苦行虚空·2024-01-26 07:47

Vue3+Vite使用Puppeteer进行SEO优化（SSR+Meta）

因为一些功能在Halo上不太好实现，所以又切回了Vue3项目，本文就是对于Vue单页面项目SEO优化的一个简单的完整方案。此次优化的最大好处，就是SSR时对已有的vue项目0侵入，不需

笑小枫·2024-01-26 07:12

使用uniApp+vue3+Vite4+pinia+sass技术栈构建微信小程序

不用再单独去下载HBuilderX.1.基础安装vue3+ts+uniapp方法一：npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-project方法二：可以去

你离优秀差多少·2024-01-26 07:18

价值几千元的写字心得

一次在随手记上记账无意中看到她的文章很是鸡汤，感染了我，之后就有了我们的链接，包括认识她后认识的小样，等等优秀的朋友，之后的自主学习探索，好习惯养成……文清老师常说，任

杨梅姑娘·2024-01-26 06:10

随手记

刷微博的时候看到这个图片图片发自App想起来菜菜带我去迪士尼乐园的时候超热但是敲开心在11号地铁上买了两个米奇米妮头饰出站换票进入cartoonworld拍照排队聊天谈论周围人玩儿大笑惊叹计划下一个项目拍照奔走排队玩儿惊喜哈哈在园中无限循环项目一直在变不变的是紧紧牵着的小手手嘿嘿其实这个图片说的呢我感觉亲看来你是没遇上对的人欧(⊙o⊙)

爱菜菜酱·2024-01-26 04:50

【Vue3】组件通信

Vue3组件通信和Vue2的区别：移出事件总线，使用mitt代替。vuex换成了pinia。把.sync优化到了v-model里面了。把$listeners所有的东西，合并到$attrs中了。

小秀_heo·2024-01-26 04:57

低代码-添加按钮组件设计

效果图可拆分为以下细节按钮列表支持拖拽排序删除(两个操作需同步删除)点击外侧删除点击复选框删除添加：点击复选框添加示例代码技术栈:vue3+arco.design+ts+less+tailwindcssprops.bindButton.splice

土生土长的IU·2024-01-26 04:26

分析Vue3生命周期

一.什么是生命周期在Vue中，生命周期是组件从创建到销毁的整个过程中的不同阶段。Vue组件的生命周期主要由一系列的钩子函数（hookfunctions）组成。以下是Vue组件生命周期的主要阶段：1.创建阶段：-beforeCreate：在实例被创建之前调用，此时组件的响应式属性和事件还未初始化。-created：在实例创建完成后调用，此时组件的数据已经初始化完成，但DOM还未生成，可以进行一些初始

Zy000428·2024-01-26 03:02

Vue3的优势

Vue3和Vue2之间存在以下主要区别：1.性能优化：Vue3在内部进行了重写和优化，采用了新的响应式系统（Proxy），相较于Vue2中的Object.defineProperty，更具性能优势。

Zy000428·2024-01-26 03:00

vue3 $attrs和inheritAttrs的使用

$attrs属性解释:包含了父作用域中不作为组件props或自定义事件的attribute绑定和事件。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定，并且可以通过v-bind="$attrs"传入内部组件——这在创建高阶的组件时会非常有用。inheritAttrs属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs:false可能不是很好理解

hao_0413·2024-01-26 03:15

Vue3 pinia快速入门

安装脚手架vitenpmcreatevite@latest然后按照提示操作即可！安装状态管理pinianpminstallpinia--save创建Store新建src/store目录并在其下面创建index.js，导出store//src/store/index.jsimport{createPinia}from'pinia'conststore=createPinia()exportdefau

hao_0413·2024-01-26 03:15

Vue3 全局挂载对象和方法

Vue3.x已经不支持直接Vue.prototype.

hao_0413·2024-01-26 03:45

vue3基础之toRefs方法

toRefs方法使用初级用法:在项目中常常会使用解构语法,对需要的数据进行解构,但是在vue3中直接解构的数据是不具有响应式的,所以Vue3提供了toRefs方法专门用来解构出响应式的数据高级用法:将一个响应式对象转换为一个普通对象

 勿忘初心·2024-01-26 02:43

vue3基础之setup中的props和自定义事件

setup中的props接收方法1：使用setup中默认存在的defineProps方法接收propsdefinePorps的参数是一个数组，可以直接接收多个propsdefinePorps的返回值是所有接收的props组成的proxy对象但是这种接收是直接接收，不限制类型方法2：还是使用setup中默认存在的defineProps方法接收propsdefineProps方法接收一个泛型，泛型是一