Résumé personnel VUE (problèmes rencontrés)

Cet article est un résumé de mon expérience d'utilisation de Vue et des questions que certains amis de la communauté m'ont posées. Les amis intéressés devraient étudier ensemble

Avant-propos <.>

1. Les données de la page de changement d'itinéraire ne sont pas actualisées

Cela se produit car les paramètres de l'itinéraire dépendant sont obtenus et écrits dans le cycle de vie créé, car le même itinéraire est chargé deux fois, voire plusieurs fois, la surveillance n'est pas atteinte. Quitter la page et accéder à une autre page d'article n'exécutera pas le cycle de vie du composant créé, ce qui signifie que les données de l'article sont toujours les données saisies pour. la première fois.

Solution : surveiller si l'itinéraire change.

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. L'utilisation de ceci dans la fonction de rappel asynchrone ne peut pas pointer vers l'objet instance vue

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

Solution : affectation de variable. et fonction flèches. (Référence : La différence entre var et let : http://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
);

3.setInterval le saut de routage continue de s'exécuter et ne détruit pas à temps

Par exemple, certains barrages et textes tournants doivent être appelés régulièrement Après les sauts d'itinéraire, le composant a été détruit, mais setInterval n'a pas encore été détruit et. continue toujours. Lorsqu'elle est appelée en arrière-plan, la console signalera en permanence des erreurs. Si la quantité de calcul est importante, elle ne peut pas être effacée à temps, ce qui entraînera de graves blocages de page.

Solution : Arrêtez setInterval dans le cycle de vie du composant avantDestroy

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

Utilisation du comportement de défilement 4.vue, pour entrer dans l'itinéraire, vous devez faire défiler vers le bas du navigateur, de la tête, etc. etc.

En utilisant le routage frontal, lors du passage à un nouvel itinéraire, vous souhaitez que la page défile vers le haut, ou qu'elle maintienne le position de défilement d'origine, tout comme le rechargement de la page. vue-router peut le faire, mais mieux, il vous permet de personnaliser la façon dont la page défile lors du changement d'itinéraire.

Remarque : Cette fonctionnalité n'est disponible que dans les navigateurs prenant en charge history.pushState.

Les paramètres de routage sont les suivants : (Pour plus de détails, cliquez sur : https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html)

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. Implémentez le routage vue pour intercepter les besoins du navigateur et effectuer une série d'opérations, telles que l'enregistrement des brouillons, etc.

Scénario : Afin d'empêcher les utilisateurs de faire des erreurs en cliquant sur le mauvais bouton de fermeture, etc., ce qui entraîne un non-enregistrement des informations saisies (informations clés).

Utilisation :

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

Il existe également des fonctions de cycle de vie telles que beforeEach et beforeRouteUpdate. Cliquez ici pour plus de détails : https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

6.v-once ne restitue les éléments et les composants qu'une seule fois, performances de rendu des mises à jour optimisées

v-once Je pense que cette commande est rarement utilisée par tout le monde, mais je pense personnellement qu'elle est assez pratique !

Rendu les éléments et les composants une seule fois. Lors des rendus ultérieurs, l'élément/composant et tous ses enfants seront traités comme du contenu statique et ignorés. Cela peut être utilisé pour optimiser les performances de mise à jour.

Je ne donnerai pas d'exemple ici, cliquez simplement ici : v-once（https://cn.vuejs.org/v2/api/#v-once）

7. La configuration du proxy local Vue résout les problèmes inter-domaines, uniquement dans l'environnement de développement

Ce proxy local est utilisé pour résoudre les problèmes inter-domaines dans l'environnement de développement. est un problème courant. Oui, la configuration du proxy dans vue est très simple :

//比方说你要访问 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)
  })

8.

En raison du routage frontal, les applications d'une seule page doivent être placées sur des serveurs proxy Web tels que nginx, apache et tomcat. N'accédez pas directement à index.html. À ce moment-là, vous devez modifier l'adresse de routage de React ou de Vue en fonction du chemin du projet de votre propre serveur.

Remarque :

1. mode historique de vue-router

2. Configuration du service nginx

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Exploration du rendu côté serveur Nuxt.js Vue

Quelles sont les différences entre les variables définies let et var dans js ?

veoticy-ui réalise un effet d'animation de texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!