常见的踩坑总结:
1 JSON.parse()
使用函数时出现 “SyntaxError: Unexpected token o in JSON at position 1”的错误提示,这里一般是类型错误,JSON.parse要求传入的是字符串类型,如果传入的参数是对象,就会有这个错误信息
2 选出来的节点值是null:
这种错误原因一般有两个:
1 不存在该节点
2 有这个节点,但是还没有渲染出来
比如说,在created里面选择节点的时候往往出现这个错误,因为在这个生命周期中,DOM节点还没被渲染出来,所以选择出来的元素是空的
3 比较一下常用的选择节点方法
1 用最原始的方式:
document.getElementById()等原生的js函数
缺点:用这个函数会全局搜索,效率较低
2 通过this.$refs选择
$refs是非响应式的,应当避免在模版或计算属性中使用
3 通过this.$el来选择
也是需要在元素渲染出来后才能使用这个方法来选择元素
4 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."
这个错误是在使用vuex的时候是在外面改变了state的值,而不是通过getters等
有时候要找引起这个错误的函数不是那么明显,因为在js中,对象的赋值是浅赋值,所以如果直接将vuex中的state里面的对象直接赋值给外面的对象,修改外面的对象时也会引起这个错误。当有这个需求的时候可以先将该对象用JSON.stringify()将state的对象改变为字符串,在使用JSON.parse()方法转回来,这样就不再是浅赋值,在对外面的对象进行修改时就不会引起这个错误
5 假如有两个路由长这样:
{ path: '/dashboard/home', component: DashboardHome }, { path: '/dashboard/:dashboardId', component: DashboardDetail, props: true },
那么应该把不带参数的路由写前面,带参数的路由写后面,否则会找不到正确的路由