1 Cannot set property 'errorHandler' of undefined 前端报错 Uncaught TypeError: Cannot set property 'errorHandler' of undefined 样例分析 errorHandler 是vue.config对象上的属性 但在使用Vue.config未初始化为对象，导致操作报错。 app.confi
前言 目标 了解script_setup的有哪些优点 掌握script_setup的语法 graph LR A[script_setup] --> B[1 基本语法] A --> C[2 绑定后可直接在模版中使用] A --> D[3 动态组件] script_setup 1.基本语法 <script setup> 是在单文件组件 (SFC) 中使用组合式
前言 目标 为什么要使用Pinia？ 如何创建和引入Pinia 掌握Pinia的使用方法 graph LR A[Pinia] --> B[1 为什么你应该使用 Pinia] A --> C[2 pinia的引入与使用] A --> D[3 用pinia创建购物车] 1 为什么你应该使用 Pinia？ Pinia的诞生 起始于 2019 年 11 月左右的一次实验，其目
前言 目标 1 了解fragment组件 2 掌握Teleport组件的用法 3 掌握Suspense组件的用法 4 setup什么情况下可以使用async 5 Vue3 其他的变化 graph LR A[新的组件] --> B[1 Fragment组件] A --> C[2 Teleport组件的用法] A --> D[3 Suspense组件的用法] E[Vue3 其他
前言 目标 掌握以下api的用法 graph LR A[api] --> B[1 shallowRef与shallowReactive的用法与区别] A --> C[2 readonly与shallowReadonly的用法与区别] A --> D[3 toRaw与markRaw用法与区别] A --> E[4 customRef的用法] A --> F[5 p
前言 目标 1 toRef与toRefs的用法 2 toRef与ref的不同 toRef与toRefs的用法 看一下官方给的解释 也是就当定义const name = toRef(person,'name') 改变name = '李四'的值，person中的name值也会同步变化 toRef 只能处理一个对象中的一个属性 <h2>{{ person }}</h2>
前言 目标 1 什么是自定义hook函数 2 hook函数的基本用法 Hook 什么是hook 本质上是一个函数，把setup中使用的 Composition Api进行封装 有点类似于vue2.0中的mixin 优点：复用代码，让setup中的逻辑更清晰易懂 hook的基本用法 在hook文件夹下，封装一个usePoint.js方法 usePoint用来获取鼠标点击时的坐标 impor
前言 目标 1 vue3生命周期用法 2 vue3与vue2的生命周期的区别 生命周期 Vue2.0与Vue3.0生命周期不同之处 对比Vue2.0,Vue3.0第一步就会配置并挂载el,后续不会再去判断el 是否配置 Vue3.0中的setup相当于Vue2.0生命周期中的beforeCreate和created beforeUnmount与unmounted相当于Vue2.0中的be
前言 目标 1 watch的监听ref与reactive定义的响应式数据 2 watchEffect的用法 graph LR A[监听] --> B[watch用法] B --> E[监听ref定义的的响应式数据] B --> C[监听reactive定义的响应式数据] A --> D[watchEffect的用法] 一 watch用法 引入watch impor
前言 ... 目标 1 computed的用法 computed的用法 computed 计算属性用法与vue2的类似 引入 import { reactive,computed } from 'vue' 使用 setup(){ let person = reactive({ firstName:'张', lastName:'
前言 在前端开发过程中，最为注重的就是数据的即时性和响应。但随着技术的发展vue2.0的数据响应方式，不能响应属性的新增和删除、以及通过数组下标修改界面不会自动更新等弊端逐渐显露。vue3.0为开发者提供了更为便捷的数据响应方式，接下来就让我们一起去探索一下。 目标 1 基本数据类型与复杂数据类型如何定义响应式数据 2 ref、reactive数据响应式原理 3 vue2.0数据响应方式与弊端
前言 目标 setup是什么以及setup的基础用法 setup和以前的钩子函数可以混用吗 setup下的this为什么undefined？ setup的形参props,context内容以及用法 graph LR A[setup] ---> B[3 其他注意点] A --> C[1 基础用法 ] A --> D[2 形参props,context内容以及用法] B -
前言 ... 目标 1 vue3的优势有哪些 2 如何创建vue3工程 graph LR A[初始vue3] --> B[vue3带来了什么] A --> C[如何创建vue3工程] A --> D[如何引入vue3] 一 vue3带来了什么 从vue2到vue3一个大版本的升级，必然会有一些性能上的优化 性能提升和源码升级 性能提升 源码升级 打包大小减少
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
![[Vue3] 11 pinia的使用](https://s2.51cto.com/images/blog/202408/21100836_66c54c24235b521508.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 10 新组件](https://s2.51cto.com/images/blog/202408/15103834_66bd6a2ad287a12594.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 9 其它API](https://s2.51cto.com/images/blog/202408/14145823_66bc558faf22d46087.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 8 toRef与toRefs的用法](https://s2.51cto.com/images/blog/202408/13085256_66baae68a0de349583.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 7 自定义hook函数](https://s2.51cto.com/images/blog/202408/12174605_66b9d9dd47be229259.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 6 生命周期](https://s2.51cto.com/images/blog/202408/11114842_66b8349ab95af90673.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 5 watch与watchEffect用法](https://s2.51cto.com/images/blog/202408/10105159_66b6d5cfc6b2f40597.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 4 computed](https://s2.51cto.com/images/blog/202408/09161037_66b5cefd1337e42891.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 3 数据响应式](https://s2.51cto.com/images/blog/202408/08134816_66b45c206a87083097.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 3 数据响应式](https://s2.51cto.com/images/blog/202408/07110803_66b2e513bd7ec68767.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 2 setup](https://s2.51cto.com/images/blog/202408/06153912_66b1d320737cf95773.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 1 创建vue3工程](https://s2.51cto.com/images/blog/202408/05150345_66b079510527184027.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
