vue3
文章平均质量分 72
vue3相关内容学习整理
邱先生~
这个作者很懒,什么都没留下…
展开
-
vue3学习(十五)--- Pinia状态管理器
Pinia官网地址点这里Pinia.js 有如下特点:这样就引入成功了,状态管理器使用要单独配置文件。然后在用到的页面中引入,注意:引入和使用是分开的使用defineStore定义仓库,传唯一id。变量名称命名为use…是可组合项之间的约定,以使其使用习惯。唯一的id。类似于的模块的功能,这样更加的方便。State 箭头函数 返回一个对象 在对象里面定义值getters类似计算属性actions里面可以定义同步和异步页面使用引入对应的名称,然后执行。state1. 直接修原创 2023-10-30 22:18:28 · 477 阅读 · 0 评论 -
vue3学习(十四)--- vue3中css新特性
主要是用于修改很多vue常用的组件库(element, vant, AntDesigin),虽然配好了样式但是还是需要更改其他的样式就需要用到样式穿透。原因就是Scoped 搞的鬼 他在进行PostCss转化的时候把元素选择器默认放在了最后。上面提到第三条的规则 因为当前组件标签是没有这个属性标签的,所以无法修改样式。渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。使用场景:在使用插槽组件的时候写样式,默认不会影响。转译实现的),达到样式私有化模块化的目的。对于使用了自定义注入名称的。原创 2023-10-27 14:53:24 · 1345 阅读 · 0 评论 -
vue3学习(十三)---全局定义事件及编写vue插件
之前我们使用vue2的时候使用会将loading、toast、axios等定义为全局属性方便后期使用。Vue3没有prototype属性,使用来绑定属性和事件。声明文件要写,不然TS无法正确类型 推导return `$${return ` $ ${ str } ` } } 声明文件 不然 TS 无法正确类型 推导。原创 2023-10-26 17:27:24 · 1052 阅读 · 0 评论 -
vue3学习(十二)--- 自定义指令
必须以的形式来命名本地自定义指令,以使得它们可以直接在模板中使用。<template>show">开关{{show}} ----- {{title}}</button>console.log("初始化====>");},// 在元素上做些操作console.log("初始化一次=======>");},console.log("初始化========>");},console.log("更新之前");},console.log("更新结束");},原创 2023-10-26 16:19:55 · 383 阅读 · 0 评论 -
vue3学习(十一)--- v-model
添加到组件v-model的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中,我们创建了一个组件,其中包含默认为空对象的 modelModifiers prop父组件<template>show">开关{{show}} ----- {{title}}</button>这里添加修饰符const title = ref('我是标题')</script><style></style>title?: string,默认写法: {原创 2023-10-18 15:26:54 · 317 阅读 · 0 评论 -
vue3学习(十)--- 依赖注入Provide 和 Inject
Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库,React、Vue均可以使用。注意:你如果传递普通的值是不具有响应式的 需要通过ref reactive 添加响应式。如果不让后代组件修改数据可以在传递数据的时候加上readonly限制。这个原理其实是运用了JS设计模式之发布订阅模式,通过一个中间件来处理。的数据或方法,而在任何后代组件中,我们都可以使用。可以在祖先组件中指定我们想要提供给。main.ts 初始化。A组件派发(emit)原创 2023-10-17 17:07:54 · 366 阅读 · 0 评论 -
vue3学习(九)--- keep-alive缓存组件
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。keep-alive接下来看一下keep-aliveonMountedkeep-alive。原创 2023-10-17 16:47:58 · 1069 阅读 · 0 评论 -
vue3学习(八)--- 组件相关
/script>原创 2023-10-17 10:42:53 · 219 阅读 · 0 评论 -
vue3学习(七)--- Teleport传送组件
Teleport>是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。Teleport是一种能够将我们的模板渲染至指定DOM节点,不受父级等属性影响,但data、prop数据依旧能够共用的技术。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响。原创 2023-10-16 17:23:46 · 263 阅读 · 0 评论 -
vue3学习(六)--- 插槽slot
插槽就是:子组件中的提供给父组件使用的一个占位符,用表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。原创 2023-10-16 15:12:09 · 227 阅读 · 0 评论 -
vue3学习(五)--- 父子组件传值
和都是只能在中使用的编译器宏。,且会随着的处理过程一同被编译掉。原创 2023-10-13 16:22:52 · 444 阅读 · 0 评论 -
vue3学习(四)--- watch和watchEffect监听
由于是因为不是响应式数据才需要用函数返回的形式。第二种就是以数组的形式进行侦听,同样回调返回的结果也是以数组的形式展现的。立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。里面属性时,由于不是响应式的原因直接侦听是没有效果的。对这种数据做了处理,用函数返回的形式对数据进行监听。这时候dom都已经更新完成了。就是在触发监听之前会调用一个函数可以处理你的逻辑。,只有在侦听源发生变化时才执行回调函数。,主要区别在于侦听器的更新时间,第一种就是可以分开创建多个。watch() 默认是。原创 2023-10-10 15:12:10 · 426 阅读 · 0 评论 -
vue3学习(三)--- computed计算属性
计算属性就是当依赖的属性的值发生变化的时候,才会触发他的更改,如果依赖的值,不发生变化的时候,使用的是缓存中的属性值。原创 2023-10-10 14:24:26 · 492 阅读 · 0 评论 -
vue3学习(二)--- ref和reactive
常用于es6的解构赋值操作,因为在对一个响应式对象直接解构时解构后的数据将不再有响应式,而使用toRefs和toRef 可以方便解决这一问题。接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。在解构 reactive()得到对象的时候,将解构的数据变成响应式ref()类型.中定义数据默认不是响应式的数据,需要手动将数据转化为响应式的,这里就用到了。当然解构出来的数据依旧需要通过.value的形式来操作.属性的对象,只有对象的形式才能使用。原创 2023-10-09 16:58:24 · 819 阅读 · 0 评论 -
vue3学习(一)---新特性
patch flag 的强大之处在于,当你的 diff 算法走到 _createBlock 函数的时候,会忽略所有的静态节点,只对有标记的动态节点进行对比,而且在多层的嵌套下依然有效。尽管 JavaScript 做 Vdom 的对比已经非常的快,但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升,尤其是在针对大组件的时候。我们发现创建动态 dom 元素的时候,Vdom 除了模拟出来了它的基本信息之外,还给它加了一个标记: 1 /* TEXT */原创 2023-10-09 16:57:49 · 712 阅读 · 0 评论