坚信万物皆可切的切图仔

setup语法糖写起来舒服多了，赶紧学起来吧~

vue3小技巧合集，不看就亏了

前言在vue3.x版本中，watch和watchEffect都能用来监听数据变化，那两者有什么区别呢？watchEffect讲解立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。const count = ref(0)watchEffect(() => console.log(count.value))// -> logs 0setTimeout(() => { count.value++ // -> logs 1}, 10

前言在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)

前言最近比较忙，都没什么时间学习了。在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.再封装一层数据（推荐！

有时在页面刷新或者返回等操作时，想监听路由变化进行数据更新等操作。那么在vue3中怎么对路由进行监听呢？阿彬提供了这两种方法：onBeforeRouteUpdate路由守卫import { useRouter,onBeforeRouteUpdate } from 'vue-router';let router = useRouter()onBeforeRouteUpdate((to) => { // console.log('onBeforeRouteUpdate',to

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

前言最近新项目用vue3搭建的，准备开始使用vue3的语法，从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法，以便于以后复习，也可能帮助到一些小伙伴。1. 修改父组件普通数据使用v-mode语法，代替了vue2.x的.sync修饰符父组件用ref() 定义一个普通数据为响应式变量，例 var test = ref(‘parent’)父组件用v-mode将数据绑定到子组件上 <ChildComponent v-model:test="test" />其实它是以下

vue父子组件可以通过emit进行传参，有些时候我们在子组件传参的同时，父组件也需要传参，比如v-for渲染的列表，可能要把索引当参数传递。那么我们怎么同时接收子组件参数和父组件参数呢？有以下两种方法。一、子组件传出单个参数时// 子组件this.$emit('test',this.param)// 父组件@test='test($event,parentParam)'二、子组件传出多个参数时// 子组件this.$emit('test',this.param1，this.param2,

有三种方法第一种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