Vue 1.x에서 마이그레이션

v-for를 사용하는 v-model이 반복 된 기본 값 ^제거됨

이와 같은 사례는 더 이상 작동하지 않습니다.

<input v-for="str in strings" v-model="str">

왜냐하면 <input> 이 컴파일할 수 있는 것과 동등한 JavaScript이기 때문입니다.

strings.map(function (str) {
  return createElement('input', ...)
})

보시다시피, v-model의 양방향 바인딩은 여기서 의미가 없습니다. iterator 함수에서 str을 다른 값으로 설정하면 함수 범위에 있는 지역 변수이기 때문에 아무 일도 하지 않습니다.

대신,v-model이 객체의 필드를 업데이트 할 수 있도록 objects 배열을 사용해야합니다.

<input v-for="obj in objects" v-model="obj.str">

객체 문법과 !important를 가지는 v-bind:style ^제거됨

더 이상 작동하지 않습니다.

<p v-bind:style="{ color: myColor + ' !important' }">hello</p>

정말로 !important를 오버라이드 할 필요가 있다면, 다음과 같이 문자열 구문을 사용해야합니다.

<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

v-el 와 v-ref ^대체

단순화를 위해,v-el 과 v-ref는 ref 속성으로 병합되었습니다. 이 속성은 $refs를 통해 컴포넌트 인스턴스에서 접근 가능합니다. 이는 v-el:my-element가 ref="myElement"가되고 v-ref:my-component가 ref="myComponent"가된다는 것을 의미합니다. 일반 요소에서 사용될 때,ref는 DOM 요소가 될 것이고, 컴포넌트에서 사용될 때,ref는 컴포넌트 인스턴스가 될 것입니다.

v-ref는 더 이상 디렉티브가 아니며 특별한 속성이기 때문에 동적으로 정의 될 수도 있습니다. 이것은 v-for와 함께 사용할 때 특히 유용합니다.

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

이전에 v-el/v-ref 와 v-for를 조합하면 각 항목에 고유한 이름을 부여 할 방법이 없었기 때문에 엘리먼트/컴포넌트 배열을 생성합니다. 각 항목에 같은 ref를 주면 여전히 이 동작을 할 수 있습니다.

<p v-for="item in items" ref="items"></p>

1.x와는 달리 이 $refs는 렌더링 프로세스 자체에서 등록/갱신 되기 때문에 반응형이지 않습니다. 이를 반응형으로 만드려면 모든 변경에 대해 중복 렌더링이 필요합니다.

반면에 $refs는 주로 JavaScript에서의 프로그래밍 방식 접근을 위해 고안되었습니다. 인스턴스 자체에 속하지 않는 상태를 가리키는 것이므로 템플릿에서 의존하지 않는 것이 좋습니다. 이는 Vue의 데이터 기반 뷰 모델을 위반하게됩니다.

v-show의 v-else ^제거됨

v-else는 더 이상v-show와 함께 작동하지 않습니다. 대신에v-if를 부정식으로 사용하십시오. 대신에,

<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>

You can use:

<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

사용자 지정 디렉티브 ^단순화

지시어는 책임 범위를 크게 줄였습니다. 이제는 하위 수준의 직접 DOM 조작을 적용하는 경우만 사용됩니다. 대부분의 경우 컴포넌트를 주 코드 재사용 추상화로 사용하는 것이 좋습니다.

가장 주목할만한 차이점은 다음과 같습니다.

• 디렉티브에 더 이상 인스턴스가 없습니다. 이것은 디렉티브 훅 안에 this가 없다는 것을 의미합니다. 대신 필요한 모든 것을 전달인자로 받습니다. 실제로 훅을 가로채는 상태를 유지해야한다면 el 에서 그렇게 할 수 있습니다.
• acceptStatement, deep, priority 등의 옵션은 모두 제거되었습니다. twoWay 지시어를 대체하려면 이 예제를 참조하십시오.
• 현재의 훅 중 일부는 다른 동작을 하며 몇 가지 새로운 후크가 있습니다.

다행스럽게도 새로운 디렉티브가 훨씬 간단하기 때문에 보다 쉽게 마스터 할 수 있습니다. 자세한 내용은 새로운 사용자 지정 디렉티브 가이드를 읽어보십시오.

디렉티브 .literal 수정자 ^제거됨

