VUE 개인 요약(발생한 문제)

亚连원래의: 2018-06-07 10:42:222288검색

이 글은 vue를 사용하는 과정과 일부 커뮤니티 친구들이 묻는 질문을 요약한 것입니다. 관심 있는 친구들은 함께 배울 수 있습니다

서문

1. 문제

이러한 상황은 생성된 라이프 사이클에서 종속 경로의 매개변수를 가져오고 작성하기 때문에 발생합니다. 동일한 경로가 두 번 또는 여러 번 로드되기 때문에 페이지를 종료하고 다른 기사에 진입할 수 없습니다. 페이지가 표시되지 않습니다. 생성된 구성 요소 라이프 사이클이 실행되어 기사 데이터가 처음으로 입력됩니다.

해결책: 경로가 변경되는지 모니터링하세요.

watch: {
// 方法1
&#39;$route&#39;
 (to, 
from
) { 
//监听路由是否变化
if
(
this
.$route.
params
.articleId){
// 判断条件1 判断传递值的变化
//获取文章数据
  }
  }
//方法2
&#39;$route&#39;
(to, 
from
) {
if
 (to.path == 
"/page"
) { 
/// 判断条件2 监听路由名 监听你从什么路由跳转过来的
this
.message = 
this
.$route.query.msg  
  }
  }  
 }

2. 비동기 콜백 함수

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

해결책: 변수 할당 및 화살표 함수에 사용될 때 vue 인스턴스 객체를 가리킬 수 없습니다. (참고: 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 라우팅 점프는 계속 실행되며 시간이 지나도 소멸되지 않습니다

For 예를 들어 일부 폭탄 화면, 회전 텍스트는 정기적으로 호출해야 합니다. 경로 점프 후 구성 요소는 파괴되었지만 setInterval은 파괴되지 않았고 백그라운드 호출이 계속 진행되기 때문에 콘솔은 계속해서 오류를 보고합니다. . 계산량이 많으면 시간 내에 클리어할 수 없어 심각한 페이지 정지 현상이 발생합니다.

해결책: 구성 요소 수명 주기에서 setInterval을 Destroy하기 전에 중지하세요

 //组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
 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: 
&#39;history&#39;
,
  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 렌더링 성능을 최적화하고 업데이트하려면 요소와 구성 요소를 한 번만 렌더링하세요

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: {
&#39;/backEnd&#39;
:{
     target:
&#39;http://192.168.3.200:8888&#39;
, 
//目标接口域名有端口可以把端口也写上
//或者prot本地起服务端口与服务端统一
     changeOrigin:
true
, 
    }
 },
// 发送request请求
  axios.
get
(
&#39;/backEnd/page&#39;
) 
//按代理配置 匹配到/backEnd就代理到目标target地址
  .
then
((res) => {
   console.log(res) 
// 数据完全拿得到 配置成功
this
.newsList = res.data
  }, (err) => {
   console.log(err)
  })

8. 로컬 개발 문제가 없습니다. 배포 서버는 404뿐입니다. 이러한 문제

프론트 엔드 라우팅으로 인해 단일 페이지 애플리케이션은 nginx 또는 apache, tomcat 및 기타에 배치되어야 합니다. 웹 프록시 서버 절대 index.html에 직접 접근하지 말고, 동시에 자신의 지시를 따르세요. 서버의 프로젝트 경로는 반응 또는 vue의 라우팅 주소를 변경합니다.

주의 사항:

vue-router의 기록 모드
Service nginx 구성

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. .