Vue 개발에서 흔히 볼 수 있는 방법과 기교 요약

속성 배출

export default {
 name: ' ',
 components: { //  a},
 created(){} //  
 beforeMount() {}, //  
 data: () => ({}), // 
 computed: {} //  
 methods: {} //  
 ... //  
}

요청 로드 상태 관리

async beforeMount(){
 //  
 this.loading = true
 try {
 const data = await getUserInfo()
 } catch (error) {
 console.log(error)
 } finally {
 //  
 this.loading = false
 }
}

Proxy 도메인 간

proxy: {
 "/api": {
 target: 'http://.......',
 changeOrigin: true, //  
 ws: true, // socket
 pathRewrite: {
 //  
 "/api": '' //  
 }
 },
 ....
}

개발자와build의 패키지를 서로 다른 설정합니다
대부분의 개발자들은 Vue의 config를 하나의 파일에 쓰는 것을 좋아한다. 보기에는 문제가 없을 것 같지만 환경의 변화에 따라 프로젝트 최적화, WebPack 플러그인 등 맞춤형 설정이 들어오면 약간 혼란스러워진다. 이럴 때 단독 설정을 고려할 수 있다. 프로세스를 통해.dev는 각각 다른 환경에 대해 config를 도입하고 아래에 나의 설정 방식을 붙인다.나는 프로젝트 루트 디렉터리에 config 디렉터리를 새로 만들었는데, 그 안에 공공적인 방법을public로 포장했다.js 다른 것은 생산 환경과 오프라인 환경에 따라 구분된 번역을 한다.

-- config
--- dev.js
--- build.js
--- public.js
vue.config.js

#   vue.config.js
const devConfig = require('./config/dev')
const buildConfig = require('./config/build')
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig

계산 속성 실용성

//  
computed: {
 filterList: function () {
 return this.showData.filter(function (data) {
 //  
 return data.isShow
 })
}
 
// DOM
 
<ul>
 <li v-for="item in filterList" :key="item.id">
 {{ item.name }}
 </li>
</ul>

집합 방법

 tableFactory(action) {
 switch (action) {
 case 'update':
 ...
 break;
 
 case 'create':
 ...
 break;
 
 case 'delete':
 ...
 break;
 
 default:
 // ... 
 break;
 }
}

Props에 대한 데이터 검증 사양 유지

props: {
 test: {
  type: String,
  default: ''
 },
 test2: {
  type: [Number, String],
  default: 1
 },
 test3: {
  required: false,
  type: Object
 }
}

어셈블리 이름 사용
대부분의 경우, 구성 요소에 정의된name은template 템플릿에서 사용하는 이름입니다. vue에서 낙타봉 이름을 잘 해석했기 때문에 낙타봉 이름을 사용하는 것을 권장합니다.

// GanMessage.vue 
export default {
 name: 'GanMessage'
 .....
}

//  
components: {
 [GanMessage.name]: GanMessage
}

//  
<template>
 <gan-message/>
</template>

템플릿 엔진 디버깅
대부분의 경우template에 논리를 쓰는 것은 디버깅하기 매우 어렵고 효과를 직접 보는 것이기 때문에 일부 값에 대해 통제할 수 없기 때문에 개발 환경에서 나는 원형에 전체적인 console를 걸 것이다.log 방법 디버깅

vue.prototype.$logs = window.console.log;

//  
<template>
 {{$logs('1111')}}
</template>

데이터 가져오기 주기
데이터에 대한 획득은 항상 논란이 있습니다. 대부분의 학우들은created에서 얻었죠. 저는 개인적으로 before Mount에서 백엔드 데이터 요청을 했습니다.

async beforeMount(){
 const data = await getUserInfo();
}

async와await 사용하기
대부분의 경우 Promise를 사용할 때 통과됩니다.then,.catch,.finally로 처리했습니다.그러나 사실 저는 async 비동기 함수를 사용하여 Pormise 처리를 하는 것을 더욱 추천합니다. 우리는 데이터를 얻기만 하면 됩니다. try 이상 포획을 통해 오류를 신속하게 조사하고 던질 수 있습니다.위에서 얻은 데이터의 생명주기를 참고하면 볼 수 있다

async beforeMount(){
 try {
  const data = await getUserInfo()
 } catch (error) {
  console.log(error)
 } finally {}
}

watch

watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  deep:true
 },
 'obj.a': {
 handler(newName, oldName) {
  console.log('obj.a changed');
 },
 immediate: true,
 // deep: true
 }
 
 } 

사용자 정의 이벤트에서 이 값은 서브어셈블리에서 캡처된 값입니다.

<!-- Child -->
<template>
 <input type="text" @input="$emit('custom-event', 'hello')" />
</template>

<!-- Parent -->
<template>
 <Child @custom-event="handleCustomevent" />
</template>

<script>
export default {
 methods: {
 handleCustomevent (value) {
  console.log(value) // hello
 }
 }
}
</script>

총결산
Vue 개발에서 흔히 볼 수 있는 방법과 기교에 대한 이 글을 소개합니다. Vue 개발에서 흔히 볼 수 있는 방법과 기교 내용에 대해 더 많은 것을 소개합니다. 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!