vue3
A黄俊辉A
这个作者很懒,什么都没留下…
展开
-
uniapp+vue3+setup语法糖开发微信小程序时不能定义globalData的解决方法
在使用 uniapp 开发小程序的时候, 发现使用了setup 语法糖 ,定义 globalData 时,要不是定义不了, 要不就是使用 getApp()取不到,后来想到一个不伦不类的方法解决了, 这个方法有点难看, 但是解决了问题。原创 2024-03-18 18:42:03 · 545 阅读 · 0 评论 -
Vue 封装的 axios 类的使用(小bug 改进)
改进方法, 每一次都来 new api()的实例有点麻烦,所以, 我在 api 的类中添加了一个静态方法。有了静态方法,就不用每次使用时就要new了。业务类 api 继承 http。原创 2024-01-09 10:38:14 · 1135 阅读 · 0 评论 -
vue2和vue3中注册全局属性的区别(例如全局使用axios )
以上两种方法都是通过 getCurrentInstance()的方法,获取到的全局属性,官方强烈不推荐,并没有说它不可以使用。在vue2中注册全局属性是很方便的, 只需要使用 vue.prototype.XXXX = XXXX就可以了,如下面的代码。如果说以上的两个方法, 不是太好, 我们也可以合使用 provide, injecdt 的依赖注入的方法引入全局属性。然后在子页面中,就可以使用 this.$axios() 的方法了。在这种方法中, proxy 就相当于 vue2中的this。原创 2023-12-11 16:35:05 · 462 阅读 · 0 评论 -
vue3组合式api <script setup> props 父子组件的写法
父组件传入子组个的变量, 子组件是无法直接修改的, 只能通过 emit的方式, 让父组件修改, 之后子组件更新。父组件的写法没有变, 子组件的写法就有很大的变化了。原创 2023-08-31 15:38:12 · 1010 阅读 · 0 评论 -
vite 配置自动补全文件的后缀名
如果 想要像 webpack 一样的不用写, 可以在vite.config.js中配置如下就可以了。vite 不建议自动补全,文件的后缀名的。文件是必须要加上 .vue 的后缀名的。原创 2023-08-28 14:44:38 · 1889 阅读 · 0 评论 -
vue3学习七 toRef 和 toRefs
toRef 和 ref 的作用差不多是一样的,都是可以把一个数据变成响应式的我们一般使用toRef 或都 toRefs 是用来,简化 template 中的 数据的写法的, 使一个深层次的数据不用书写的时候那么麻烦。如果不嫌麻烦的话, 这两个api 可以不用从上图中, 可以看到, 因为我们 返回的是person , 所以, 在template 数据中, 到处都是 person. 的字样, 如果我们不想在template中写那么多 person. 用什么方法解决呢?原创 2023-05-09 18:02:40 · 491 阅读 · 0 评论 -
vue3学习六 hooks
如果, 我新建了一个 hooks的文件夹, 用来存放 很多的hooks 文件, 在这个js文件中, 可以使用 setup中的所有写法, 完成之后, 把得到的结果 返回出去就可以了。相当于是把一个功能性的一组方法, 封装的别的地方, 当每一个 component中需要用到相应的组件的时候, 可以很方便用引入其中来使用。我们有很多的页面, 但是每一个页面都有一个共同的功能, 就是 倒计时的效果, 如果我们每一个页面都去写倒计时的代码, 肯定是浪费功夫。从上面的图中可以看到,原创 2023-05-09 17:08:18 · 910 阅读 · 0 评论 -
vue3学习五 watchEffect
和 computed 好像差不多, 只不过 computed 注意的是结果, 它会return 一个数据, 而 watchEffect 注重的是过程, 它是没有 返回结果的,从上面的代码可以看到 watchEffect 并显示的声明自已监听的是什么变量, 只要是在它的回调函数中的数据发生了变化, 它都是会执行其中的方法的,个人感觉差别不是太大。原创 2023-05-09 15:58:25 · 54 阅读 · 0 评论 -
vue3学习四 watch
sum } } < / div > < button @click = "sum++" > sum变化 < / button > < div > msg : {'" > msg 变化 < / button > < / template > < script > import {let msg = ref("你好啊");// watch(sum,(newvalue,oldvalue)=>{ // console.log("sum发生了变化",newvalue,oldvalue);原创 2023-05-09 15:34:52 · 832 阅读 · 0 评论 -
vue3学习三 computed
)上面的 使用 reactive 定义数据的时候, 就不需要使用value。原创 2023-05-09 13:21:16 · 855 阅读 · 0 评论 -
vue3学习二 ref 和 reactive
vue3中的响应式数据, 使用的是 ref 和 reactiveref 的底层使用的也是reactive。原创 2023-05-09 10:26:04 · 79 阅读 · 0 评论 -
vue3学习一 setup
vue3中没有 data 等配置项, 并且它的引入方式也不是像vue2中的 import vue就可以了, 而是用到什么再引入什么, 其中 setup() 函数, 是最大的区别vue3中的 setup 有点像vue2中的 data , 但又不完全是setup 会在 生命周期created 之前执行一次,也就是说 setup 函数中是没有 this的, 因为vue还没有加载上去。原创 2023-05-09 11:11:10 · 596 阅读 · 0 评论