![](https://img-blog.csdnimg.cn/dcb0038d364e40078b14317245e7e0e8.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3来喽~
提供一些vue3的实际开发技巧
前端阿彬
学如逆水行舟,不进则退
展开
-
【vue3】咱就是说,用setup语法糖它不香吗
setup语法糖写起来舒服多了,赶紧学起来吧~原创 2022-04-08 16:47:17 · 3473 阅读 · 0 评论 -
【vue3】小技巧合集
vue3小技巧合集,不看就亏了原创 2022-02-09 10:49:13 · 1108 阅读 · 0 评论 -
【vue3】watchEffect和watch 的区别详解
前言在vue3.x版本中,watch和watchEffect都能用来监听数据变化,那两者有什么区别呢?watchEffect讲解立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。const count = ref(0)watchEffect(() => console.log(count.value))// -> logs 0setTimeout(() => { count.value++ // -> logs 1}, 10原创 2022-01-25 17:50:05 · 9723 阅读 · 0 评论 -
【vue3】ref获取v-for循环渲染的元素
前言在vue2里我们可以给元素绑定ref属性,然后使用this.$refs.xxx 就可以获取到元素。而在vue3版本中,你可以继续使用vue2的option Api的语法,也可以使用vue2的写法。或者还是用ref绑定元素,然后再setup方法中return 这个ref变量,如下:<div ref="myDom"> </div><script lang="ts">... setup(){ let myDom = ref(null)原创 2022-01-21 16:03:24 · 7591 阅读 · 6 评论 -
【vue3】reactive不能直接赋值的解决方法
前言最近比较忙,都没什么时间学习了。在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同。在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性。然后赋值是我们经常进行的操作,那么该怎么解决呢?方法1. 改为ref定义const arr= ref([])arr.value = [1, 2, 3]2. push新增数据const arr = reactive([])arr.push(...[1, 2, 3])3.再封装一层数据(推荐!原创 2022-01-11 10:48:48 · 11128 阅读 · 4 评论 -
【vue3】监听路由变化
有时在页面刷新或者返回等操作时,想监听路由变化进行数据更新等操作。那么在vue3中怎么对路由进行监听呢?阿彬提供了这两种方法:onBeforeRouteUpdate路由守卫import { useRouter,onBeforeRouteUpdate } from 'vue-router';let router = useRouter()onBeforeRouteUpdate((to) => { // console.log('onBeforeRouteUpdate',to原创 2021-12-28 11:06:31 · 39252 阅读 · 5 评论 -
【vue3】vue原型挂载全局变量和获取的方法
vue2.x挂载全局是使用Vue.prototype.xxxx=xxx的形式来挂载,然后通过this.xxxx=xxx的形式来挂载,然后通过this.xxxx=xxx的形式来挂载,然后通过this.xxx来获取挂载到全局的变量或者方法但是在vue3.x这种方法行不通了,在setup里面连this都获取不到,那么我们怎么挂载全局变量呢并使用它呢?1. 挂载在main.js中进行挂载import { createApp } from 'vue'import App from './App'cons原创 2021-12-27 11:03:32 · 4691 阅读 · 3 评论 -
【vue3】子组件修改父组件传过来的props数据
前言最近新项目用vue3搭建的,准备开始使用vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法,以便于以后复习,也可能帮助到一些小伙伴。1. 修改父组件普通数据使用v-mode语法,代替了vue2.x的.sync修饰符父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’)父组件用v-mode将数据绑定到子组件上 <ChildComponent v-model:test="test" />其实它是以下原创 2021-12-17 09:44:27 · 23300 阅读 · 7 评论 -
【vue3】子组件用emit传递参数的同时,父组件也传递参数
vue父子组件可以通过emit进行传参,有些时候我们在子组件传参的同时,父组件也需要传参,比如v-for渲染的列表,可能要把索引当参数传递。那么我们怎么同时接收子组件参数和父组件参数呢?有以下两种方法。一、子组件传出单个参数时// 子组件this.$emit('test',this.param)// 父组件@test='test($event,parentParam)'二、子组件传出多个参数时// 子组件this.$emit('test',this.param1,this.param2,原创 2021-12-24 09:40:41 · 4415 阅读 · 0 评论 -
【vue3】获取当前页面路由的四种方法
有三种方法第一种import { defineComponent, ref, getCurrentInstance } from 'vue';const { proxy }: any = getCurrentInstance();console.log(proxy.$router.currentRoute.value);第二种import { defineComponent, ref, toRaw} from 'vue';import { useRouter } from 'vue原创 2021-12-24 16:19:27 · 46435 阅读 · 3 评论