利用中踩过的坑,演习项目

By admin in 4858美高梅 on 2019年5月5日

  经过前几日的奋力,终于把那一个类型做完了;效率不是繁多,就三个页面那标准吧!在支付进程中也有碰着些小难题的。比方自身在弄那多少个star评选星星组件时就超过叁个难点了,在created事件中作多少请求是异步的,而star调整中的created事件也只会实行三遍,导致页面在加载出来时分数值始终是0的。后面思量了下,使用了watch属性去对数据开始展览监听,从而得以直达效果。

前言

vue最近可谓是1匹黑马,github
star数已居第肆位!前端开拓对于vue的施用已经愈多,它的帮助和益处就不做牵线了,本篇是自身对vue使用进程中以及对有个别社区情侣咨询笔者的主题材料中做的部分总括,帮忙大家踩坑。假如喜欢的话可以点波赞,也许关切一下,希望本文能够帮到我们!

VUE 使用中踩过的坑,vue使用

  截段star控件的代码看看啊。

一.路由变化页面数据不刷新主题素材

现身那种情形是因为依据路由的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  
  }
  }  
 }

前言

vue目前可谓是1匹黑马,github
star数已居第壹个人!前端开拓对于vue的接纳已经更多,它的帮助和益处就不做牵线了,本篇是自家对vue使用进度中以及对有些社区朋友咨询作者的难题中做的局地计算,帮忙我们踩坑。如若喜欢的话能够点波赞,或许关怀一下,希望本文能够帮到大家!

 1 <template>
 2     <div class="star-box">
 3         
 4     </div>
 5 </template>
 6 <script>
 7 function matchScore(score) {
 8   let len = parseInt(score),
 9     floor = parseFloat(score) - len,
10     countStar = 5,
11     group = [];
12   for (var i = 0; i < len; i++) {
13     group.push("on");
14   }
15   if (floor > 0) {
16     group.push("half");
17   }
18   let residue = countStar - group.length;
19   if (residue > 0) {
20     for (var j = 0; j < residue; j++) {
21       group.push("off");
22     }
23   }
24   return group;
25 }
26 
27 export default {
28   props: {
29     score: 0
30   },
31   data() {
32     return {
33       starGroup: []
34     };
35   },
36   methods: {},
37   watch: {
38     score: function(newScore) {
39       this.starGroup = matchScore(newScore);
40     }
41   },
42   created() {
43     this.starGroup = matchScore(this.score);
44   }
45 };
46 </script>
47 <style>
48 .star-box {
49   display: inline;
50   vertical-align: sub;
51 }
52 .star:nth-child(1) {
53   margin-left: 0px;
54 }
55 .star {
56   margin-left: 10px;
57   display: inline-block;
58   width: 20px;
59   height: 20px;
60   background-repeat: no-repeat;
61   background-size: 100% 100%;
62 }
63 .on {
64   background-image: url("./star24_on@2x.png");
65 }
66 
67 .half {
68   background-image: url("./star24_half@2x.png");
69 }
70 
71 .off {
72   background-image: url("./star24_off@2x.png");
73 }
74 </style>

二.异步回调函数中应用this不能够指向vue实例对象

//setTimeout/setInterval ajax Promise等等
 data(){
return
{
  ...
  }
 },
 methods (){
   setTimeout(
function
 () { 
//其它几种情况相同
   console.log(
this
);
//此时this指向并不是vue实例 导致操作的一些ma'f
  },
1000
);
 }

化解方案:变量赋值和箭头函数。(参考:var和let的差异://www.jb51.net/article/134704.htm)

//使用变量访问this实例
let
self
=
this
; 
  setTimeout(
function
 () { 
   console.log(
self
);
//使用self变量访问this实例
  },
1000
);
//箭头函数访问this实例 因为箭头函数本身没有绑定this
  setTimeout(() => { 
  console.log(
this
);
  }, 
500
);

利用中踩过的坑,演习项目。壹.路由变化页面数据不刷新题材

现身那种地方是因为依附路由的params参数获取写在created生命周期里面,因为一样路由二遍甚至一再加载的涉嫌
未有达到规定的规范监听,退出页面再进入另八个作品页面并不会运营created组件生命周期,导致小说多少照旧第3遍进入的数额。

涸泽而渔办法: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  
  }
  }  
 }

  其实开荒进度中遭逢的主题材料不是成都百货上千,vue那一个框架真的是挺轻便上手的,总括下用到知识点:vue二

叁.setInterval路由跳转继续运营并从未即时举办销毁

比方一些弹幕,走马灯文字,那类须求定期调用的,路由跳转之后,因为零部件已经灭绝了,不过setInterval还并未有灭绝,还在三番五次后台调用,调控台会不断报错,假设运算量大的话,不可能即时裁撤,会产生惨重的页面卡顿。

化解办法:在组件生命周期beforeDestroy甘休setInterval

 //组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。
 beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么停止。
  clearInterval(
this
.intervalId);
 },

二.异步回调函数中央银行使this不能指向vue实例对象

