最近在前端开发的过程中踩了不少坑,先记录下来,往后整理
路由实例更新
vue.js
里每一次进行路由导航,对应路由的vue.js
组件都会生成一个新的vue实例(简称vm
),不注意这一点话会掉坑。
比如在/home
路由里,在mounted()
中,我在window
下监听了一个键盘事件,为了避免事件重复绑定多次,我设立一个全局变量来标记创建的状态,只有第一次进入时才创建监听事件。
if(!window.keyupFlag){
let myFunc = ()=>{console.log(this.$refs.input1)}; //这里用箭头函数能直接在函数内拿到指向当前的vm的this
window.addEventListener('keyup',myFunc);
window.keyupFlag = 1;
}
但是这样会导致一个问题,在我跳转到别的路由,比如/about
后在跳转回/home
,我在myFunc
函数中this.$refs.input1
就会返回undefined
。
原因就是此时/home
路由中的vm
不再是第一次创建监听时this
指向的vm
了。
那么转换思路,改成每次进入/home
都创建监听事件,且在创建前先清除之前创立的事件。
以及要注意的是,清除事件的target.removeEventListener(type, listener[, options]);
,其中传入的参数要和创建时的一致,且type和listener这两个参数都是必须的,具体的可以参阅MDN文档
这里我选择用vuex
来保存监听的回调函数
let myFunc = ()=>{console.log(this.$refs.input1)};
let oldMyFunc = this.$store.state.myFunc; //第一次进入/home时这里还没有被myFunc赋值,第二次进入路由时就有正确的值了
window.removeEventListener('keyup',oldMyFunc);
window.addEventListener('keyup',myFunc);
this.$store.commit('setMyFunc',myFunc);
使用Axios发起POST请求时,产生OPTIONS请求问题
原因是跨域发起复杂请求时,按照新的标准浏览器会先发起一个预检请求OPTIONS请求来测试请求是否能被服务器接受,如果服务端对此没有相应的处理,就会出现请求失败的问题。
最合适的解决方案,就是让服务端对options请求作出做出正确的响应。
我在node后端中的统一响应代码(Express):
app.all('*', function(req, res, next) {
// ...
if (req.method.toLowerCase() === 'options') {
res.sendStatus(200); // 让options尝试请求快速结束
} else {
next();
}
});
几个参考
http://www.ruanyifeng.com/blo...
https://juejin.im/post/5c68b2...
https://segmentfault.com/a/11...
Oauth2.0授权请求
相关的教程很多,但是有两点鲜有提及
- 授权服务端要设置请求中的回调域名或ip地址
-
当使用
code
来请求access_token
时,发起的请求头Header中要设置"Authorization": ...,
具体的Authorization值可能不同的服务端会有区别,我的项目中用的是//BASE64编码字符串"clientId:clientSecret" 'Basic ' + window.btoa(clientId + ':' + clientSecret);
慎用Vue中的keep-alive
官方文档Vue API Keep-alive
官方示例在动态组件上使用 keep-alive
被<keep-alive>
包裹的组件实例,能够被在它们第一次被创建的时候缓存下来。
换句话说,只有第一次访问这个组件实例的时候才会调用生命周期钩子中created(), mounted()
等方法,而往后再次进入该组件时只会触发activated(), deativated()
钩子。这一点比较明显。
除非有明确的场景需求这个功能,否则尽量不要使用<keep-alive>
,更加不要把他加在根组件上,否则可能会有奇怪的表现问题。
比如这样的结构App.vue > parent.vue > child.vue
访问时url是这样 http://localhost:3000/#/parent/child
每次进入嵌套的子路由,父路由的生命周期又会走一遍,导致父路由内的组件被重复创建。有时还会出现创建了2个父路由内组件实例的情况。
问题就是出在App.vue
中
<keep-alive>
<router-view ></router-view> // 导航到parent.vue
</keep-alive>
去掉keep-alive
就行
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。