집 > 기사 > 백엔드 개발 > Vue.js 모범 사례(Vue.js 마스터가 되기 위한 5가지 팁)

Vue.js 모범 사례(Vue.js 마스터가 되기 위한 5가지 팁)

不言원래의: 2018-03-30 13:22:041997검색

이 기사는 주로 Vue.js의 모범 사례, Vue.js 마스터가 되기 위한 5가지 팁을 공유하기 위한 것입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다

대부분의 사람들은 Vue.js의 기본 사항을 마스터한 후 API를 사용하면 프런트엔드 웹사이트를 정상적으로 개발할 수 있습니다. 하지만 Vue를 사용하여 보다 효율적으로 개발하고 Vue.js 마스터가 되고 싶다면 아래에서 가르쳐드릴 5가지 요령을 진지하게 공부해야 합니다.

첫 번째 단계: 복잡성을 단순화하는 감시자

장면 복원:

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

구성 요소가 생성되면 목록을 한 번 가져오고 동시에 변경 사항이 있을 때마다 입력 상자를 모니터링합니다. 이 시나리오는 매우 일반적입니다. 이를 최적화할 수 있는 방법이 있습니까?

이동 분석:
우선, watcher에서는 함수의 리터럴 이름을 직접 사용할 수 있습니다. 둘째, Immediate: true를 선언하면 구성 요소가 생성되는 즉시 실행된다는 의미입니다.

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}

두 번째 이동: 모든 구성 요소 등록을 위한 단번에

장면 복원:

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>

기본 UI 구성 요소를 여러 개 작성하고 이러한 구성 요소를 사용해야 할 때마다 먼저 가져오고 그 다음 구성 요소를 선언하는 것은 매우 지루합니다! 가능하다면 게으르다는 원칙을 고수하면서 최적화 방법을 찾아야 합니다!

이동 분석:
자동 동적 요구 구성 요소를 달성하려면 아티팩트 웹팩을 사용하고 require.context() 메서드를 사용하여 자체 (모듈) 컨텍스트를 생성해야 합니다. 이 방법은 검색할 폴더 디렉터리, 해당 하위 디렉터리도 검색해야 하는지 여부, 파일을 일치시킬 정규식 등 3가지 매개 변수를 사용합니다. require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，以及一个匹配文件的正则表达式。

我们在components文件夹添加一个叫global.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

最后我们在main.js中import 'components/global.js'，然后我们就可以随时随地使用这些基础组件，无需手动引入了。

第三招：釜底抽薪的router key

场景还原：
下面这个场景真的是伤透了很多程序员的心...先默认大家用的是Vue-router来实现路由的控制。
假设我们在写一个博客网站，需求是从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-router"智能地"发现这是同一个组件，然后它就决定要复用这个组件，所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$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){

  }
}

bug是解决了，可每次这么写也太不优雅了吧？秉持着能偷懒则偷懒的原则，我们希望代码这样写：

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
},
created () {
  this.getPost(this.$route.params.id)
},
methods () {
  getPost(postId) {
    // ...
  }
}

招式解析:

那要怎么样才能实现这样的效果呢，答案是给router-view添加一个unique的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。（虽然损失了一丢丢性能，但避免了无限的bug）。同时，注意我将key直接设置为路由的完整路径，一举两得。

<router-view :key="$route.fullpath"></router-view>

第四招: 无所不能的render函数

场景还原:
vue要求每一个组件都只能有一个根元素，当你有多个根元素时，vue就会给你报错

<template>
  <li
    v-for="route in routes"
    :key="route.name"
  >
    <router-link :to="route">
      {{ route.title }}
    </router-link>
  </li>
</template>


 ERROR - 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.

