随笔分类 -  Vue3

摘要:vue3.5保证你看得明明白白子组件中设置默认属性 <template> <div class="child-page"> <h1>我是子组件</h1> <h3>{{ total }}</h3> <h3>{{ userInfo }} </h3> </div> </template> <script setup> // 在<scr 阅读全文
posted @ 2025-01-20 12:30 南风晚来晚相识 阅读(52) 评论(0) 推荐(0) 编辑
摘要:defineModel 同学已经转正 defineModel 在vue3.3中还是一个实验性功能, 但是经过一个学期的努力,该同学已经转正。 defineModel的简单介绍 defineModel() 返回的值是一个 ref。 它可以像其他 ref 一样被访问以及修改。 它能起到在父组件和当前变量 阅读全文
posted @ 2024-06-25 12:31 南风晚来晚相识 阅读(2007) 评论(6) 推荐(10) 编辑
摘要:vue3 中watch监听数组,数组变化后未触发回调 今天发生了一个很神奇的现象,就是我使用watch监听数组时。 被监听的数组已经发生了变化。但是没有触发回调操作。 当时的我感到很疑惑? 不应该呀? vue2都是可以的。 vue3 咋个不行了。 我是这样操作的-watch回调并没有触发 <scri 阅读全文
posted @ 2022-11-24 23:22 南风晚来晚相识 阅读(2005) 评论(0) 推荐(1) 编辑
摘要:我对 reactive源码的理解 reactive 只能够代理对象 首先它判断传递过来的值是否是对象,如果是才会进行代理。变成响应式的。 Proxy 并没有重写对象的属性,只做代理,在取值的时候回调用get,设置值的时候回调用set方法 在get的时候使用了 Reflect.get(target,k 阅读全文
posted @ 2022-08-11 11:10 南风晚来晚相识 阅读(127) 评论(0) 推荐(0) 编辑
摘要:vue3-mixins 在开发的过程中我们会遇见相同或者相似的逻辑代码。 可以通过vue的 mixin 功能抽离公共的业务逻辑, 然后通过impor再组件中引入。通过mixins注册进来。 这样我们就可以使用mixin中共同的业务逻辑 我们通常会在src下创建一个文件夹mixins。 然后在创建mi 阅读全文
posted @ 2022-05-12 17:00 南风晚来晚相识 阅读(12105) 评论(0) 推荐(3) 编辑
摘要:#### markRaw ``` 作用:将一个对象标记为不可以被转化为代理对象。返回该对象本身。 应用场景: 1.有些值不应被设置成响应式时,例如复杂的第三方类库等 2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能 3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。 `` 阅读全文
posted @ 2022-05-11 11:04 南风晚来晚相识 阅读(14142) 评论(0) 推荐(0) 编辑
摘要:需求描述 有些时候,我们需要做这样的处理。 点击A按钮的时候,出现组件A 点击B按钮的时候,出现组件B 点击C按钮的时候,出现组件C 这个时候,我们就可以使用动态组件了 动态组件 <template> <div> <el-button @click="hander(item.com)" v-for= 阅读全文
posted @ 2022-05-08 17:09 南风晚来晚相识 阅读(689) 评论(0) 推荐(0) 编辑
摘要:插槽 当组件中只有一个插槽的时候,我们可以不设置 slot 的 name 属性。 v-slot 后可以不带参数,但是 v-slot 在没有设置 name 属性的时候, 插槽口会默认为“default”。 插槽主要是在封装组件的时候去使用 注意点:v-slot 只能添加在 <template>上哈。 阅读全文
posted @ 2022-05-07 21:05 南风晚来晚相识 阅读(628) 评论(0) 推荐(0) 编辑
摘要:场景描述 我们都知道,子组件是不能够去修改父组件传递过来的数据。 因为如果子组件去修改父组件件传递过来的数据。 会导致数据的应用流向变得难以理解。 但是有些时候,我们需要当子组件的数据变化后,父组件的数据也跟着变化。 vue2中我们可以使用.sync来解决这个办法。 那么vue3应该怎么去处理这个问 阅读全文
posted @ 2022-05-05 23:28 南风晚来晚相识 阅读(1714) 评论(0) 推荐(0) 编辑
摘要:1.生命周期 生命周期是指:vue实例从创建到销毁这一系列过程。vue官网生命周期如下图所示: vue的生命周期有多少个 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy,destroy 阅读全文
posted @ 2022-03-14 22:06 南风晚来晚相识 阅读(2453) 评论(0) 推荐(0) 编辑
摘要:vue3路由的使用,保证你有所收获!路由变量 有的小伙伴,可能是第一次听见路由变量这个词。 什么是路由变量了,顾名思义就是这个路由地址是动态的,不是固定的。 它的运用场景是哪里呢? 比如说:1.详情页的地址,我们就可以去使用路由变量。 比如说博客园的文章详情:https://www.cnblogs.com/IwishIcould/p/ 阅读全文
posted @ 2022-01-17 20:32 南风晚来晚相识 阅读(2282) 评论(0) 推荐(1) 编辑
摘要:1. 我们对ref的错误理解 ref 经常去监听基本数据类型。 同时也可以去监听【数组】【对象】都是可以的。 ref是深度的监听。并不是大家说的那样不能去监听复杂的数据类型。 只是根据我们推荐ref去监听基本数据类型。 reactive 去监听引用数据类型。 在项目中 reactive我们使用的较多 阅读全文
posted @ 2022-01-14 16:40 南风晚来晚相识 阅读(411) 评论(0) 推荐(1) 编辑
摘要:watch 监听 reative 创建的值 const state = reactive({ nickname: "xiaofan", age: 20 }); setTimeout(() => { state.age++; }, 800); // 修改age值时会触发 watch的回调 watch( 阅读全文
posted @ 2022-01-10 12:30 南风晚来晚相识 阅读(1843) 评论(0) 推荐(0) 编辑
摘要:我对teleport的理解 teleport有传送的意思,读音【te li po t】[嘻嘻],看官们应该知道读啥子了吧 它可以将你写的代码传送到某一个地方 传送到哪一个地方呢? 传送到你标记的地方,比如说传送到body下,html下 官方说:Teleport 是一种能够将我们的模板移动到 DOM 阅读全文
posted @ 2021-11-14 19:35 南风晚来晚相识 阅读(339) 评论(0) 推荐(0) 编辑
摘要:值得注意的新特性 1==> 组合式 API 2==> Teleport 3==> 片段 4==> 触发组件选项 5==> createRenderer API 来自 @vue/runtime-core 创建自定义渲染器 6==> 单文件组件组合式 API 语法糖 (<script setup>) 实 阅读全文
posted @ 2021-08-30 17:35 南风晚来晚相识 阅读(167) 评论(0) 推荐(0) 编辑
摘要:场景描述 在项目开发中。我们可能会使用父组件调用子组件中的方法 也有可能子组件中调用父组件中的方法 下面我们来看一看组件之间方法的调用 父组件页面 <template> <div> <list-com ref="listRef"></list-com> <button @click="changeV 阅读全文
posted @ 2021-08-16 22:25 南风晚来晚相识 阅读(2364) 评论(0) 推荐(0) 编辑
摘要:场景描述 在使用vue3的时候。我们很多人喜欢一个页面分成几个几个部分来写 这样做的目的是为了区分。 做的彼此的逻辑互相独立,互不干扰 但是有的时候,我们可能会去获取不属于自己区域的函数 这个时候我们有集中方式去获取函数呢?? 传参的方式 <script> import { reactive } f 阅读全文
posted @ 2021-08-16 21:22 南风晚来晚相识 阅读(1521) 评论(0) 推荐(0) 编辑
摘要:场景描述 今天遇见一个问题, tableAllFun 函数中写了一个 index=1; 然后在 otherAllFun 函数中去改变这个index=2的值 奇怪的事情发生了 在视图index展示的值是2; 但是在打印的时候index=1 我就是觉得很奇怪 代码 <template> <div> <l 阅读全文
posted @ 2021-08-11 21:51 南风晚来晚相识 阅读(73) 评论(0) 推荐(0) 编辑
摘要:逻辑分层 我们在使用vue3开发项目的时候, 如何进行【区域分层】呢???? 举一个简单的小粒子 一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】 这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 exp 阅读全文
posted @ 2021-08-08 22:13 南风晚来晚相识 阅读(1004) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示