vue 실전 에서 의 실 용적 인 작은 마법 집합

첫 번 째 로 더 빠 른 길 을 게 으 른 길 로 불 러 올 수 있 는데 어떻게 잊 을 수 있 습 니까?
게 으 른 로 딩 은 가방 을 한 번 에 모든 페이지 를 불 러 오지 않 고 현재 페이지 의 경로 구성 요소 만 불 러 오 면 됩 니 다.
...을 들다🌰，이렇게 쓰 면 불 러 올 때 모두 불 러 옵 니 다.

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

따라서 위의 쓰 는 방법 을 피하 고 게 으 른 로 딩 을 사용 해 야 한다.
게 으 른 로드 쓰기,웹 팩 과 결합 한 import 식용

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

너 는 Object.freeze 라 는 방법 을 기억 하고 있 니?
vue 가 초기 화 될 때 data 의 데 이 터 를 응답 식 데이터 로 만 드 는 것 을 모든 학생 들 이 알 고 있 을 것 입 니 다.그러나 우 리 는 업무 논 리 를 쓸 때 일부 데 이 터 를 초기 화하 면 영원히 변 하지 않 을 것 이다.vue 에 의 해 응답 식 데 이 터 를 만 들 필요 가 없 기 때문에 우 리 는 변 하지 않 는 데 이 터 를 Object.freeze 방법 으로 동결 하여 vue 가 초기 화 될 때 쓸모없는 조작 을 해 야 한다.
🌰

export default {
  data:()=>({
    list:Object.freeze([{title:'        ，       '}])
  })
}

비동기 구성 요소 가 그렇게 강 한데,너 는 사용 해 본 적 이 없 니?
비동기 구성 요 소 는 초기 화 되 자마자 불 러 오 는 것 이 아니 라 일부 구성 요소 가 필요 할 때 불 러 올 수 있 습 니 다.이것 은 게 으 름 으로 불 러 올 때 와 같은 개념 입 니 다.
🌰

