最近学习Vue3的时候,利用业余时间做了一个简单的ToDoList来进行练习,效果如下:
但是再完成这个小demo的时候遇到了一点常见的坑,所以分享出来,希望给刚刚学习vue3的小伙伴一点帮助
1.路由跳转
正常的路由跳转是需要进行以下几步的
第一步: 引入 useRouter
import { useRouter } from 'vue-router'
第二步: 实例化路由方法
const router = useRouter()
第三步: 使用跳转
router.push('/Login') //无参数
router.push({ path: '/Login', query: { id: 1 } }) //有参数
踩坑点: 但是完成了之后,打印出来router,显示router未定义,是undefind
原因: 将第二步的router在局部作用域中执行了,因为不知名原因,router要在全局来进行赋值
代码如下:
setup () {
const title = ref('Hello Vue!')
const router = useRouter() //router应该在此处赋值,而不能再goLogin方法里赋值
function goLogin () {
// const router = useRouter()
router.push({ path: '/Login', query: { id: 1 } })
}
return { title, goLogin }
},
2.数组二次赋值
**踩坑点:**清空数组,然后再重新给数组赋值的时候,发现数组变化了页面没有响应
代码如下:
underwayList = [];
derwayList = [];
错误点1:重新赋值之后两个数组已经不再是响应数据了,因为没有进行 reactive 包裹起来
修正后代码如下:
underwayList = reactive([]);
derwayList = reactive([]);
错误点2:虽然重新代理了,但是这个数组已经不是页面上的数组,也就不是setup返回出去的那个,通俗来说就是你大爷已经不是你大爷了
正确代码如下:
//方案一:
underwayList.splice(0, underwayList.length);
derwayList.splice(0, derwayList.length);
//方案二:
underwayList.length = 0;
derwayList.length = 0;
两种方法都行,原理是不改变数组的内存地址的情况下来对数组进行一个清空
以上就是个人踩的一点小坑,希望对你有帮助