.literal 수정자는 제거되었습니다. 문자열 리터럴을 값으로 제공하는 것만으로 쉽게 달성 할 수 있습니다.

예를 들어 다음을 변경 할 수 있습니다.

<p v-my-directive.literal="foo bar baz"></p>

이 것은

<p v-my-directive="'foo bar baz'"></p>

트랜지션 효과

transition 속성 ^대체

Vue의 트랜지션 시스템은 상당히 크게 변경되어 이제 transition 속성보다는 <transition> 과 <transition-group> 래퍼 요소를 사용합니다. 자세한 내용은 새 트랜지션 안내를 읽는 것이 좋습니다.

Vue.transition의 재사용 가능한 트랜지션 ^대체

새로운 트랜지션 시스템을 사용하면 재사용 가능한 트랜지션을 위해 컴포넌트를 사용할 수 있습니다.

트랜지션 stagger 속성 ^제거됨

리스트 트랜지션을 엇갈리게 할 필요가있는 경우, 요소의 data-index (또는 유사한 속성)를 설정하고 액세스하여 타이밍을 제어 할 수 있습니다. 예제를 보십시오.

이벤트

events 옵션 ^제거됨

events 옵션이 삭제되었습니다. 이제 이벤트 핸들러는 created 훅에 등록해야 합니다. 자세한 예제는 [$dispatch 와 $broadcast 마이그레이션 가이드](# dispatch-and-broadcast-replaced)를 확인하십시오.

Vue.directive('on').keyCodes ^대체

keyCodes를 구성하는 새롭고 더 간결한 방법은 Vue.config.keyCodes를 사용하는 것 입니다. 예 :

// enable v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

$dispatch 와 $broadcast ^대체

$dispatch와 $broadcast는 Vuex와 같이 보다 명확한 컴포넌트간 통신과 보다 유지 보수가 가능한 상태 관리 솔루션을 위해 제거되었습니다.

문제는 컴포넌트의 트리 구조에 의존하는 이벤트 흐름이 트리가 커질 때 추론하기 어려울 수 있으며 매우 취약하다는 것입니다. 그것은 단순히 잘 확장되지 않으며 우리는 나중에 고통을 주고 싶지 않습니다. $dispatch 와 $broadcast 도 형제 컴포넌트 간의 커뮤니케이션을 해결하지 못합니다.

이 방법의 가장 보편적 인 사용법 중 하나는 부모와 그 직접 자식 사이의 커뮤니케이션입니다. 이 경우, 실제로 v-on을 가진 자식으로부터 $emit을 감지.할 수 있습니다. 이렇게하면 이벤트의 편리성을 유지할 수 있습니다.

그러나 멀리 떨어진 자손 / 조상간에 의사 소통을 할 때 $emit 이 도움이되지 않습니다. 대신 가장 간단한 방안은 중앙 집중화 된 이벤트 허브를 사용하는 것입니다. 컴포넌트 트리에 상관없이 컴포넌트간에 통신 할 수있는 추가 이점이 있습니다 - 형제 사이에서도 가능합니다! Vue 인스턴스는 이벤트 이미 인터페이스를 구현하기 때문에 이 목적으로 빈 Vue 인스턴스를 실제로 사용할 수 있습니다.

예를 들어 다음과 같이 Todo 앱을 구성했다고 가정 해 보겠습니다.

Todos
├─ NewTodoInput
└─ Todo
   └─ DeleteTodoButton

이 단일 이벤트 허브를 사용하여 컴포넌트 간의 통신을 관리 할 수 있습니다.

// 이 이벤트 허브는
// 컴포넌트 사이에서 통신 할 수 있습니다.
var eventHub = new Vue()

그런 다음 우리의 컴포넌트에서 $emit, $on, $off를 사용하여 이벤트를 내보내고, 이벤트를 수신하고, 이벤트 리스너를 각각 정리할 수 있습니다.

// NewTodoInput
// ...
methods: {
  addTodo: function () {
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}

// DeleteTodoButton
// ...
methods: {
  deleteTodo: function (id) {
    eventHub.$emit('delete-todo', id)
  }
}

// Todos
// ...
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},
// 컴포넌트가 파괴되기 전에 이벤트 리스너를 정리하는 것이 좋습니다.
beforeDestroy: function () {
  eventHub.$off('add-todo', this.addTodo)
  eventHub.$off('delete-todo', this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
}

이 패턴은 단순한 시나리오에서 $dispatch 와 $broadcast를 대체 할 수 있지만 더 복잡한 경우에는 Vuex와 같은 전용 상태 관리 레이어를 사용하는 것이 좋습니다.

필터

외부 텍스트 보간 필터 ^제거됨

이제 필터는 텍스트 보간({{ }})태그 내에서만 사용할 수 있습니다. 과거에 우리는v-model, v-on 등과 같은 디렉티브 내에서 필터를 사용하는 것이 편리함보다 더 복잡하다는 것을 발견했습니다. v-for에 대한 목록 필터링의 경우 논리를 JavaScript로 계산된 속성으로 이동하여 컴포넌트 전체에서 재사용할 수 있습니다.

일반적으로 자바 스크립트에서 무언가를 얻을 수 있을 때마다 필터와 같은 특별한 구문을 사용하지 않아도 되므로 동일한 관심사를 처리할 수 있습니다. Vue의 기본 제공 디렉티브 필터를 대체하는 방법은 다음과 같습니다.

debounce 필터 변경

아래 코드 대신에

<input v-on:keyup="doStuff | debounce 500">

methods: {
  doStuff: function () {
    // ...
  }
}

lodash의 debounce (또는 가능하면 throttle) 고사양의 방법을 직접적으로 제한하는 것. 위와 같이 다음과 같이 할 수 있습니다.

<input v-on:keyup="doStuff">

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
}

이 전략의 장점에 대해서는 여기에v-model 예제가 있습니다.

limitBy 필터 교체

아래 코드 대신에

<p v-for="item in items | limitBy 10">{{ item }}</p>

계산 된 속성에서 JavaScript의 내장 된 .slice 메서드를 사용하십시오.

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
  filteredItems: function () {
    return this.items.slice(0, 10)
  }
}

