媒介
vue现在可谓是一匹黑马,github star数已居第一位！前端开辟关于vue的运用已越来越多，它的长处就不做引见了,
本篇是我对vue运用过程中以及对一些社区朋侪发问我的题目中做的一些总结,协助人人踩坑。假如喜好的话能够点波赞，或许关注一下，愿望本文能够帮到人人!!!
———-我是分割线
本篇引见的题目也许以下:
- 路由变化页面数据不革新题目
- setTimeout/setInterval(泛指异步回掉函数的this指向)this指向转变，没法用this接见VUe实例
- setInterval路由跳转继承运转并没有实时举行烧毁
- vue 转动行动用法,进入路由须要转动到浏览器底部 头部等等
- 完成vue路由阻拦浏览器的需求,举行 一系列操纵 草稿保留等等
- v-once 只衬着元素和组件一次，优化更新衬着机能
- vue当地代办设置 处理跨域题目,仅限于开辟环境
- 当地开辟 没有任何题目 布置效劳器 就404啊这些题目
1. 路由变化页面数据不革新题目
涌现这类状况是因为依靠路由的params参数猎取写在created性命周期内里,因为雷同路由二次以至屡次加载的关联 没有到达监听，退出页面再进入另一个文章页面并不会运转created组件性命周期,致使文章数据照样第一次进入的数据
处理要领：watch监听路由是不是变化
watch: {
// 要领1
'$route' (to, from) { //监听路由是不是变化
if(this.$route.params.articleId){// 推断前提1 推断通报值的变化
//猎取文章数据
}
}
//要领2
'$route'(to, from) {
if (to.path == "/page") { /// 推断前提2 监听路由名 监听你从什么路由跳转过来的
this.message = this.$route.query.msg
}
}
}
2. 异步回调函数中运用this没法指向vue实例对象
//setTimeout/setInterval ajax Promise等等
data(){
return{
...
}
},
methods (){
setTimeout(function () { //别的几种状况雷同
console.log(this);//此时this指向并非vue实例 致使操纵的一些ma'f
},1000);
}处理方案 变量赋值和箭头函数
//运用变量接见this实例
let self=this;
setTimeout(function () {
console.log(self);//运用self变量接见this实例
},1000);
//箭头函数接见this实例 因为箭头函数自身没有绑定this
setTimeout(() => {
console.log(this);
}, 500);
3. setInterval路由跳转继承运转并没有实时举行烧毁
比方一些弹幕，走马灯笔墨，这类须要定时挪用的，路由跳转今后，因为组件已烧毁了，然则setInterval还没有烧毁，还在继承背景挪用，控制台会不停报错，假如运算量大的话，没法实时消灭，会致使严峻的页面卡顿。
处理办法：在组件性命周期beforeDestroy住手setInterval
//组件烧毁前实行的钩子函数，跟其他性命周期钩子函数的用法雷同。
beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就能够像下面这么住手。
clearInterval(this.intervalId);
},
4. vue 转动行动用法,进入路由须要转动到浏览器底部 头部等等
运用前端路由，当切换到新路由时，想要页面滚到顶部，或许是坚持本来的转动位置，就像从新加载页面那样。
vue-router 能做到，而且更好，它让你能够自定义路由切换时页面怎样转动。
注重: 这个功用只在支撑 history.pushState 的浏览器中可用。
路由设置以下: 概况猛戳
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: [...]
})
5. 完成vue路由阻拦浏览器的需求,举行一系列操纵 草稿保留等等
场景：
为了防备用户失误点错封闭按钮等等，致使没有保留已输入的信息(症结信息)。
用法：
//在路由组件中：
...
beforeRouteLeave (to, from, next) {
if(用户已输入信息){
//涌现弹窗提示保留草稿，或许自动背景为其保留
}else{
next(true);//用户脱离
}
}另有beforeEach、beforeRouteUpdate这些性命周期函数 概况猛戳
6. v-once 只衬着元素和组件一次，优化更新衬着机能
v-once这个指令置信人人用的很少,不过个人感觉照样挺有用的！只衬着元素和组件一次。随后的从新衬着，元素/组件及其一切的子节点将被视为静态内容并跳过。这能够用于优化更新机能。
这个就不举例子了 直接猛戳这 v-once
7. vue当地代办设置 处理跨域题目,仅限于开辟环境
这个当地代办用来处理开辟环境下的跨域题目,跨域可谓陈词滥调的题目了,proxy 在vue中设置代办异常简朴
//比方说你要接见 http://192.168.1.xxx:8888/backEnd/paper这个接口
//设置 config.js下面proxyTable对象
proxyTable: {
'/backEnd':{
target:'http://192.168.3.200:8888', //目的接口域名有端口能够把端口也写上
//或许prot当地起效劳端口与效劳端一致
changeOrigin:true,
}
},
// 发送request要求
axios.get('/backEnd/page') //按代办设置 匹配到/backEnd就代办到目的target地点
.then((res) => {
console.log(res) // 数据完全拿获得 设置胜利
this.newsList = res.data
}, (err) => {
console.log(err)
})
或许:
proxyTable: {
'/api':{
target:'http://192.168.3.200:8888', //目的接口域名有端口能够把端口也写上,或许prot当地起效劳端口与服端一致
changeOrigin:true,
pathRewrite: { //该属性重写接口把`/api`去掉
'^/api': ''
}
}
},
// 发送request要求
axios.get('/api/backEnd/page') //按代办设置 匹配到/backEnd就代办到目的target地点
.then((res) => {
console.log(res) // 数据完全拿获得 设置胜利
this.newsList = res.data
}, (err) => {
console.log(err)
}) 8. 当地开辟 没有任何题目 布置效劳器 就404啊这些题目
因为前端路由缘由，单页面运用应当放到nginx或许apache、tomcat等web代办效劳器中，万万不要直接接见index.html，同时要根据本身效劳器的项目途径变动react或vue的路由地点
注重点
1： vue-router的 history 形式
2： 效劳nginx设置
到最后我想说声抱歉,之前准许你们的node因为个人缘由没有实时更新出来,node 方面的文章篇幅一定短不了,因为要把它讲清楚不是一句俩句话的事,幸亏我发现了一篇文章 对初学者提升高等初学者有很大协助,请点击猛戳这里,愿望你仔细的看完这篇文章(书把,篇幅不短),它会对你有很大的协助,我一定在年前给你补一遍开辟完全运用的node 方向的文章！
结语
这篇文章只是最先,它的待续还会很长很长，愿望你我坚持下去！也愿望我能协助到更多的人,固然也会让我真正沉淀一下,为了今后为了未来 一同勤奋假如人人有什么题目,或许须要补充的 迎接留言！我会举行补全的 ！ 细致版本我稍后也会上传到gitHub！
假如以为文章对人人有协助,愿望人人能点赞一下或许关注一下,获得一定的我会越发勤奋！~~
