Vue学习中的一些感悟

在使用 Vue 进行实际开发中,遇到了不少问题,在成功解决后,我觉得有必要把遇到的问题记录下来。一是以后遇到类似的问题时,方便查阅,二是能够激励自己继续学习。

关于 e.target 和 e.currentTarget

场景:给 v-for 循环渲染出的含有子元素的元素添加了 click 事件,并且动态绑定了 id 属性,想要在点击该元素时,输出对应的 id 值。

在这里需要使用 e.currentTarget.id 而不是 e.target.id

解释如下:

当点击事件发生在绑定事件对象的子元素上时,e.currentTarget.会始终返回绑定事件的对象,而 e.target 会返回绑定点击事件的元素的子元素。

不管你点击的是元素本身或者元素里面任何子元素,currentTarget 获取到的对象都为绑定事件的元素。当使用 target 时,如果你点击到绑定事件的元素则返回该元素,如果点击到它之中的某个子级元素则返回它之中的某个元素。

上文可能有点啰嗦,总结一下,target 会变,点到谁身上就返回谁,currentTarget 不会变,返回事件源对象。

返回上一页的解决方式

使用 go()和 back()

history.go(-1):后退同时刷新页面

history.go(1):前进

使用 go,原页面表单中的内容会丢失。

history.back():后退

history.back(0):刷新

history.back(1):前进

使用 back,原页表表单中的内容会保留

vue-router

使用了 vue-router 的话,可以用 this.\$router.go(-1) 返回上一页。

这里需要注意的是:history.go(-1)是回到浏览器上一页,但是由于 Vue 应用是单页应用,浏览器的访问历史未必和 Vue 的浏览历史相同。

watch 中的 deep 和 immediate 参数

这两个选项在官方文档中一笔带过。

个人感觉有需要的时候还是很好用的,比如使用 deep 监听对象中属性的变化。

vue-router 项目的 404 页面

这个只需要在路由配置中加入 path 值为*的选项:

1
2
3
4
{
path: '*',
component: () => import('./notFindPage')
},

vue-router 跳转页面记忆页面的滚动位置

开始做的时候用了非常麻烦的方法,后来去看文档,发现只需要一个设置而已。

首先需要开启 vue-router 的history 模式

然后具体设置如下:

1
2
3
4
5
6
7
8
9
10
11
const router = new VueRouter({
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (savedPosition) { //如果savedPosition存在,滚动条会自动跳到记录的值的地方
return savedPosition
} else {
return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
}
},
routes: [...]
})

官方文档里关于配置也讲的很详细。

总结与吐槽

以上就是我这段时间学习 Vue 的一些感悟,虽然不是很深入的东西,但新手学习东西不免会遇到坑,只有跨过这些坑才能更好地掌握一门技术。

其实最好的解决方法就是去查看官方文档,文档里讲的比任何地方都全,这段时间看文档,受益良多。

稍微吐槽一下吧,网上的教程质量确实参差不齐,就拿 csdn 举例,之前搜教程的时候看到这么一篇文章,作者大佬确实言辞比较激烈,个人感觉话糙理不糙,这段时间学下来,感觉解决问题最好的论坛就是segmentfaultstack overflow.了。