filterBy 필터 교체

아래 코드 대신에

<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

JavaScript에 내장된 .filter 메소드를 계산된 속성에서 사용하십시오.

<p v-for="user in filteredUsers">{{ user.name }}</p>

computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}

JavaScript의 네이티브 .filter는 계산된 속성 내에서 JavaScript의 모든 기능에 액세스할 수 있으므로 훨씬 더 복잡한 필터링 작업도 관리 할 수 있습니다. 예를 들어 모든 활성 사용자를 찾고 이름과 이메일 모두와 대소 문자를 구분하지 않으려면 다음을 수행하십시오.

var self = this
self.users.filter(function (user) {
  var searchRegex = new RegExp(self.searchQuery, 'i')
  return user.isActive && (
    searchRegex.test(user.name) ||
    searchRegex.test(user.email)
  )
})

orderBy 필터 교체

아래 코드 대신에

<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>

계산된 속성에서 lodash의 orderBy (또는 sortBy)를 사용하십시오.

<p v-for="user in orderedUsers">{{ user.name }}</p>

computed: {
  orderedUsers: function () {
    return _.orderBy(this.users, 'name')
  }
}

여러개의 열을 정렬할 수도 있습니다.

_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])

필터 전달인자 구문 ^변경

이제 필터 함수의 전달인자 구문이 JavaScript함수 호출과 더 잘 일치합니다. 따라서 공백으로 구분 된 전달인자를 취하는 대신

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>

전달인자를 괄호로 묶고 쉼표로 구분합니다.

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>

내장 텍스트 필터 ^제거됨

텍스트 보간 내의 필터는 여전히 허용되지만 모든 필터가 제거 되었습니다. 대신 각 도메인의 문제를 해결하기 위해보다 전문화된 라이브러리를 사용하는 것이 좋습니다 (예 : 날짜 형식을 지정하는 date-fns및 통화를 위한 accounting).

Vue에 내장 된 텍스트 필터 각각에 대해 아래에서 어떻게 대체 할 수 있는지 살펴 보겠습니다. 예제 코드는 사용자 지정 헬퍼 함수, 메서드 또는 계산 된 속성에 있을 수 있습니다.

json 필터 변경

Vue는 문자열, 숫자, 배열 또는 일반 객체 등 사용자가 자동으로 출력 형식을 지정하기 때문에 실제로는 더 이상 디버깅 할 필요가 없습니다. 그래도 JavaScript의 JSON.stringify와 같은 기능을 원한다면 메소드나 계산 된 속성에서 사용할 수 있습니다.