export default {
  components:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

처음 불 러 온 패 키 지 는 변경 구성 요소 코드 를 포함 하지 않 습 니 다.

클릭 하여 어떤 행동 을 촉발 시 키 면 들 어 오 는 가방 은 이 렇 습 니 다.

비동기 구성 요 소 는 비교적 완벽 한 쓰기 방법 이 있다.
🌰

export default {
  components:{
    AsyncComponent:()=>({
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, //      ，  200
      timeout:3000, //           ，  error  
      loading:LoadingComponent, //           
      error:ErrorComponent //        
    })
  }
}

너 아직도 computed 에서 this 를 사용 하고 있 니?
컴퓨터 속성 에서 this.xxx 를 통 해 data 에 있 는 데이터 와 methods 에 있 는 방법 을 가 져 오 는 친구 들 이 많 을 것 같 습 니 다.this.$store 를 통 해 vuex 의 state 와 commt 등 을 가 져 올 수도 있 고 심지어 this.$route 를 통 해 경로 에 있 는 데 이 터 를 가 져 올 수도 있 습 니 다.사실 우 리 는 이런 추악 한 this 를 피 할 수 있다.그것 은 심지어 우리 에 게 보이 지 않 는 성능 문 제 를 가 져 다 줄 수도 있다.실현 에 있어 서,우 리 는 this 를 통 해 접근 할 수 있 는 데 이 터 를 computed 의 첫 번 째 매개 변수 에서 모두 구성 할 수 있 습 니 다.
🌰

export default {
   haha({$attrs,$route,$store,$listeners,$ref}){
     //         ，       
     return 
   }
}

어떻게 v-if 와 v-for 를 함께 사용 하 는 것 을 피 합 니까?
왜 v-if 와 v-for 가 같은 요소 에서 동시에 사용 되 는 것 을 피해 야 합 니까?vue 의 소스 코드 에 코드 가 있 을 때 명령 에 대한 우선 순위 처리 이기 때문에 이 코드 는 v-for 를 먼저 처리 하고 v-if 를 처리 합 니 다.따라서 만약 에 우리 가 같은 층 에서 두 개의 명령 을 함께 사용 하면 불필요 한 성능 문제 가 발생 할 수 있다.예 를 들 어 이 목록 에 100 개의 데이터 가 있 고 어떤 상황 에서 그들 은 표시 할 필요 가 없다.vue 는 이 100 개의 데 이 터 를 순환 해서 v-if 를 판단 하기 때문에 우 리 는 이런 상황 이 발생 하 는 것 을 피해 야 한다.
나쁘다🌰

    <h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

좋다🌰

    <template v-if="status" >
        <h3 v-for="item in 100" :key="item">{{item}}</h3>
    </template>

그렇게 강 한.sync 액세서리 왜 안 써 요?
부모 구성 요소 에서 하위 구성 요소 의 디 스 플레이 숨 김 을 제어 하려 면 prop 과 사용자 정의 방법 을 전송 하 는 것 이 귀 찮 을 수 있 습 니 다.sync 수정자 를 시도 해 보 세 요.
🌰

 //    
 
 template>
  <div>
    <Toggle :show.sync = 'show'></Toggle>
  </div>
</template>

//Toggle   

<template>
  <div>
    <div v-if="show">
           
  </div>
  <button @click="test">    </button>
  </div>
</template>
<script>

export default {
  props:['show'],
  methods: {
    test(){
      this.$emit('update:show',false)
    }
  }
}
</script>

$attr 와$listeners 는 물 만난 고기 처럼 구성 요 소 를 포장 하 라 고 합 니 다!
$attr 와$listeners 는 많은 친구 들 이 별로 사용 하지 않 았 을 수도 있 습 니 다.사실은 일부 구성 요소 라 이브 러 리 의 구성 요 소 를 두 번 밀봉 하 는 것 이 매우 좋 습 니 다.
간단하게 두 가 지 를 소개 하 겠 습 니 다.
$attr:한 구성 요소 가 prop 에 필요 한 속성 뿐만 아니 라 prop 이외 의 다른 속성 도 전달 하면 이 속성 들 은$attr 에 수 집 됩 니 다.
$listeners:한 구성 요소 가 사용자 정의 이 벤트 를 전 달 했 지만 하위 구성 요소 가 emit 를 통 해 트리거 되 지 않 았 다 면 이 사용자 정의 방법 은$listeners 에 수 집 됩 니 다.
Element UI 의 Tabel 구성 요소 에 대한 간단 한 2 차 패 키 징 을 들 겠 습 니 다.🌰

<el-table 
   v-bind="$attrs"
   v-on="$listeners">
   <template v-for="item in column">
    <el-table-column v-bind="item" />
   </template>
</el-table>
<script>
export default {
  props:{
      column:{
        type:Array,
        required:true
      }
   }
}
<script>

v-model 에 이렇게 좋 은 수정자 가 있다 니!
v-model 에 사용 하기 좋 은 수정자 가 세 개 있 습 니 다.하 나 는 lazy 이 고 하 나 는 number 이 며 하 나 는 trim 입 니 다.
lazy:@input 이 벤트 를@blur 이벤트 로 바 꿀 수 있 습 니 다.
number:숫자 값 만 입력
trim:양쪽 빈 칸 비우 기
🌰

   //lazy
   <input v-model.lazy="msg" />
   //number
   <input v-model.number="msg" />
   //trim
   <input v-model.trim="msg" />

v-model 이 속성 을 사용자 정의 할 수 있다 는 것 을 아 십 니까?
사용자 정의 Input 구성 요소 에 v-model 을 사용 하려 면 하위 구성 요소 에 value 를 소개 하고 input 이 벤트 를 촉발 해 야 합 니 다.v-model 의 기본 문법 설탕 은 이 두 가지 물건 의 조합 입 니 다.
🌰

//    
<template>
  <div>
    <CustomInput v-model='msg' />
  </div>
</template>

//CustomInput

<template>
  <div>
    <input type="text" :value="value" @input="test">
  </div>
</template>
<script>
export default {
  props:['value'],
  methods: {
    test(e){
      this.$emit('input',e.target.value)
    }
  },
}
</script>

하지만 구성 요소 에 input 이 아니 라 checkbox 나 radio 가 있다 면?value 와 input 이 벤트 를 받 아들 이 고 싶 지 않 습 니 다.더 의미 있 는 checked 와 change 이 벤트 를 받 고 싶 습 니 다.어떻게 해 야 합 니까?
🌰

//        
...
//CustomInput
<template>
  <div>
    <input type="checkbox" :checked="checked" @change="test">
  </div>
</template>
<script>
 props:['checked'],
 model:{
    props:'checked',
    event:'change'
  },
  methods: {
    test(e){
      this.$emit('change',e.target.checked)
    }
  }
}
</script>

당신 은 아직도 브 라 우 저의 scroll Top 으로 페이지 를 굴 리 고 있 습 니까?
어떤 때 는 페이지 의 스크롤 행 위 를 조작 하고 있 습 니 다.그러면 우 리 는 바로 scroll Top 을 생각 할 것 입 니 다.사실 우리 에 게 두 번 째 선택 은 VueRouter 가 우리 에 게 제공 한 scrollBehavior 갈고리 입 니 다.
🌰

const router = new VueRouter({
  routes:[...] ,
  scrollBehavior(to,from,position){
      // position         ，            
      return{
          //           ，        ，        
          x:100,
          y:100,
          selector:#app,
          offset:200,
          //  
      }
  }
})

하위 구성 요소 에서 정의 한 네 이 티 브 이벤트 가 유효 하지 않 습 니까?
때때로 우 리 는 하위 구성 요소 에서 일부 사건 을 감청 하고 싶 습 니 다.예 를 들 어 click.그러나 당신 이 아무리 시 키 더 라 도 그것 은 반응 이 없습니다.왜 일 까요?
🌰

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

이렇게 vue 를 쓰 면 click 이 벤트 를 사용자 정의 했다 고 생각 하기 때문에 하위 구성 요소 에서$emit(click)를 통 해 터치 해 야 합 니 다.만약 내 가 부모 구성 요소 에서 촉발 하려 고 한다 면?그럼 네 이 티 브 장식 부 를 써 야 겠 네요.
🌰

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

keep-alive 로 페이지 상 태 를 캐 시 하 세 요!
keep-alive 는 구성 요 소 를 전환 할 때 이전 구성 요 소 를 제거 하지 않 고 관리 배경 시스템 에서 자주 사용 하 는 것 을 도 울 수 있 습 니 다.
🌰

<keep-alive>
    <router-view></router-view>
</keep-alive>

총결산
vue 실전 의 실 용적 인 작은 마법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue 실전 기술 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!