Vue学习中的一些感悟

04-01· 3分钟

在使用 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 举例，之前搜教程的时候看到这么一篇文章，作者大佬确实言辞比较激烈，个人感觉话糙理不糙，这段时间学下来，感觉解决问题最好的论坛就是segmentfault 和stack overflow.了。

前端Vue