capitalize 필터 변경

text[0].toUpperCase() + text.slice(1)

uppercase 필터 변경

text.toUpperCase()

lowercase 필터 변경

text.toLowerCase()

pluralize 필터 변경

NPM의 pluralize 패키지는 이 목적을 훌륭하게 처리하지만, 특정 단어를 복수화하거나 ‘0’과 같은 특수 출력을 원하면 사용자 고유의 복수화 함수를 쉽게 정의 할 수 있습니다. 예 :

function pluralizeKnife (count) {
  if (count === 0) {
    return 'no knives'
  } else if (count === 1) {
    return '1 knife'
  } else {
    return count + 'knives'
  }
}

currency 필터 변경

매우 조악한 구현을 위해 다음과 같이 할 수 있습니다.

'$' + price.toFixed(2)

하지만 대부분의 경우 여전히 이상한 동작을 보일 것입니다 (예 : 0.035.toFixed(2) 는 0.04 까지 반올림합니다, 그러나 0.045는0.04로 반올림됩니다). 이러한 문제를 해결하기 위해 accounting 라이브러리를 사용하여 보다 안정적으로 통화를 형식화 할 수 있습니다.

양방향 필터 ^대체

일부 사용자는 v-model과 함께 양방향 필터를 사용하여 매우 적은 코드로 흥미로운 입력을 사용하였습니다. 그러나 단순하지만 양방향 필터는 많은 복잡성을 숨길 수 있으며 심지어 상태 업데이트를 지연시켜 빈약한 UX를 만들 수 있습니다. 대신 입력을 래핑하는 컴포넌트는 사용자 지정 입력을 만드는 보다 명확하고 기능이 풍부한 방법으로 권장됩니다.

예를 들어 양방향 통화 필터의 마이그레이션을 살펴 보겠습니다.

대부분 잘 작동하지만 지연된 상태 업데이트로 인해 이상한 동작이 발생할 수 있습니다. 예를 들어,Result 탭을 클릭하고 그 입력 중 하나에 9.999를 입력하십시오. 입력 값이 사라지면 값은 $ 10.00으로 업데이트됩니다. 그러나 계산 된 합계를 보면 9.999가 데이터에 저장 되어 있는 것을 볼 수 있습니다. 사용자가 보는 현실의 버전이 동기화되지 않았습니다!
Vue 2.0을 사용하여 좀 더 강력한 솔루션으로 트랜지션하려면 먼저이 필터를 새로운 <currency-input> 컴포넌트로 둘러 쌉시다.

이렇게하면 포커스가 있는 입력 내용을 선택하는 것 처럼 필터만으로는 캡슐화할 수 없는 동작을 추가할 수 있습니다. 이제 다음 단계는 필터에서 비즈니스 로직을 추출하는 것입니다. 아래에서는 모든 것을 currencyValidator객체 외부로 가져옵니다.

이처럼 모듈성이 높아지면 Vue 2로 마이그레이션하는 것이 더 쉬워질 뿐만 아니라 통화 구문 분석 및 서식 지정이 가능합니다.

• Vue 코드와 분리 된 단위 테스트
• 애플리케이션의 다른 부분 (예: API 엔드 포인트에 대한 페이로드의 유효성 검사)에서 사용됩니다.

이 유효성 검사기를 추출한 결과 우리는 더욱 편안하게 이 솔루션을 더욱 강력하게 구축했습니다. 주 상태에 대한 단점이 제거되었고 사용자가 잘못 입력 한다는 것은 사실상 불가능합니다. 브라우저의 기본 숫자 입력이 시도하는 것과 유사합니다.

필터는 Vue 1.0에 대해서는 여전히 제한적이므로 Vue 2.0으로의 업그레이드를 마무리 하겠습니다.

다음 사항을 알 수 있습니다.

• 양방향 필터의 숨겨진 동작 대신 라이프 사이클 훅 및 DOM 이벤트를 사용하여 입력의 모든 측면을 보다 명확하게 설명합니다.
• 우리는 이제v-model을 사용자 지정 입력에 직접 사용할 수 있습니다. 이는 일반적인 입력과 일관성이 있을뿐만 아니라 Vuex 친화적이라는 것을 의미합니다.
• 값을 반환해야하는 필터 옵션을 더 이상 사용하지 않으므로 실제로 통화 작업을 비동기 적으로 수행 할 수 있습니다. 즉, 통화로 작업 해야하는 앱이 많이 있다면이 로직을 공유 마이크로 서비스로 쉽게 리팩토링 할 수 있습니다.

