Vue 실습의 여러 문제 요약

Vue를 실행하는 동안 우리는 항상 몇 가지 문제에 직면하게 됩니다. 이 기사에서는 이러한 문제를 나열하고 해결 방법을 공유하여 모든 사람에게 도움이 되기를 바랍니다.

이 문서에서는 개인이 겪은 문제를 다음과 같이 기록합니다.

1. 라우팅 변경 페이지 데이터가 새로 고쳐지지 않는 문제

2. setTimeout/setInterval은 변경을 가리키며 이를 사용하여 VUe 인스턴스에 액세스할 수 없습니다

3. setInterval 라우팅 점프 계속 실행 중이 파괴되지 않음

4. vue 스크롤 동작(브라우저 롤백 메모리 위치) 사용

5. vue 라우팅은 브라우저 롤백을 가로채 초안 저장에 대한 유사한 요구 사항을 구현합니다.

6. v-once는 요소와 구성 요소 한 번, 최적화 업데이트된 렌더링 성능

7. vue 프레임워크 스타일 가이드 권장 사항

경로 변경 페이지 데이터가 새로 고쳐지지 않는 문제

시나리오: 매개변수에 따라 달라지는 기사 세부 정보 데이터 등 경로의 매개변수(ajax는 생성된 라이프 사이클에 작성됨), 경로의 지연 로딩으로 인해 페이지를 종료하고 다른 기사 페이지에 들어가면 생성된 구성 요소 라이프 사이클이 실행되지 않아 기사 데이터가 여전히 데이터로 남아 있게 됩니다. 이전 기사의.

params参数获取的(ajax写在created生命周期里面)，因为路由懒加载的关系，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是上一个文章的数据。

解决方法：watch监听路由是否变化

 watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.articleId){//是否有文章id
      //获取文章数据
    }
  }
}

setTimeout/setInterval this指向改变，无法用this访问VUe实例

场景：

  mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此时this指向Window对象
        },1000);
    }

解决方法：使用箭头函数或者

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

setInterval路由跳转继续运行并没有销毁

场景：

比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。

解决办法：在组件生命周期beforeDestroy停止setInterval

组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。

beforeDestroy(){
     //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。
    clearInterval(this.intervalid);
},

vue 滚动行为(浏览器回退记忆位置)用法

这个我当时做的时候以为很难，后来做好了才发现就是一个设置而已（前提是要开启路由的History 模式），下面做一个简单的分享。

路由设置

1. 要使用这一功能，首先需要开启vue-router的 history模式

如果之前一直使用的是hash 模式(默认模式)，项目已经开发了一段时间，然后转history模式很可能会遇到：这些问题

1. 滚动行为具体设置如下：

   const router = new VueRouter({
    mode: 'history',
   scrollBehavior (to, from, savedPosition) {
   //savedPosition

   if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
     return savedPosition
   } else {
     return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
    }
   }，

   routes: [...]
   })

vue滚动行为文档，可以进到这里看看更详细的信息。

vue路由拦截浏览器后退实现草稿保存类似需求

场景：

为了防止用户突然离开，没有保存已输入的信息。

用法：

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

类似的还有beforeEach、beforeRouteUpdate해결책: 경로 변경 여부를 모니터링하세요

Vue.component('terms-of-service', {
  template: '\
    <p v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </p>\
  '
})

setTimeout/setInterval 이 변경 지점은 VUe 인스턴스에 액세스하는 데 사용할 수 없습니다.

시나리오:

rrreee

해결책: 화살표 기능을 사용하거나

rrreee

setInterval 경로 점프 계속 실행하면 파괴되지 않습니다.시나리오:

예를 들어 일부 사격 및 회전 텍스트는 경로 점프 후 정기적으로 호출해야 합니다. 구성 요소는 파괴되었지만 setInterval은 파괴되지 않았으므로 백그라운드 호출이 필요합니다. 플랫폼에서는 계속해서 오류를 보고합니다. 계산량이 많으면 제때에 삭제할 수 없어 심각한 페이지 정지 현상이 발생합니다.

해결책: Destroy 전에 컴포넌트 수명 주기에서 setInterval을 중지하세요

컴포넌트가 소멸되기 전에 실행되는 후크 기능은 다른 수명 주기 후크 기능과 동일합니다.

rrreee

vue 스크롤 동작(브라우저 롤백 메모리 위치) 사용법

이 작업을 수행할 때 매우 어렵다고 생각했습니다. 나중에 알고 보니 이는 단지 설정일 뿐이었습니다(전제 사항은 라우팅의 히스토리 모드를 켜는 것입니다). , 다음을 수행하십시오. 간단한 공유입니다.

라우팅 설정

이 기능을 사용하려면 먼저 vue-router

히스토리 모드를 활성화해야 합니다. 이전에 hash 모드(기본 모드)를 사용했다면, 프로젝트가 개발되었습니다. 일정 시간이 지난 후 기록 모드로 전환하면 다음과 같은 문제가 발생할 수 있습니다.

스크롤 동작의 구체적인 설정은 다음과 같습니다. const router = new VueRouter({

모드: 'history',

scrollBehavior (to, from, savePosition ) {//savedPositionrrreee

routes: [...]

})

vue 스크롤 동작 문서, 여기로 이동하여 자세한 내용을 볼 수 있습니다. 자세한 정보.

vue 라우팅은 브라우저를 다시 차단하고 초안 저장을 위한 유사한 요구 사항을 구현합니다.

시나리오:

🎜사용자가 갑자기 떠나는 것을 방지하기 위해 입력한 정보가 저장되지 않습니다. 🎜🎜사용법: 🎜rrreee🎜마찬가지로 beforeEach 및 beforeRouteUpdate가 있으며, 이는 전역 후크와 구성 요소 후크로 구분됩니다. 라우팅 문서를 참조하세요. 🎜🎜v-once는 요소와 구성요소를 한 번만 렌더링하여 렌더링 성능을 최적화하고 업데이트합니다.🎜🎜v-once의 API는 꽤 6개인데, 많은 친구들이 이 API를 눈치채지 못했을 수도 있습니다. 🎜🎜문서 소개: 🎜🎜🎜🎜🎜🎜🎜제 생각에는 이 API는 주로 일회성 렌더링에 사용되며 이러한 렌더링의 값을 변경하는 작업은 없을 것입니다. 양방향 바인딩 성능을 최적화할 수 있습니다. 🎜🎜문서 권장 사항: 오버헤드가 낮은 정적 구성 요소에 v-once 사용🎜🎜Vue에서 HTML을 렌더링하는 것은 빠르지만 구성 요소에 많은 양의 정적 콘텐츠가 포함되어 있는 경우 v-once를 사용하여 렌더링 결과를 캐시하는 것을 고려할 수 있습니다. 이렇게: 🎜rrreee🎜vue 스타일 가이드 추천: 🎜🎜이 글을 쓰면서 Vue 프레임워크에도 스타일 가이드 추천이 있는 줄 알았는데, 아래 그림처럼 웨이브도 배울 수 있어요. 🎜🎜🎜🎜🎜🎜🎜🎜관련 추천: 🎜🎜🎜🎜🎜Vue.js2.0 변경 요약 공유🎜🎜🎜🎜🎜Vue.js 2.5 새로운 기능 공유🎜🎜🎜🎜Vue.js 구성 요소 템플릿🎜🎜 🎜🎜🎜🎜🎜🎜

위 내용은 Vue 실습의 여러 문제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!