Vue 踩坑记录

1.beforeRouteUpdate（导航守卫）
我们在面对多个id不同的用户的时候，我们会用同一个User组件去渲染他们，只是通过不同的id去请求对应的用户信息，通常我们会做成动态路由，使用动态路径参数来实现，像下面这样

const router = new VueRouter({
	routes:[
		{path:'/user/:id',component:User}
	]
})

这样子的话不管是id为12332432，还是id为787864的用户，都会映射到相同的路由（’/user/:id’），也用的是同一个User组件，需要注意的是，当在当前用户想查询另一个用户的时候，变化的只是id和路由，而当路由使用的是同一个组件时，原来的组件实例会被复用，也就意味着组件的生命周期不会再被调用。
有三个方法可以解决这个问题：

// A.通过检测$route对象
<scripe>
export default{
	watch:{
		$route(to,from){
			//对路由变化做出响应，比如根据新的id重新加载用户信息
		}
	}
}
</script>
// B.利用导航守卫beforeRouteUpdate
<scripe>
export default{
	beforeRouteUpdate(to,from,next){
		//对路由变化做出响应，比如根据新的id重新加载用户信息
		//记得要next()
	}
}

// C.利用key
// vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。但是前提是key得保持唯一性，也就是key的值不能是相同的，不然vue会当成是同一个元素，所以我们可以利用path给router-view加上key，使得组件不会被复用，可以正常调用生命周期

```javascript
<template>
	<div>
		<router-view :key='key'></router-view>
	</div>
</template>
<script>
	export default({
		computed:{
			key(){
				return this.$route.path
			}
		}
	})
</script>

2.watch的用法
之前我用watch都是用得很死板，比如我要根据路由的变化去处理一些事情，我往往是这样做的：

<script>
export default ({
	watch:{
		$route(newRoute,oldRoute){
			// dosomething
			// 可能我想重复调一个方法，但是我也只会把方法再搬一次写过来
		}
	}
})
</script>

//后来重新看vue文档，发现原来还可以这么写：
<script>
export default ({
	watch:{
		$route：‘doSomething’
	},
	methods:{
		doSomething(){
			console.log('doSomething when the router change')
		}
	}
})
</script>

3.是node环境的问题，反正我是搞得挺头疼的，每次都有新的问题，先丢几个解决的方法，有空再整理吧



3.用的Ant Design of Vue，表格的时候用到这个，eslint报错了。。。

加一行这个就不报了，意思是让eslint不检测下一行：

<!-- eslint-disable-next-line -->

4.用el-input二次封装的时候，我为了数据回显的时候可以正确地触发方法，我用了nextTick去处理，刚开始是解决了问题，但是后面又触发了其他问题，就是测试那边发现在输入的时候，在已有的文字前面插入文字的时候，光标会跑到最后面，刚开始并不知道是nextTick的问题，调试了很久才发现，原来是nextTick的问题

一开始是这么写
后面发现是nextTick的问题，就改成下面这样了