슬롯

중복 슬롯 ^제거됨

같은 템플릿 안에 같은 이름을 가진 <slot>을 더 이상 지원하지 않습니다. 슬롯이 렌더링 될 때 “사용”되고 같은 렌더링 트리의 다른 위치로 렌더링 될 수 없습니다. 여러 장소에서 같은 내용을 렌더링해야하는 경우 해당 내용을 prop로 전달하십시오.

slot 속성 스타일링 ^제거됨

이름이 <slot>인 삽입 된 내용은 더 이상 slot 속성을 유지하지 않습니다. 래퍼 요소를 사용하여 스타일을 지정하거나 고급 사용 사례의 경우 렌더 함수를 사용하여 프로그래밍 방식으로 삽입 된 내용을 수정하십시오.

특수 속성

keep-alive 속성 ^대체

keep-alive는 더 이상 특별한 속성이 아니라 <transition>과 비슷한 래퍼 컴포넌트입니다.

예:

<keep-alive>
  <component v-bind:is="view"></component>
</keep-alive>

이렇게 하면 여러 조건부 하위에서 <keep-alive>를 사용할 수 있습니다.

<keep-alive>
  <todo-list v-if="todos.length > 0"></todo-list>
  <no-todos-gif v-else></no-todos-gif>
</keep-alive>

``에 자식이 여러 개 있을 때, 그들은 결국 하나의 자식으로 계산 되어야합니다. 첫 번째 자식이 아닌 다른 자식은 무시됩니다.

<transition>과 함께 사용하는 경우, 내부에 중첩시켜야합니다 :

<transition>
  <keep-alive>
    <component v-bind:is="view"></component>
  </keep-alive>
</transition>

보간

속성을 이용한 보간 ^제거됨

속성을 이용한 보간은 이제 지원하지 않습니다.

<button class="btn btn-{{ size }}"></button>

인라인 구문을 사용하도록 변경 해야 합니다.

<button v-bind:class="'btn btn-' + size"></button>

또는 데이터/계산 된 속성:

<button v-bind:class="buttonClasses"></button>

computed: {
  buttonClasses: function () {
    return 'btn btn-' + size
  }
}

HTML 보간 ^제거됨

HTML 보간은 ({{{ foo }}}) 삭제되었습니다 v-html 디렉티브을 사용하세요.

일회용 바인딩 ^대체

일회용 바인딩 ({{* foo }})은 v-once 디렉티브으로 변경되었습니다.

반응형

vm.$watch ^변경

vm.$watch를 통해 생성된 감시자는 이제 연결된 컴포넌트가 재 렌더링되기 전에 시작됩니다. 이렇게 하면 컴포넌트가 다시 렌더링되기 전에 상태를 추가로 업데이트하여 불필요한 업데이트를 피할 수 있습니다. 예를 들어, prop이 보이면 컴포넌트 prop를 보고 컴포넌트의 자체 데이터를 업데이트 할 수 있습니다.

이전에 컴포넌트 업데이트 후에 DOM을 사용하여 vm.$watch에 의존 하고 있었다면, 대신 updated 라이프 사이클 훅에서 그렇게 할 수 있습니다.

vm.$set ^변경

vm.$set 는 이제 Vue.set 별칭입니다.

vm.$delete ^변경

vm.$delete 는 이제 Vue.delete의 별칭입니다.

Array.prototype.$set ^제거됨

Vue.set을 사용하십시오.

Array.prototype.$remove ^제거됨

Array.prototype.splice을 사용하십시오

methods: {
  removeTodo: function (todo) {
    var index = this.todos.indexOf(todo)
    this.todos.splice(index, 1)
  }
}

아니면, 더 나은 방법은 색인 제거 방법을 전달하는 것입니다.

methods: {
  removeTodo: function (index) {
    this.todos.splice(index, 1)
  }
}

new Vue({
  el: '#app',
  template: '<div id="app"> ... </div>'
})

new Vue({
  el: '#app',
  render: function (h) {
    h('div', {
      attrs: {
        id: 'app',
      }
    }, /* ... */)
  }
})