ホームページ > 記事 > ウェブフロントエンド > VUE の個人的な概要 (発生した問題)
この記事は、vue の使用プロセスとコミュニティの友人からの質問をまとめたものです。興味のある友人は一緒に学ぶことができます
これは、作成されたライフサイクルで依存ルートの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 } } }
//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 );
たとえば、一部の爆弾画面、回転テキストなどは、ルートがジャンプした後も定期的に呼び出す必要があります。コンポーネントは破棄されていますが、setInterval は破棄されておらず、バックグラウンド呼び出しがまだ継続しているため、コンソールはエラーを報告し続けます。計算量が大きいとクリアが間に合わず、深刻なページフリーズが発生します。
解決策: コンポーネントのライフサイクルで setInterval beforeDestroy を停止します
//组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。 beforeDestroy(){ //我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么停止。 clearInterval( this .intervalId); },
フロントエンド ルーティング、新しいルートに切り替えるとき ページをリロードするときと同じように、ページを一番上までスクロールする場合、または元のスクロール位置を維持する場合。 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: [...] })
シナリオ:ユーザーが誤って閉じるボタンをクリックするなどして、入力した情報(重要な情報)が反映されないことを防ぐため救われている。
使用法:
//在路由组件中: ... beforeRouteLeave (to, from , next ) { if (用户已经输入信息){ //出现弹窗提醒保存草稿,或者自动后台为其保存 } else { next ( true ); //用户离开 } }
beforeEach や beforeRouteUpdate などのライフサイクル関数もあります。 詳細については、ここをクリックしてください: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
v -once このコマンドは誰もが使用することはほとんどないと思いますが、個人的には非常に実用的だと感じています。
要素とコンポーネントを一度だけレンダリングします。その後の再レンダリングでは、要素/コンポーネントとそのすべての子は静的コンテンツとして扱われ、スキップされます。これを使用して、更新パフォーマンスを最適化できます。
ここでは例を示しません。ここをクリックしてください: v-once (https://cn.vuejs.org/v2/api/#v-once)
このローカル プロキシは、開発環境でのクロスドメインの問題を解決するために使用されます。プロキシは、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) })
フロントエンドルーティングのため、シングルページアプリケーションは nginx または apache、tomcat などに配置する必要があります。 Web プロキシ サーバーには決して直接アクセスしないでください。同時に、独自の指示に従ってください。サーバーのプロジェクト パスによって、react または vue のルーティング アドレスが変更されます。
注意点:
vue-routerの履歴モード
サービスnginxの設定
上記は私が皆さんのためにまとめたものです。 。
関連記事:
js で定義された変数 let と var の違いは何ですか?
veloticy-uiはテキストアニメーション効果を実現します
以上がVUE の個人的な概要 (発生した問題)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。