Vue 기술을 사용할 때 쉽게 간과되는 7가지 포인트
- php中世界最好的语言원래의
- 2018-05-25 15:26:252005검색
이번에는 Vue 기술을 사용할 때 간과하기 쉬운 7가지 사항을 알려드리겠습니다. Vue 기술을 사용할 때 주의사항은 무엇인가요?
머리말
이 글은 Chris Fritz가 공개적으로 공유한 vue 소스 코드입니다. 공유를 통해 배울 만한 점이 많다고 생각합니다. 여전히 위대한 스승님을 참고하세요. 친구들에게 도움이 되기를 바라면서 ppt가 여기에 번역되었습니다.
1. 시계의 즉각적인 속성을 잘 활용하세요
프로젝트에도 썼던 글입니다. 예를 들어, 초기화되기 전에 한 번 실행하고 그 변경 사항을 모니터링해야 하는 요청이 있으면 많은 사람들이 다음과 같이 작성합니다.
created(){
this.fetchPostList()
},
watch: {
searchInputValue(){
this.fetchPostList()
}
}
위 내용을 완전히 다음과 같이 작성할 수 있습니다.
watch: {
searchInputValue:{
handler: 'fetchPostList',
immediate: true
}
}
2. 가치있는 구성 요소 등록 참고용
일반적으로 우리 구성 요소는 다음과 같이 작성됩니다.
import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
<BaseInput v-model="searchText" @keydown.enter="search" />
<BaseButton @click="search"> <BaseIcon name="search"/></BaseButton>
일반적으로 세 단계가 있습니다.
첫 번째 단계는 소개,
두 번째 단계는 등록,
세 번째 단계 공식적인 용도입니다.
이는 가장 일반적이고 일반적인 글쓰기 방식이기도 합니다. 하지만 이런 작성 방법은 고전적이며 여러 번 도입하고 여러 번 등록해야 하는 구성 요소가 많아 매우 짜증스럽습니다.
웹팩을 사용하고 <a href="http://www.php.cn/wiki/136.html" target="_blank">require<code> <a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>.context() .context() 메소드를 사용할 수 있습니다 자동 동적 요구 구성 요소를 구현하기 위해 자신의 (모듈) 컨텍스트를 생성합니다.
아이디어는 다음과 같습니다. src 폴더 아래의 main.js에서 webpack을 사용하여 필요한 모든 기본 구성 요소를 동적으로 패키징합니다.
코드는 다음과 같습니다.
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// Require in a base component context
const requireComponent = require.context(
‘./components', false, /base-[\w-]+\.vue$/
)
requireComponent.keys().forEach(fileName => {
// Get component config
const componentConfig = requireComponent(fileName)
// Get PascalCase name of component
const componentName = upperFirst(
camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
)
// Register component globally
Vue.component(componentName, componentConfig.default || componentConfig)
})
이런 방식으로 구성 요소를 도입하는 세 번째 단계만 필요합니다.
<BaseInput v-model="searchText" @keydown.enter="search" /> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton>
셋, vuex 모듈 도입을 간소화합니다
vuex의 경우 저장소를 다음과 같이 출력합니다.
import auth from './modules/auth'
import posts from './modules/posts'
import comments from './modules/comments'
// ...
export default new Vuex.Store({
modules: {
auth,
posts,
comments,
// ...
}
})
많은 모듈을 소개하고 Vuex.Store에 등록하려면~~
간소화된 방법도 위와 유사합니다. 또한 require.context()를 사용하여 파일을 읽습니다.
import camelCase from 'lodash/camelCase'
const requireModule = require.context('.', false, /\.js$/)
const modules = {}
requireModule.keys().forEach(fileName => {
// Don't register this file as a Vuex module
if (fileName === './index.js') return
const moduleName = camelCase(
fileName.replace(/(\.\/|\.js)/g, '')
)
modules[moduleName] = {
namespaced: true,
...requireModule(fileName),
}
})
export default modules
이렇게 하면 다음 코드만 필요합니다. Out:
import modules from './modules'
export default new Vuex.Store({
modules
})
4. Routes의 로딩 지연
vue 도입에 관해서는 이전에 기술적인 포인트에서 언급한 적이 있습니다. 구성 요소를 동적으로 로드하기 위해 require 또는 import() 메서드를 통해 수행할 수 있는 vue 프로젝트 재구성 요약입니다.
{
path: '/admin',
name: 'admin-dashboard',
component:require('@views/admin').default
}
또는
{
path: '/admin',
name: 'admin-dashboard',
component:() => import('@views/admin')
}
로드 경로.
5. 라우터 핵심 구성 요소 새로 고침
다음 장면은 정말 많은 프로그래머들의 마음을 아프게 합니다... 우선 기본적으로 모든 사람은 Vue-router를 사용하여 라우팅 제어를 구현합니다. 우리가 블로그 웹사이트를 작성 중이고 /post-haorooms/a에서 /post-haorooms/b로 점프해야 한다는 요구사항이 있다고 가정해 보겠습니다. 그런데 놀랍게도 페이지가 이동한 후 데이터가 업데이트되지 않았다는 사실을 발견했습니다. ! 그 이유는 vue-router가 이것이 동일한 컴포넌트임을 "지능적으로" 발견한 후 이 컴포넌트를 재사용하기로 결정했기 때문에 Createdfunction에 작성한 메소드가 전혀 실행되지 않았기 때문입니다. 일반적인 해결책은 다음과 같이 $route의 변경 사항을 모니터링하여 데이터를 초기화하는 것입니다.
data() {
return {
loading: false,
error: null,
post: null
}
},
watch: {
'$route': {
handler: 'resetData',
immediate: true
}
},
methods: {
resetData() {
this.loading = false
this.error = null
this.post = null
this.getPost(this.$route.params.id)
},
getPost(id){
}
}
버그는 해결되었지만 매번 이렇게 작성하기에는 너무 촌스러운가요? 가능하다면 게으르다는 원칙을 고수하여 코드가 다음과 같이 작성되기를 바랍니다:
data() {
return {
loading: false,
error: null,
post: null
}
},
created () {
this.getPost(this.$route.params.id)
},
methods () {
getPost(postId) {
// ...
}
}
해결책: 라우터 보기에 고유 키를 추가하여 공용 구성 요소라도 URL이 변경되면 구성요소가 다시 생성됩니다.
<router-view :key="$route.fullpath"></router-view>
참고: 내 개인적인 경험에 따르면 이는 많은 수의 다시 그리기를 피하기 위해 일반적으로 하위 경로에서 사용됩니다. 이 속성이 app.vue의 루트 디렉터리에 추가된다고 가정하면 클릭할 때마다 주소를 변경하면 다시 그려지는데, 이는 여전히 손실보다 이익이 더 많습니다!
6. 유일한 구성 요소 루트 요소
시나리오는 다음과 같습니다.
(오류 인스턴스 대신 방출된 값)
템플릿 컴파일 오류:
- Component template should contain exactly one root element.
If you are using v-if on multiple elements, use v-else-if
to chain them instead.
模板中p只能有一个，不能如上面那么平行2个p。
例如如下代码：
<template>
<li
v-for="route in routes"
:key="route.name"
>
<router-link :to="route">
{{ route.title }}
</router-link>
</li>
</template>
会报错！
我们可以用render函数来渲染
functional: true,
render(h, { props }) {
return props.routes.map(route =>
<li key={route.name}>
<router-link to={route}>
{route.title}
</router-link>
</li>
)
}
七、组件包装、事件属性穿透问题
当我们写组件的时候，通常我们都需要从父组件传递一系列的props到子组件，同时父组件监听子组件emit过来的一系列事件。举例子：
//父组件
<BaseInput
:value="value"
label="密码"
placeholder="请填写密码"
@input="handleInput"
@focus="handleFocus>
</BaseInput>
//子组件
<template>
<label>
{{ label }}
<input
:value="value"
:placeholder="placeholder"
@focus=$emit('focus', $event)"
@input="$emit('input', $event.target.value)"
>
</label>
</template>
这样写很不精简，很多属性和事件都是手动定义的，我们可以如下写：
<input
:value="value"
v-bind="$attrs"
v-on="listeners"
>
computed: {
listeners() {
return {
...this.$listeners,
input: event =>
this.$emit('input', event.target.value)
}
}
}
$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件。
$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 Vue 기술을 사용할 때 쉽게 간과되는 7가지 포인트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!