VUE가 오류가 발생하기 쉬운 지점

이번에는 VUE에서 실수하기 쉬운 포인트를 알려드리겠습니다. VUE를 사용할 때 실수하기 쉬운 노트는 무엇인지 살펴보겠습니다.

vue는 이제 다크호스입니다, github 별 개수가 1위를 차지했습니다! Vue는 프런트엔드 개발에서 점점 더 많이 사용되고 있으며, 여기서는 Vue의 장점을 소개하지 않습니다. 이 글은 모든 사람이 함정을 피하는 데 도움이 되도록 Vue를 사용하는 과정과 일부 커뮤니티 친구들이 묻는 질문을 요약한 것입니다. 마음에 드셨다면 좋아요나 팔로우를 눌러주세요. 이 글이 모두에게 도움이 되었으면 좋겠습니다!

1. 라우팅 변경 페이지 데이터가 새로 고쳐지지 않습니다

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

해결책: 경로가 변경되는지 모니터링하십시오.

2. 비동기 콜백 함수에서 이것을 사용하면 vue 인스턴스 객체

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  
  }
  }  
 }

를 가리킬 수 없습니다. 해결책: 변수 할당 및 화살표 기능. (참고: var와 let의 차이점: http://www.jb51.net/article/134704.htm)

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

3.setInterval 경로 점프가 계속 실행되며 시간이 지나도 파괴되지 않습니다

예를 들어, 일부 포격 및 회전 텍스트는 정기적으로 호출해야 합니다. 경로 점프 후 구성요소는 파괴되었지만 setInterval은 아직 파괴되지 않았고 백그라운드 호출이 계속 진행되기 때문에 콘솔은 계속해서 오류를 보고합니다. 계산량이 많은 경우 제때에 삭제하지 않으면 심각한 페이지 정지 현상이 발생합니다.

해결 방법: Destroy

//使用变量访问this实例
let
self
=
this
; 
  setTimeout(
function
 () { 
   console.log(
self
);
//使用self变量访问this实例
  },
1000
);
//箭头函数访问this实例 因为箭头函数本身没有绑定this
  setTimeout(() => { 
  console.log(
this
);
  }, 
500
);

전에 구성 요소 수명 주기에서 setInterval을 중지하세요. 4.vue 스크롤 동작 사용법, 경로를 입력하려면 브라우저 하단, 헤드 등으로 스크롤해야 합니다.

프런트 엔드 라우팅을 사용하면 새 경로로 전환할 때 페이지를 다시 로드하는 것처럼 페이지가 위로 스크롤되거나 원래 스크롤 위치를 유지하기를 원합니다. vue-router가 이를 수행할 수 있지만 경로를 전환할 때 페이지 스크롤 방법을 사용자 정의할 수 있는 것이 더 좋습니다. 참고: 이 기능은 History.pushState를 지원하는 브라우저에서만 사용할 수 있습니다.

라우팅 설정은 다음과 같습니다. (자세한 내용은 여기를 클릭하세요: https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html)

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

5. 브라우저의 요구 사항을 가로채고 초안 저장 등과 같은 일련의 작업을 수행하는 vue 라우팅을 구현합니다. 시나리오: 사용자가 실수로 닫기 버튼 등을 클릭하여 입력한 정보(핵심 정보)가 저장되지 않는 것을 방지하기 위해.

사용법:

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: [...]
  })

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에서 프록시를 구성하는 것은 매우 간단합니다. 이 기사의 사례를 읽은 후 방법 등이 얼마나 흥미로웠는지, PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 도서:

vue는 현재 선택한 항목의 상태를 변경합니다

vue 더 나은 스크롤 스크롤 플러그인 사용법 자세한 설명

위 내용은 VUE가 오류가 발생하기 쉬운 지점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!