VUE の個人的な概要 (発生した問題)

この記事は、vue の使用プロセスとコミュニティの友人からの質問をまとめたものです。興味のある友人は一緒に学ぶことができます

前書き

1. ルーティング変更ページのデータは利用できません。問題

これは、作成されたライフサイクルで依存ルートのparamsパラメータが取得され、書き込まれているため、同じルートが2回、または複数回ロードされるため、ページを終了して別の記事ページに入るために発生します。作成されたコンポーネントのライフサイクルが実行され、記事データが初めて入力されます。

解決策: ルートが変更されるかどうかを監視してください。

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. 非同期コールバック関数で使用する場合、これは vue インスタンス オブジェクトを指すことはできません

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

解決策: 変数の代入とアロー関数。 (参考: var と 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 ルーティングジャンプは実行を継続し、時間内に破棄されません

たとえば、一部の爆弾画面、回転テキストなどは、ルートがジャンプした後も定期的に呼び出す必要があります。コンポーネントは破棄されていますが、setInterval は破棄されておらず、バックグラウンド呼び出しがまだ継続しているため、コンソールはエラーを報告し続けます。計算量が大きいとクリアが間に合わず、深刻なページフリーズが発生します。

解決策: コンポーネントのライフサイクルで setInterval beforeDestroy を停止します

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

4.vue のスクロール動作の使用法。ルートに入るには、ブラウザーの下部や先頭などにスクロールする必要があります。

フロントエンド ルーティング、新しいルートに切り替えるとき ページをリロードするときと同じように、ページを一番上までスクロールする場合、または元のスクロール位置を維持する場合。 vue-router はそれを実行できますが、さらに良いことに、ルートを切り替えるときにページがスクロールする方法をカスタマイズできます。

注: この機能は、history.pushState をサポートするブラウザでのみ使用できます。

ルーティング設定は次のとおりです: (詳細については、ここをクリックしてください: 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.下書き保存などの一連の操作

シナリオ：ユーザーが誤って閉じるボタンをクリックするなどして、入力した情報（重要な情報）が反映されないことを防ぐため救われている。

使用法:

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

beforeEach や beforeRouteUpdate などのライフサイクル関数もあります。 詳細については、ここをクリックしてください: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

6.v-once レンダリング パフォーマンスを最適化し更新するために、要素とコンポーネントを 1 回だけレンダリングします

v -once このコマンドは誰もが使用することはほとんどないと思いますが、個人的には非常に実用的だと感じています。

要素とコンポーネントを一度だけレンダリングします。その後の再レンダリングでは、要素/コンポーネントとそのすべての子は静的コンテンツとして扱われ、スキップされます。これを使用して、更新パフォーマンスを最適化できます。

ここでは例を示しません。ここをクリックしてください: v-once (https://cn.vuejs.org/v2/api/#v-once)

7 Vue のローカル プロキシ構成はクロスの問題を解決します。 -ドメインの問題 この問題は開発環境に限定されます

このローカル プロキシは、開発環境でのクロスドメインの問題を解決するために使用されます。プロキシは、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)
  })

8. ローカル開発 問題はありません。デプロイメントサーバーは 404 だけです。これらの問題

フロントエンドルーティングのため、シングルページアプリケーションは nginx または apache、tomcat などに配置する必要があります。 Web プロキシ サーバーには決して直接アクセスしないでください。同時に、独自の指示に従ってください。サーバーのプロジェクト パスによって、react または vue のルーティング アドレスが変更されます。

注意点:

1. vue-routerの履歴モード

2. サービスnginxの設定

上記は私が皆さんのためにまとめたものです。 。

関連記事:

Nuxt.js Vue サーバーサイドレンダリングの探索

js で定義された変数 let と var の違いは何ですか?

veloticy-uiはテキストアニメーション効果を実現します

以上がVUE の個人的な概要 (発生した問題)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。