Points où VUE est sujet aux erreurs

Cette fois, je vais vous apporter les points sur lesquels il est facile de faire des erreurs dans VUE Quelles sont les précautions qui sont faciles à commettre lors de l'utilisation de VUE. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Vue peut être considérée comme un cheval noir maintenant, github Le nombre d'étoiles s'est classé premier ! Vue est de plus en plus utilisée dans le développement front-end, et ses avantages ne seront pas présentés. Cet article est un résumé du processus d'utilisation de Vue et des questions posées par certains amis de la communauté pour aider tout le monde à éviter les pièges. Si vous l’aimez, vous pouvez l’aimer ou le suivre. J’espère que cet article pourra aider tout le monde !

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

Cette situation se produit car les paramètres params de la route dépendante sont obtenus et écrits dans createlifecycle. Étant donné que la même route est chargée deux fois, voire plusieurs fois, la surveillance n'est pas atteinte. Quitter la page et accéder à une autre page d'article. ne Le cycle de vie du composant créé s'exécutera, ce qui entraînera la première saisie des données de l'article.

Solution : surveillez 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 this 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 variables et fonctions fléchées. (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
);

Le saut d'itinéraire 3.setInterval continue de s'exécuter et n'est pas détruit à temps

Par exemple, certains barrages et textes tournants doivent être appelés régulièrement après le saut de route, car le composant a été détruit, mais setInterval n'a pas été détruit et l'appel en arrière-plan se poursuit, la console continuera à signaler des erreurs. le montant du calcul est important. Ne pas l'effacer à temps entraînera de graves blocages de pages.

Solution : Arrêtez setInterval

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

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

En utilisant le routage frontal, lorsque vous passez à un nouvel itinéraire, vous souhaitez que la page défile vers le haut ou qu'elle conserve la position de défilement d'origine, tout comme si vous rechargez la page. vue-router peut le faire, mais en mieux. Il vous permet de personnaliser définir la façon dont la page défile lorsque le routage est commuté.

Remarque : Cette fonctionnalité est uniquement disponible 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'éviter que l'utilisateur ne clique accidentellement sur le bouton de fermeture, etc., ce qui entraînerait la 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, optimisant et mettant à jour les performances de rendu

Je crois que la commande v-once est rarement utilisée par tout le monde, mais personnellement, je la trouve assez pratique !

Les éléments et composants ne sont rendus qu’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. Configuration du proxy local Vue pour résoudre les problèmes inter-domaines, limités à l'environnement de développement

Ce proxy local est utilisé pour résoudre les problèmes inter-domaines dans l'environnement de développement. Proxy Il est très simple de configurer le proxy dans 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)
  })

<.>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

vue modifie le statut de l'élément actuellement sélectionné

Explication détaillée de l'utilisation de vue mieux -le plug-in de défilement de scroll

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!