随笔分类 - Vue3
摘要：场景 有些时候我们的页面是有很多的弹窗 如果我们把这些弹窗都写html中会有一大坨 因此：我们需要把弹窗封装成命令式的形式 命令式弹窗 // 使用弹窗的组件 <template> <div> <el-button @click="openMask">点击弹窗</el-button> </div> <
阅读全文
摘要：二次封装组件需要考虑的3个重要的问题 1，props 如何进行传递 2，插槽如何穿透 3，暴露实例以及实例中的方法 在vue3中的$attrs的变化 vue3中$listeners已被删除合并到$attrs中。 vue3的$attrs现在包括class和style属性。 vue2中不包含class和
阅读全文
摘要：Vue3 中的 watch 只能监视以下四种数据 1，ref 定义的数据。 2，一个响应式对象（如：reactive 定义的数据）。 3，函数的返回一个值（getter函数）。getter函数其实就是：能返回一个值的函数 4，由以上类型的值组成的数组 地址：https://cn.vuejs.org/
阅读全文
摘要：
使用reactive父组件第二次传递给子组件的数据：方法中可以获取到最新数据 <template> <div> <div> <h1>子组件</h1> <child :infoObj='infoObj' ref="childRef"></child> </div> <button @click='up
阅读全文
使用reactive父组件第二次传递给子组件的数据：方法中可以获取到最新数据 <template> <div> <div> <h1>子组件</h1> <child :infoObj='infoObj' ref="childRef"></child> </div> <button @click='up
阅读全文
摘要：useTemplateRef 的简单介绍 官方:返回一个浅层 ref，其值将与模板中的具有匹配 ref attribute 的元素或组件同步。 参数匹配机制：useTemplateRe的参数需与模板中 ref 属性值必须完全一致 响应式变量类型明确：返回值是一个 浅层 ref对象，其 .val
阅读全文
摘要：
子组件中设置默认属性 <template> <div class="child-page"> <h1>我是子组件</h1> <h3>{{ total }}</h3> <h3>{{ userInfo }} </h3> </div> </template> <script setup> import {
阅读全文
子组件中设置默认属性 <template> <div class="child-page"> <h1>我是子组件</h1> <h3>{{ total }}</h3> <h3>{{ userInfo }} </h3> </div> </template> <script setup> import {
阅读全文
摘要：defineModel 同学已经转正 defineModel 在vue3.3中还是一个实验性功能, 但是经过一个学期的努力,该同学已经转正。 defineModel的简单介绍 defineModel() 返回的值是一个 ref。 它可以像其他 ref 一样被访问以及修改。 它能起到在父组件和当前变量
阅读全文
摘要：vue3 中watch监听数组，数组变化后未触发回调 今天发生了一个很神奇的现象，就是我使用watch监听数组时。 被监听的数组已经发生了变化。但是没有触发回调操作。 当时的我感到很疑惑？ 不应该呀？ vue2都是可以的。 vue3 咋个不行了。 我是这样操作的-watch回调并没有触发 <scri
阅读全文
摘要：我对 reactive源码的理解 reactive 只能够代理对象 首先它判断传递过来的值是否是对象，如果是才会进行代理。变成响应式的。 Proxy 并没有重写对象的属性，只做代理，在取值的时候回调用get,设置值的时候回调用set方法 在get的时候使用了 Reflect.get(target,k
阅读全文
摘要：vue3-mixins 在开发的过程中我们会遇见相同或者相似的逻辑代码。 可以通过vue的 mixin 功能抽离公共的业务逻辑， 然后通过impor再组件中引入。通过mixins注册进来。 这样我们就可以使用mixin中共同的业务逻辑 我们通常会在src下创建一个文件夹mixins。 然后在创建mi
阅读全文
摘要：#### markRaw ``` 作用:将一个对象标记为不可以被转化为代理对象。返回该对象本身。 应用场景: 1.有些值不应被设置成响应式时,例如复杂的第三方类库等 2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能 3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。 ``
阅读全文
摘要：需求描述 有些时候，我们需要做这样的处理。 点击A按钮的时候，出现组件A 点击B按钮的时候，出现组件B 点击C按钮的时候，出现组件C 这个时候，我们就可以使用动态组件了 动态组件 <template> <div> <el-button @click="hander(item.com)" v-for=
阅读全文
摘要：插槽 当组件中只有一个插槽的时候，我们可以不设置 slot 的 name 属性。 v-slot 后可以不带参数，但是 v-slot 在没有设置 name 属性的时候， 插槽口会默认为“default”。 插槽主要是在封装组件的时候去使用 注意点：v-slot 只能添加在 <template>上哈。
阅读全文
摘要：场景描述 我们都知道，子组件是不能够去修改父组件传递过来的数据。 因为如果子组件去修改父组件件传递过来的数据。 会导致数据的应用流向变得难以理解。 但是有些时候，我们需要当子组件的数据变化后，父组件的数据也跟着变化。 vue2中我们可以使用.sync来解决这个办法。 那么vue3应该怎么去处理这个问
阅读全文
摘要：1.生命周期 生命周期是指:vue实例从创建到销毁这一系列过程。vue官网生命周期如下图所示： vue的生命周期有多少个 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy,destroy
阅读全文
摘要：
路由变量 有的小伙伴，可能是第一次听见路由变量这个词。 什么是路由变量了，顾名思义就是这个路由地址是动态的，不是固定的。 它的运用场景是哪里呢？ 比如说:1.详情页的地址，我们就可以去使用路由变量。 比如说博客园的文章详情：https://www.cnblogs.com/IwishIcould/p/
阅读全文
路由变量 有的小伙伴，可能是第一次听见路由变量这个词。 什么是路由变量了，顾名思义就是这个路由地址是动态的，不是固定的。 它的运用场景是哪里呢？ 比如说:1.详情页的地址，我们就可以去使用路由变量。 比如说博客园的文章详情：https://www.cnblogs.com/IwishIcould/p/
阅读全文
摘要：1. 我们对ref的错误理解 ref 经常去监听基本数据类型。 同时也可以去监听【数组】【对象】都是可以的。 ref是深度的监听。并不是大家说的那样不能去监听复杂的数据类型。 只是根据我们推荐ref去监听基本数据类型。 reactive 去监听引用数据类型。 在项目中 reactive我们使用的较多
阅读全文
摘要：watch 监听 reative 创建的值 const state = reactive({ nickname: "xiaofan", age: 20 }); setTimeout(() => { state.age++; }, 800); // 修改age值时会触发 watch的回调 watch(
阅读全文
摘要：我对teleport的理解 teleport有传送的意思，读音【te li po t】[嘻嘻],看官们应该知道读啥子了吧 它可以将你写的代码传送到某一个地方 传送到哪一个地方呢？ 传送到你标记的地方，比如说传送到body下，html下 官方说：Teleport 是一种能够将我们的模板移动到 DOM
阅读全文
摘要：值得注意的新特性 1==> 组合式 API 2==> Teleport 3==> 片段 4==> 触发组件选项 5==> createRenderer API 来自 @vue/runtime-core 创建自定义渲染器 6==> 单文件组件组合式 API 语法糖 (<script setup>) 实
阅读全文
浙公网安备 33010602011771号