招式解析:
那有没有办法化解呢，答案是有的，只不过这时候我们需要使用render()函数来创建HTML，而不是template。其实用js来生成html的好处就是极度的灵活功能强大，而且你不需要去学习使用vue的那些功能有限的指令API，比如v-for, v-if。（reactjs就完全丢弃了template）

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(&#39;focus&#39;, $event)"
      @input="$emit(&#39;input&#39;, $event.target.value)"
    >
  </label>
</template>

有下面几个优化点：

1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来，我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子，无需声明。方法如下：

    <input
      :value="value"
      v-bind="$attrs"
      @input="$emit(&#39;input&#39;, $event.target.value)"
    >

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

2.注意到子组件的@focus=$emit('focus', $event)"

Components 폴더에 global.js라는 파일을 추가하고 webpack을 사용하여 이 파일에 필요한 모든 기본 구성 요소를 동적으로 패키징합니다. 🎜

<input
    :value="value"
    v-bind="$attrs"
    v-on="listeners"
>

computed: {
  listeners() {
    return {
      ...this.$listeners,
      input: event => 
        this.$emit('input', event.target.value)
    }
  }
}

🎜마지막으로 main.js에서 'comComponents/global.js'를 가져오면 이러한 기본 구성 요소를 수동으로 소개하지 않고도 언제 어디서나 사용할 수 있습니다. 🎜🎜세 번째 동작: 모든 것을 최대한 활용하는 라우터 키 🎜🎜🎜장면 복원: 🎜🎜다음 장면은 정말 많은 프로그래머들의 마음을 아프게 합니다... 우선 기본적으로 모든 사람은 Vue-router를 사용하여 제어합니다. 라우팅. 🎜블로그 웹사이트를 작성 중이고 /post-page/a에서 /post-page/b로 점프해야 한다는 요구사항이 있다고 가정해 보겠습니다. 그런데 놀랍게도 페이지가 이동한 후 데이터가 업데이트되지 않았다는 사실을 발견했습니다. ! 그 이유는 vue-router가 이것이 동일한 컴포넌트임을 "지능적으로" 발견한 후 이 컴포넌트를 재사용하기로 결정했기 때문에 생성된 함수에 작성한 메소드가 전혀 실행되지 않았기 때문입니다. 일반적인 해결 방법은 다음과 같이 $route의 변경 사항을 모니터링하여 데이터를 초기화하는 것입니다. 🎜rrreee🎜버그는 해결되었지만 매번 이렇게 작성하기에는 너무 촌스러운가요? 가능하다면 게으르다는 원칙을 고수하면서 코드가 다음과 같이 작성되기를 바랍니다. 🎜rrreee🎜🎜이동 분석:🎜🎜🎜그러면 어떻게 그런 효과를 얻을 수 있을까요? 답은 고유 키를 추가하는 것입니다. router-view이므로 공개 구성 요소라도 URL이 변경되면 이 구성 요소가 다시 생성됩니다. (일부 성능이 손실되더라도 무한 버그는 방지됩니다.) 동시에 경로의 전체 경로에 직접 키를 설정하여 일석이조라는 점에 유의하세요. 🎜rrreee🎜네 번째 트릭: 전능한 렌더링 기능🎜🎜🎜장면 복원:🎜🎜vue에서는 각 구성 요소에 루트 요소가 하나만 있어야 합니다. 루트 요소가 여러 개인 경우 vue는 오류를 보고합니다🎜 rrreee🎜🎜Move 분석 :🎜🎜해결 방법이 있을까요? 대답은 '예'입니다. 하지만 이때 템플릿 대신 HTML을 생성하려면 render() 함수를 사용해야 합니다. 실제로 js를 사용하여 html을 생성하는 이점은 매우 유연하고 강력하며 v-for 및 v-if와 같은 Vue의 제한된 기능 명령어 API를 사용하는 방법을 배울 필요가 없다는 것입니다. (reactjs는 템플릿을 완전히 폐기합니다.)🎜rrreee🎜다섯 번째 트릭: 어떤 트릭 없이도 승리할 수 있는 높은 수준의 구성 요소🎜🎜핵심 포인트: 이 트릭은 매우 강력하므로 꼭 숙지하시기 바랍니다🎜 우리는 컴포넌트를 작성합니다. 상위 컴포넌트와 하위 컴포넌트 간의 통신은 매우 중요합니다. 일반적으로 상위 구성 요소에서 하위 구성 요소로 일련의 prop을 전달해야 하며 동시에 상위 구성 요소는 하위 구성 요소에서 발생하는 일련의 이벤트를 수신해야 합니다. 예: 🎜rrreee🎜에는 다음과 같은 최적화 지점이 있습니다. 🎜🎜1. 상위 구성 요소에서 하위 구성 요소로 전달된 모든 prop은 사용하기 전에 하위 구성 요소의 Prop에서 명시적으로 선언되어야 합니다. 이러한 방식으로 하위 구성 요소는 매번 많은 props를 선언해야 하지만 placeholer와 같은 DOM 기본 속성의 경우 실제로 선언하지 않고 상위에서 하위로 직접 전달할 수 있습니다. 방법은 다음과 같습니다. 🎜rrreee🎜$attrs에는 props로 인식(및 획득)되지 않는 상위 범위의 속성 바인딩(클래스 및 스타일 제외)이 포함되어 있습니다. 구성 요소가 props를 선언하지 않으면 모든 상위 범위 바인딩이 여기에 포함되며 내부 구성 요소는 v-bind="$attrs"를 통해 전달될 수 있습니다. 이는 상위 수준 구성 요소를 생성할 때 매우 유용합니다. 🎜🎜2. 하위 구성 요소의 @focus=$emit('focus', $event)"는 실제로 아무 작업도 수행하지 않습니다. 단지 이벤트를 상위 구성 요소로 다시 전달하는 것뿐입니다. 위와 동일 마찬가지로 명시적으로 선언할 필요가 없습니다. 🎜

<input
    :value="value"
    v-bind="$attrs"
    v-on="listeners"
>

computed: {
  listeners() {
    return {
      ...this.$listeners,
      input: event => 
        this.$emit('input', event.target.value)
    }
  }
}

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

3.需要注意的是，由于我们input并不是BaseInput这个组件的根节点，而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false，这些默认行为将会被去掉, 以上两点的优化才能成功。

结尾

掌握了以上五招，你就能在Vue.js的海洋中自由驰骋了，去吧少年。
陆续可能还会更新一些别的招数，敬请期待。