//setTimeout/setInterval ajax Promise等等
 data(){
return
{
  ...
  }
 },
 methods (){
   setTimeout(
function
 () { 
//其它几种情况相同
   console.log(
this
);
//此时this指向并不是vue实例 导致操作的一些ma'f
  },
1000
);
 }

消除方案:变量赋值和箭头函数。(参考:var和let的差别:

//使用变量访问this实例
let
self
=
this
; 
  setTimeout(
function
 () { 
   console.log(
self
);
//使用self变量访问this实例
  },
1000
);
//箭头函数访问this实例 因为箭头函数本身没有绑定this
  setTimeout(() => { 
  console.log(
this
);
  }, 
500
);
  • vuex + vue-router + webpack + ES6/7。

四.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: [...]
  })

三.setInterval路由跳转继续运维并未应声开始展览销毁

譬如说一些弹幕,走马灯文字,那类必要定期调用的,路由跳转之后,因为零部件已经销毁了,不过setInterval还并未有灭绝,还在继续后台调用,调节台会不断报错,若是运算量大的话,不可能即时撤消,会产生严重的页面卡顿。

解决办法:在组件生命周期beforeDestroy甘休setInterval

 //组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。
 beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么停止。
  clearInterval(
this
.intervalId);
 },

  弄张动图浏览下具备成效点吧:

伍. 兑现vue路由阻挡浏览器的须要,进行一名目大多操作,如草稿保存等等

气象:为了以免万一用户失误点错关闭开关等等,导致未有保存已输入的新闻(关键音讯)。

用法:

//在路由组件中:
 ...
 beforeRouteLeave (to, 
from
, 
next
) {
if
(用户已经输入信息){
//出现弹窗提醒保存草稿,或者自动后台为其保存
  }
else
{
next
(
true
);
//用户离开
  }
 }

再有beforeEach、beforeRouteUpdate那一个生命周期函数。
详细的情况猛戳:

四.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: [...]
  })

4858美高梅 1

陆.v-once 只渲染成分和零部件贰次,优化创新渲染质量

v-once 这些命令相信我们用的很少,可是个人感到照旧挺实用的!

4858美高梅,只渲染成分和零部件一回。随后的双重渲染,成分/组件及其全体的子节点将被视为静态内容并跳过。那足以用来优化创新质量。

那几个就不举个例子子了,直接猛戳那:v-once()

伍. 得以落成vue路由阻挡浏览器的急需,举行壹二种操作,如草稿保存等等

场景:为了以免用户失误点错关闭开关等等,导致未有保留已输入的新闻(关键音信)。

用法:

//在路由组件中:
 ...
 beforeRouteLeave (to, 
from
, 
next
) {
if
(用户已经输入信息){
//出现弹窗提醒保存草稿,或者自动后台为其保存
  }
else
{
next
(
true
);
//用户离开
  }
 }

还有beforeEach、beforeRouteUpdate这个生命周期函数。
详细情况猛戳:

  项目demo演示地址: (请用chrome手提式无线电话机情势预览)

七. 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)
  })

6.v-once 只渲染成分和组件二回,优化立异渲染品质

v-once 这一个命令相信我们用的很少,可是个人以为依然挺实用的!

只渲染成分和组件一次。随后的又一次渲染,成分/组件及其具有的子节点将被视为静态内容并跳过。那足以用来优化立异品质。

以此就不举个例子子了,直接猛戳这:v-once(

  项目源码地址:

八. 本地开辟尚未其余难题,陈设服务器就40四哟那几个标题

是因为前端路由缘故,单页面应用应该放置nginx或然apache、tomcat等web代理服务器中,千万不要一贯访问index.html,同时要依附自个儿服务器的项目路径改动react或vue的路由地址。

注意点:

  1. vue-router的 history 模式
  2. 服务nginx配置

总结

如上所述是小编给大家介绍的VUE
使用中踩过的坑,希望对大家持有扶助,假如大家有其它疑问请给自家留言,小编会及时回复大家的。在此也分外感激我们对台本之家网址的支撑!

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)
  })

您大概感兴趣的作品:

  • vue使用才能及vue项目中蒙受的主题素材
  • 杀鸡取蛋vue的变量在settimeout内部职能失效的主题材料

八. 地点开采尚未此外难点,布置服务器就40肆啊这么些主题材料

鉴于前端路由缘故,单页面应用应该放权nginx可能apache、tomcat等web代理服务器中,千万不要一直访问index.html,同时要依赖自个儿服务器的花色路径更换react或vue的路由地址。

注意点:

  1. vue-router的 history 模式
  2. 服务nginx配置

总结

如上所述是作者给大家介绍的VUE
使用中踩过的坑,希望对我们有着援助,假若大家有其余疑问请给自个儿留言,小编会及时还原我们的。在此也非常谢谢我们对帮客之家网址的支撑!

使用中踩过的坑,vue使用 前言
vue近来可谓是壹匹黑马,github
star数已居第1位!前端开辟对于vue的应用已经更加多,它的帮助和益处就不做…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有