![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
文章平均质量分 77
前端不加班
本人所写文章内容主要是为了方便自己看,如文章有错误的地方,请多担待!
展开
-
VUE3 全局状态管理 Pinia
全局状态管理原创 2023-02-10 17:05:26 · 110 阅读 · 0 评论 -
Vue3 组件之间的通信
根据它们的缩写,其实是可以知道 Prop 是指 Property ,而 Attr 是指 Attribute ,虽然都是 “属性” ,但 Property 更接近于事物本身的属性,因此需要在组件里声明,而 Attribute 更偏向于赋予的属性,因此用于指代父组件传递的其他未被声明为 Property 的属性。刚接触 Vue 的开发者可能容易混淆这两者,确实是非常接近,都是由父组件传递,由子组件接收,支持传递的数据类型也一样,但为什么一部分是在 props 获取,一部分在 attrs 获取呢?原创 2023-02-09 17:26:09 · 5053 阅读 · 2 评论 -
VUE3 插件的开发和使用
传统的 Webpack 可以用来构建 npm 包文件,但按照目前更主流的技术选项,编译结果更干净更迷的当属 Rollup ,但 Rollup 需要配置很多插件功能,这对于刚接触包开发的开发者来说学习成本比较高,而 Vite 的出现则解决了这个难题,因为 Vite 的底层是基于 Rollup 来完成构建,上层则简化了很多配置上的问题,因此接下来将使用 Vite 来带领开发者入门 npm 包的开发。的新声明 (.d.ts) 文件 ts(7016)原创 2023-02-07 17:42:14 · 5490 阅读 · 0 评论 -
vue3 路由的使用
name 是路由的名称,非必填,但是一般都会配置上去,这样可以很方便的通过 name 来代替 path 实现路由的跳转,因为像有时候的开发环境和生产环境的路径不一致,或者说路径变更,通过 name 无需调整,但如果通过 path,可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上,推出了 异步组件,可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样按需载入,很方便的实现路由组件的懒加载。原创 2023-02-03 17:39:27 · 21558 阅读 · 3 评论 -
VUE3 指令 插槽
如果 Vue 的内置指令不能满足业务需求,还可以开发自定义指令。原创 2023-02-02 15:38:05 · 898 阅读 · 0 评论 -
VUE3 数据的计算
然后可能有其他的计算数据依赖于 list。和 Vue 2.0 一样,数据的计算也是使用 computed API ,它可以通过现有的响应式数据,去通过计算得到新的响应式变量,用过 Vue 2.0 的开发者应该不会太陌生,但是在 Vue 3.0 ,在使用方式上也是变化非常大!这里的 set 就是 computed 的 setter ,它会接收一个参数,代表新的值,当通过 foo.value = xxx 赋值的时候,赋入的这个值,就会通过这个入参来传递进来,可以根据的业务需要,把这个值,赋给相关的数据源。原创 2023-02-01 17:35:30 · 1667 阅读 · 0 评论 -
VUE3 数据的侦听
所以要想定义的 watch 能够做出预期的行为,数据源必须具备响应性或者是一个 getter ,如果只是通过 let 定义一个普通变量,然后去改变这个变量的值,这样是无法侦听的。什么情况下可能会用到批量侦听呢?这个 API 的类型如下,使用的时候需要传入一个副作用函数(相当于 watch 的 侦听后的回调函数 ),也可以根据的实际情况传入一些可选的 侦听选项。来到这里,对 2 个必传的参数都有一定的了解了,先看看基础的用法,也就是日常最常编写的方案,只需要先关注前 2 个必传的参数。这句话是什么意思呢?原创 2022-12-09 15:33:27 · 17289 阅读 · 0 评论 -
VUE3 函数的声明和使用
在 Vue 2 ,函数通常是作为当前组件实例上的方法在 methods 里声明,然后再在 mounted 等生命周期里调用,或者是在模板里通过 Click 等行为触发,由于组件内部经常需要使用 this 获取组件实例,因此不能使用箭头函数。需要在组件创建时自动执行的函数,其执行时机需要遵循 Vue 3 的生命周期,需要在模板里通过 @click、@change 等行为触发,和变量一样,需要把函数名在 setup 里进行 return 出去。在了解了响应式数据如何使用之后,接下来就要开始了解函数了。原创 2022-12-09 11:06:14 · 12373 阅读 · 0 评论 -
VUE3 响应式 API 之 toRef 与 toRefs
相信各位开发者看到这里时,应该已经对 ref 和 reactive API 都有所了解了,为了方便开发者使用, Vue 3 还推出了两个与之相关的 API : toRef 和 toRefs ,都是用于 reactive 向 ref 转换。这两个 API 在拼写上非常接近,顾名思义,一个是只转换一个字段,一个是转换所有字段,转换后将得到新的变量,并且新变量和原来的变量可以保持同步更新。然后分别看看这两个 API 应该怎么使用。原创 2022-12-08 10:24:29 · 2273 阅读 · 0 评论 -
vue3 响应式 API 之 reactive
Vue 2 在操作数组的时候,也可以和普通数组这样处理数据的变化,依然能够保持响应性,但在 Vue 3 ,如果使用 reactive 定义数组,则不能这么处理,必须只使用那些不会改变引用地址的操作。笔者刚开始接触时,按照原来的思维去处理 reactive 数组,于是遇到了 “数据变了,但模板不会更新的问题” ,如果开发者在学习的过程中也遇到了类似的情况,可以从这里去入手排查问题所在。Reactive 对象在读取字段的值,或者修改值的时候,与普通对象是一样的,这部分没有太多问题。原创 2022-11-25 17:04:26 · 1260 阅读 · 0 评论 -
vue3 响应式 API 之 ref
在了解了如何对 Ref 变量进行类型声明之后,面对不同的数据类型,相信都得心应手了!但不同类型的值之间还是有少许差异和注意事项,例如上文提及到该 API 可以用来定义所有类型的数据,包括 Node 节点和组件,具体可以参考下文的示例。基本类型//字符串 const msg = ref < string >('123') //数值 const count = ref < number >(1) //布尔值 const isVip = ref < boolean >(false)原创 2022-11-25 15:46:40 · 9091 阅读 · 0 评论