Vue 1.x에서 마이그레이션
목차
- 준비
track-by- v-bind:style with !important
- v-el 그리고 v-ref
vm.$log 인스턴스 DOM 옵션
- FAQ
와, 페이지가 너무 길어요! Vue 2.0이 완전히 다르다는 뜻인가요? 처음부터 배워야 하나요? Vue 1.0 프로젝트를 마이그레이션하는 것이 불가능합니까?
아닌 사실을 알려드리게 되어 매우 기쁩니다! API와 핵심 개념의 거의 90%가 변경되지 않았습니다. 이 섹션에는 많은 정교함과 많은 마이그레이션 예제가 포함되어 있기 때문에 약간 깁니다. 걱정하지 마세요.
이 섹션을 처음부터 끝까지 읽을 필요는 없습니다!프로젝트 마이그레이션은 어디서 시작해야 하나요?
1. 먼저 현재 프로젝트에서 migration tool
을 실행합니다. 우리는 간단한 명령줄 도구를 사용하여 고급 Vue 업그레이드 프로세스를 단순화하기 위해 세심한 주의를 기울였습니다. 도구가 레거시 기능을 식별하면 이를 알리고 추가 정보에 대한 링크와 함께 권장 사항을 제시합니다.2. 그런 다음 이 페이지의 사이드바에 나열된 콘텐츠를 찾아보세요. 일부 타이틀이 프로젝트에 영향을 미치지만 마이그레이션 도구가 메시지를 표시하지 않는 경우 프로젝트를 확인하세요.
3. 프로젝트에 테스트 코드가 있는 경우 이를 실행하고 여전히 실패하는 부분을 확인하세요. 테스트 코드가 없으면 브라우저에서 애플리케이션을 열고 탐색하여 오류나 경고에 주의하세요.
4. 이제 애플리케이션이 완전히 마이그레이션되었습니다. 더 자세히 알아보고 싶다면 이 페이지의 나머지 부분을 읽어보거나 소개 섹션에서 처음부터 시작하여 새로운 문서와 개선된 지침을 자세히 알아보세요. 일부 핵심 개념에 이미 익숙하기 때문에 많은 섹션이 생략되었습니다.
Vue 1.x 버전 애플리케이션을 2.0으로 마이그레이션하는 데 얼마나 걸리나요?
이는 여러 가지 요인에 따라 달라집니다.
신청 규모에 따라 다릅니다(중소 규모는 기본적으로 하루 안에 완료 가능).
주의가 산만해지는 횟수에 따라 2.0의 가장 멋진 새 기능을 시작하세요.
시간을 알 수 없습니다. 2.0 애플리케이션을 구축할 때 이런 일이 자주 발생합니다!
사용하는 이전 기능에 따라 다릅니다. 대부분은 찾기 및 바꾸기를 통해 업그레이드할 수 있지만 일부는 시간이 걸릴 수 있습니다. 모범 사례를 따르지 않으면 Vue 2.0은 이를 따르도록 최선을 다할 것입니다. 이는 프로젝트의 장기적인 운영에 좋지만 상당한 리팩토링을 의미할 수도 있습니다(비록 리팩토링이 필요한 부분 중 일부는 더 이상 사용되지 않을 수 있음).
Vue 2로 업그레이드하는 경우 Vuex와 Vue Router도 동시에 업그레이드해야 하나요?
Vue Router 2만 Vue 2와 호환되므로 Vue Router를 업그레이드해야 하며, 이를 처리하려면 Vue Router 마이그레이션 방법을 따라야 합니다. 다행스럽게도 대부분의 애플리케이션에는 라우터 관련 코드가 많지 않으므로 마이그레이션은 아마도 1시간 이상 걸리지 않을 것입니다.
Vuex의 경우 버전 0.8+는 Vue 2와 계속 호환되므로 일부는 강제로 업그레이드할 필요가 없습니다. 지금 업그레이드해야 하는 유일한 이유는 모듈 및 축소된 상용구와 같은 Vuex 2의 새로운 고급 기능을 활용하려는 경우입니다.
Template
Fragment Instance Removed
모든 구성 요소에는 루트 요소가 하나만 있어야 합니다. 다음과 같은 템플릿이 있는 경우 조각 인스턴스는 더 이상 허용되지 않습니다.
<p>foo</p> <p>bar</p>다음과 같이 전체 콘텐츠를 새 요소로 간단히 래핑하는 것이 더 좋습니다.
<div> <p>foo</p> <p>bar</p> </div>업그레이드 방법
업그레이드 후 엔드투엔드 테스트 스위트를 실행하거나 애플리케이션을 실행하고 콘솔 경고를 확인하여 여러 루트 요소가 있는 템플릿을 알아보세요.
수명 주기 후크 기능
beforeCompile移除使用
created钩子函数替代。升级方式
在代码库中运行迁移工具来找出所有使用此钩子函数的示例。
compiled替换使用
mounted钩子函数替代。升级方式
在代码库中运行迁移工具来找出所有使用此钩子函数的示例。
attached移除使用其他钩子函数内置的 DOM 检测 (DOM check) 方法。例如，替换如下：
attached: function () { doSomething() }可以这样使用：
mounted: function () { this.$nextTick(function () { doSomething() }) }升级方式
在代码库中运行迁移工具来找出所有使用此钩子函数的示例。
detachedbeforeCompile Remove을 실행하면 이 후크 기능을 사용하는 모든 예제를 찾을 수 있습니다. 🎜🎜🎜🎜🎜
🎜🎜compiled🎜🎜🎜🎜 🎜Replace 🎜🎜🎜🎜🎜대신mounted후크 기능을 사용하세요. 🎜🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜코드 베이스에서 🎜Migration Tool🎜을 실행하면 이 후크 기능을 사용하는 모든 예제를 찾을 수 있습니다. 🎜🎜🎜🎜🎜
🎜🎜attached🎜🎜🎜🎜 🎜Remove🎜🎜🎜🎜🎜다른 Hook 함수에는 내장된 DOM 확인 방법을 사용하세요. 예를 들어 다음을 바꾸세요. 🎜detached: function () { doSomething() }🎜는 다음과 같이 사용할 수 있습니다. 🎜destroyed: function () { this.$nextTick(function () { doSomething() }) }🎜🎜🎜🎜Upgrade way🎜🎜🎜🎜 코드 베이스에서 🎜Migration Tool🎜을 실행하여 이 후크 기능을 사용하는 모든 예제를 찾으세요. 🎜🎜🎜🎜🎜
🎜🎜detached🎜🎜🎜🎜 🎜Remove🎜🎜🎜🎜🎜다른 후크 기능에서는 DOM 확인 방법을 사용하세요. 예를 들어 다음을 바꾸세요. 🎜mounted: function () { this.$nextTick(function () { // 代码保证 this.$el 在 document 中 }) }🎜는 다음과 같이 사용할 수 있습니다. 🎜<div v-for="item in items" track-by="id">🎜🎜🎜🎜Upgrade way🎜🎜🎜🎜 코드 베이스에서 🎜Migration Tool🎜을 실행하여 이 후크 기능을 사용하는 모든 예제를 찾으세요. 🎜🎜
초기화< Strong> 이름 바꾸기init重新命名使用新的
beforeCreate钩子函数替代，本质上 beforeCreate 和 init 完全相同。init 被重新命名是为了和其他的生命周期方法的命名方式保持一致。升级方式
在代码库中运行迁移工具来找出所有使用此钩子函数的示例。
ready替换使用新的
mounted钩子函数替代。应该注意的是，使用mounted并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入Vue.nextTick/vm.$nextTick。例如：<div v-for="item in items" v-bind:key="item.id">升级方式
在代码库中运行迁移工具来找出所有使用此钩子函数的示例。
v-for
v-for遍历数组时的参数顺序 变更当包含
index时，之前遍历数组时的参数顺序是(index, value)。现在是(value, index)，来和 JavaScript 的原生数组方法 (例如forEach和map) 保持一致。升级方式
在代码库中运行迁移工具来找出那些使用旧有参数顺序的示例。注意，如果你将你的 index 参数命名为一些不通用的名字 (例如
대신 새로운position或numbeforeCreate후크 함수를 사용하세요. 기본적으로 beforeCreate와 init는 완전히 동일합니다. init의 이름은 다른 수명 주기 메서드의 이름과 일치하도록 변경되었습니다.🎜 업그레이드 방법🎜🎜코드 베이스에서 마이그레이션 도구 실행 이 후크 기능을 사용하여 모든 예제를 찾으십시오. 🎜🎜🎜🎜🎜
준비교체🎜🎜 대신 새로운마운트후크 기능을 사용하세요.mounted를 사용한다고 해서 후크 함수에 this.$el이 문서에 있다는 것을 보장하지는 않는다는 점에 유의해야 합니다.Vue.nextTick/vm.$nextTick도 이 목적으로 도입되어야 합니다. 예: 🎜props: { username: { type: String, coerce: function (value) { return value .toLowerCase() .replace(/\s+/, '-') } } }🎜 업그레이드 방법🎜🎜에서 이전 도구<를 실행하세요 코드 베이스 /a>를 사용하여 이 후크 기능을 사용하는 모든 예제를 찾으세요. 🎜🎜🎜🎜🎜
v-for< /h2>
🎜🎜🎜
v-for매개변수 순서 배열을 순회할 때 변경됨🎜🎜🎜인덱스가 포함된 경우, 배열을 순회할 때 매개변수의 순서는(인덱스, 값)이었습니다. 이제(value, index)가 JavaScript의 기본 배열 메서드(예:forEach및map)와 일치합니다. 🎜🎜 업그레이드 방법🎜🎜코드에서 마이그레이션 도구 실행 base를 사용하여 이전 인수 순서를 사용하는 예제를 찾습니다. 인덱스 매개변수에 특이한 이름(예:position또는num)을 지정하면 마이그레이션 도구가 이를 표시하지 않습니다. 🎜🎜
v-for객체 순회 시 매개변수 순서변경v-for遍历对象时的参数顺序 变更当包含 property 名称/key 时，之前遍历对象的参数顺序是
(name, value)。现在是(value, name)，来和常见的对象迭代器 (例如 lodash) 保持一致。升级方式
在代码库中运行迁移工具来找出那些使用旧有参数顺序的示例。注意，如果你将你的 key 参数命名为一些不通用的名字 (例如
name或property)，迁移工具将不会把它们标记出来。
$indexand$key移除已经移除了
$index和$key这两个隐式声明变量，以便在v-for中显式定义。这可以使没有太多 Vue 开发经验的开发者更好地阅读代码，并且在处理嵌套循环时也能产生更清晰的行为。升级方式
在代码库中运行迁移工具来找出使用这些移除变量的示例。如果你没有找到，也可以在控制台错误中查找 (例如
Uncaught ReferenceError: $index is not defined)。
track-by替换
track-by已经替换为key，它的工作方式与其他属性一样，没有v-bind或者:前缀，它会被作为一个字符串处理。多数情况下，你需要使用具有完整表达式的动态绑定 (dynamic binding) 来替换静态的 key。例如，替换：props: { username: String, }, computed: { normalizedUsername: function () { return this.username .toLowerCase() .replace(/\s+/, '-') } }你现在应该写为：
template: '<p>message: {{ timeMessage }}</p>', computed: { timeMessage: { cache: false, get: function () { return Date.now() + this.message } } }升级方式
在代码库中运行迁移工具来找出那些使用
속성 이름/키가 포함된 경우 이전에 객체 순회 매개변수 순서는track-by( 이름, 값). 이제(값, 이름)이 일반 객체 반복자(예: lodash)와 일관성을 유지합니다.🎜 업그레이드 방법🎜🎜코드에서 마이그레이션 도구 실행 base를 사용하여 이전 인수 순서를 사용하는 예제를 찾습니다. 주요 매개변수에 특이한 이름(예:name또는property)을 지정하면 마이그레이션 도구가 이를 표시하지 않습니다. 🎜🎜🎜🎜🎜
$index및$key제거🎜🎜가$index 및$key는v-for의 명시적 정의를 위해 암시적으로 선언된 변수입니다. 이를 통해 Vue 개발 경험이 많지 않은 개발자가 코드를 더 잘 읽을 수 있고 중첩 루프를 처리할 때 더 깔끔한 동작을 수행할 수 있습니다. 🎜🎜 업그레이드 방법🎜🎜코드에서 마이그레이션 도구 실행 제거된 변수를 사용하는 예를 찾아보세요. 찾을 수 없는 경우 콘솔 오류에서 찾아볼 수도 있습니다(예:Uncaught ReferenceError: $index가 정의되지 않음). 🎜🎜🎜🎜🎜
트랙바이< span style="font-size: 18px;"> 교체🎜🎜track-by가로 대체되었습니다. key인 경우 다른 속성처럼 작동하며v-bind또는:접두사가 없으면 문자열로 처리됩니다. 대부분의 경우 정적 키를 전체 표현식이 포함된 동적 바인딩으로 바꿔야 합니다. 예를 들어, 🎜template: '<p>message: {{ getTimeMessage() }}</p>', methods: { getTimeMessage: function () { return Date.now() + this.message } }🎜를 바꾸려면 이제 다음과 같이 작성해야 합니다. 🎜<my-component v-on:click.native="doSomething"></my-component>🎜< span style="font-size: 16px;">업그레이드 방법🎜🎜코드 베이스에서 실행 마이그레이션 도구를 사용하여track-by를 사용하는 예제를 찾습니다. 🎜🎜
v-for범위 값 변경v-for范围值 变更之前，
v-for="number in 10"的number从 0 开始到 9 结束，现在从 1 开始，到 10 结束。升级方式
在代码库中使用正则
/w+ in d+/搜索。当出现在v-for中，请检查是否受到影响。
Props
coerceProp 的参数 移除如果需要检查 prop 的值，创建一个内部的 computed 值，而不再在 props 内部去定义，例如：
<!-- 通过使用 lodash 或者其它库的 debounce 函数， 我们相信 debounce 实现是一流的， 并且可以随处使用它，不仅仅是在模板中。 --> <script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script> <div id="debounce-search-demo"> <input v-model="searchQuery" placeholder="Type something"> <strong>{{ searchIndicator }}</strong> </div>现在应该写为：
new Vue({ el: '#debounce-search-demo', data: { searchQuery: '', searchQueryIsDirty: false, isCalculating: false }, computed: { searchIndicator: function () { if (this.isCalculating) { return '⟳ Fetching new results' } else if (this.searchQueryIsDirty) { return '... Typing' } else { return '✓ Done' } } }, watch: { searchQuery: function () { this.searchQueryIsDirty = true this.expensiveOperation() } }, methods: { // 这是 debounce 实现的地方。 expensiveOperation: _.debounce(function () { this.isCalculating = true setTimeout(function () { this.isCalculating = false this.searchQueryIsDirty = false }.bind(this), 1000) }, 500) } })这样有一些好处：
你可以对保持原始 prop 值的操作权限。
通过给予验证后的值一个不同的命名，强制开发者使用显式申明。
升级方式
运行迁移工具找出包含
coerce选项的实例。
twoWayProp 的参数 移除Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见：
🎜 업그레이드 방법🎜🎜코드 베이스에서 일반/w+ in d+/검색을 사용하세요.v-for에 있을 때 영향을 받는지 확인하세요. 🎜🎜🎜🎜🎜소품
🎜🎜🎜< p id="coerce-prop">강제Prop 매개변수 remove🎜🎜prop 값을 확인해야 하는 경우 props 정의 내부로 들어가는 대신 내부 계산 값을 생성하세요. 예: 🎜<input v-model="name" lazy> <input v-model="age" type="number" number>🎜는 이제 다음과 같이 작성되어야 합니다: 🎜<input v-model.lazy="name"> <input v-model.number="age" type="number">🎜이것은 몇 가지 장점이 있습니다: 🎜
- 🎜원래 prop 값의 작업 권한을 유지할 수 있습니다 . 🎜
- 🎜확인된 값에 다른 이름을 지정하여 개발자가 명시적 선언을 사용하도록 합니다. 🎜
🎜업그레이드 방법🎜🎜마이그레이션 실행 도구coerce옵션이 포함된 인스턴스를 찾습니다. 🎜🎜🎜🎜🎜
twoWayProp의 매개변수removed🎜🎜Props는 이제 한 방향으로만 전달할 수 있습니다. 상위 구성 요소에 반대 효과를 주기 위해 하위 구성 요소는 암시적 양방향 바인딩에 의존하는 대신 명시적으로 이벤트를 전달해야 합니다. 자세한 내용은 다음을 참조하세요. 🎜
- 🎜사용자 정의 구성요소 이벤트🎜
- 🎜사용자 정의 입력 구성요소 (구성 요소 이벤트 사용)🎜
- 🎜전역 상태 관리🎜
🎜 업그레이드 방법🎜🎜 이전 도구를 실행하세요.twoWay매개변수가 포함된 인스턴스를 찾습니다. 🎜🎜
v-bind.once및.sync수정자는 제거v-bind的.once和.sync修饰符 移除Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见：
升级方式
运行迁移工具找到使用 .once 和
.sync修饰符的实例。
修改 Props 弃用
组件内修改 prop 是反模式 (不推荐的) 的。比如，先声明一个 prop ，然后在组件中通过
this.myProp = 'someOtherValue'改变 prop 的值。根据渲染机制，当父组件重新渲染时，子组件的内部 prop 值也将被覆盖。大多数情况下，改变 prop 值可以用以下选项替代：
通过 data 属性，用 prop 去设置一个 data 属性的默认值。
通过 computed 属性。
升级方式
运行端对端测试，查看关于 prop 修改的控制台警告信息。
根实例的 Props 替换
对于一个根实例来说 (比如：用
new Vue({ ... })创建的实例)，只能用propsData而不是props。升级方式
运行端对端测试，将会弹出 failed tests 来通知你使用
Props만 사용할 수 있습니다. 개별적으로 전달합니다. 상위 구성 요소에 반대 효과를 주기 위해 하위 구성 요소는 암시적 양방향 바인딩에 의존하는 대신 명시적으로 이벤트를 전달해야 합니다. 자세한 내용은 다음을 참조하세요.props
- 🎜사용자 정의 구성요소 이벤트🎜
- 🎜사용자 정의 입력 구성요소 (구성 요소 이벤트 사용)🎜
- 🎜전역 상태 관리🎜
🎜 업그레이드 방법🎜🎜 이전 도구를 실행하여 .once 및.sync수정자를 사용하여 인스턴스를 찾습니다. 🎜🎜🎜🎜🎜속성 수정 지원 중단됨 🎜 🎜구성 요소 내의 소품을 수정하는 것은 안티 패턴입니다(권장하지 않음). 예를 들어, 먼저 prop을 선언한 다음
this.myProp = 'someOtherValue'를 통해 구성 요소에서 prop의 값을 변경합니다. 렌더링 메커니즘에 따라 상위 구성 요소가 다시 렌더링되면 하위 구성 요소의 내부 prop 값도 덮어쓰게 됩니다. 🎜🎜대부분의 경우 prop 값 변경은 다음 옵션으로 대체할 수 있습니다. 🎜
- 🎜 data 속성을 통해 prop을 사용하여 기본값을 설정합니다. 데이터 속성의 . 🎜
- 🎜계산된 속성을 통해. 🎜
🎜업그레이드 방법🎜🎜종료 테스트를 실행하고 소품 수정에 대한 콘솔 경고 정보를 확인하세요. 🎜🎜🎜🎜🎜루트 인스턴스 교체에 대한 소품🎜🎜루트 인스턴스(예:
new Vue({ ... })로 생성된 인스턴스)의 경우대신. 🎜propsData만 사용할 수 있습니다. 소품🎜 업그레이드 방법🎜🎜종단 간 테스트를 실행하면 실패한 테스트가 팝업되어props를 사용하는 루트 인스턴스가 만료되었음을 알려줍니다. . 🎜🎜
계산된 속성
cache: false弃用在 Vue 未来的大版本中，计算属性的缓存验证将会被移除。把不缓存的计算属性转换为方法可以得到和之前相同的结果。
示例：
<input v-model="text" value="foo">或者使用组件方法：
data: { text: 'bar' }升级方式
运行迁移工具找到
cache: false的选项。
Built-In 指令
v-bind真/假值 变更在2.0中使用
v-bind时，只有null,undefined，和false被看作是假。这意味着，0和空字符串将被作为真值渲染。比如v-bind:draggable="''"将被渲染为draggable="true"。对于枚举属性，除了以上假值之外，字符串
"false"也会被渲染为attr="false"。注意，对于其它钩子函数 (如
v-if和v-show)，他们依然遵循 js 对真假值判断的一般规则。升级方式
运行端到端测试，如果你 app 的任何部分有可能被这个升级影响到，将会弹出failed tests
用
v-on监听原生事件 变更现在在组件上使用
v-on只会监听自定义事件 (组件用$emit触发的事件)。如果要监听根元素的原生事件，可以使用.nativecache: false더 이상 사용되지 않음
Vue의 향후 주요 버전에서는 계산된 속성의 캐시 유효성 검사가 제거됩니다. 캐시되지 않은 계산된 속성을 메서드로 변환하면 이전과 동일한 결과가 생성됩니다.<textarea v-model="text"> hello world </textarea>또는 구성 요소 방법 사용:<input v-for="str in strings" v-model="str">🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜 🎜migration 도구 실행🎜cache: false옵션을 찾으세요. 🎜🎜🎜🎜🎜🎜🎜내장 지침🎜🎜🎜🎜🎜🎜🎜
🎜v-bind🎜🎜🎜 참/거짓 값 변경🎜🎜🎜🎜🎜 2.0에서v-bind를 사용하는 경우null,undefine및false만 false로 간주됩니다. 이는0과 빈 문자열이 참 값으로 렌더링된다는 것을 의미합니다. 예를 들어v-bind:draggable="''"는draggable="true"로 렌더링됩니다. 🎜🎜열거 속성의 경우 위의 false 값 외에도"false"문자열도attr="false"로 렌더링됩니다. 🎜🎜다른 후크 기능(예:🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜종단 간 테스트를 실행하세요. 이번 업그레이드로 인해 앱의 일부가 영향을 받을 수 있는 경우 실패한 테스트가 표시됩니다🎜🎜🎜🎜🎜v-if및v-show)의 경우 참과 거짓을 판단하는 js의 일반 규칙을 따릅니다. 가치. 🎜🎜
v-on을 사용하여 기본 이벤트 변경 모니터링🎜🎜🎜🎜지금 구성 요소에서v-on을 사용하면 맞춤 이벤트($emit를 사용하여 구성 요소에 의해 트리거되는 이벤트)만 수신됩니다. 루트 요소의 기본 이벤트를 듣고 싶다면 다음과 같은.native수정자를 사용할 수 있습니다. 코드 베이스에서 이 후크 기능을 사용하는 모든 예를 알아보세요. 🎜🎜
v-model제거 withdebouncedebounce的v-model移除Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。Vue 中
v-model的debounce属性参数使得在一些简单情况下非常容易实现这种控制。但实际上，这是控制了状态更新的频率，而不是控制高耗时任务本身。这是个微小的差别，但是会随着应用增长而显现出局限性。例如在设计一个搜索提示时的局限性：
使用
debounce参数，便无法观察 “Typing” 的状态。因为无法对输入状态进行实时检测。然而，通过将debounce与 Vue 解耦，可以仅仅只延迟我们想要控制的操作，从而避开这些局限性：strings.map(function (str) { return createElement('input', ...) })<input v-for="obj in objects" v-model="obj.str">这种方式的另外一个优点是：当包裹函数执行时间与延时时间相当时，将会等待较长时间。比如，当给出搜索建议时，要等待用户输入停止一段时间后才给出建议，这个体验非常差。其实，这时候更适合用 throttling 函数。因为现在你可以自由的使用类似 lodash 之类的库，所以很快就可以用 throttling 重构项目。
Upgrade Path
运行迁移工具使用
debounce参数的 实例。
使用
lazy或者number参数的v-model。替换Debounce는 한때 Ajax 요청 및 기타 요청을 제어하는 데 사용되었습니다. 작업. Vue에서
lazy和numberv-model의debounce속성 매개변수를 사용하면 몇 가지 간단한 경우에 이러한 제어를 매우 쉽게 수행할 수 있습니다. 하지만 실제로 이는 시간이 많이 걸리는 작업 자체를 제어하기보다는상태 업데이트기능을 사용하는 것이 더 적합합니다. 이제 lodash와 같은 라이브러리를 자유롭게 사용할 수 있으므로 제한을 사용하여 프로젝트를 빠르게 리팩터링할 수 있습니다. 🎜🎜🎜🎜🎜업그레이드 경로🎜🎜🎜🎜의 빈도를 제어하기 위한 것입니다. 이는 작은 차이이지만 애플리케이션이 성장함에 따라 제한될 것입니다. 검색 프롬프트 디자인 시 제한 사항 예시:
throttling
debounce매개변수를 사용하면 "입력 중" 상태를 관찰할 수 없습니다. 입력 상태를 실시간으로 감지할 수 없기 때문입니다. 그러나 Vue에서debounce를 분리하면 제어하려는 작업만 지연할 수 있으므로 이러한 제한을 피할 수 있습니다.<p v-bind:style="{ color: myColor + ' !important' }">hello</p><p v-bind:style="'color: ' + myColor + ' !important'">hello</p>이 접근 방식의 또 다른 장점은 다음과 같습니다. 함수를 래핑할 때 실행 시간이 동일할 때 지연 시간만큼 더 오랜 시간 동안 대기하게 됩니다. 예를 들어, 검색 제안을 제공할 때 제안을 제공하기 전에 사용자가 일정 시간 동안 입력을 멈출 때까지 기다려야 하는데 이는 매우 좋지 않은 경험입니다. 사실 이때는debounce매개변수를 사용하여 🎜migration 도구🎜를 실행하세요. 🎜🎜🎜🎜🎜🎜🎜
lazy또는number매개변수와 함께v-model을 사용하세요. 교체 🎜🎜🎜🎜 이제lazy및number매개변수가 수정자로 사용되어 다음 대신 더 명확해 보입니다. 🎜<p v-for="item in items" v-bind:ref="'item' + item.id"></p>🎜이제 🎜<p v-for="item in items" ref="items"></p>🎜🎜🎜🎜Upgrade method🎜🎜🎜🎜 🎜migration 도구🎜를 실행하여 더 이상 사용되지 않는 매개변수를 찾으세요. 🎜🎜
v-model인라인값제거value的v-model移除
v-model不再以内联value方式初始化的初值了，显然他将以实例的 data 相应的属性作为真正的初值。这意味着以下元素：
<p v-if="foo">Foo</p> <p v-else v-show="bar">Not foo, but bar</p>在 data 选项中有下面写法的：
<p v-if="foo">Foo</p> <p v-if="!foo && bar">Not foo, but bar</p>将渲染 model 为 ‘bar’ 而不是 ‘foo’ 。同样，对
<textarea>已有的值来说：<p v-my-directive.literal="foo bar baz"></p>必须保证
text初值为 “hello world”升级方式
升级后运行端对端测试，注意关于
v-model内联参数的 console warnings
v-modelwithv-forIterated Primitive Values 移除像这样的写法将失效：
<p v-my-directive="'foo bar baz'"></p>因为
<input>将被编译成类似下面的 js 代码：// v-on:keyup.f1 不可用 Vue.config.keyCodes.f1 = 112这样，
v-model的双向绑定在这里就失效了。把str赋值给迭代器里的另一个值也没有用，因为它仅仅是函数内部的一个变量。替代方案是，你可以使用对象数组，这样
v-model就可以同步更新对象里面的字段了，例如：Todos ├─ NewTodoInput └─ Todo └─ DeleteTodoButton升级方式
运行测试，如果你的 app 有地方被这个更新影响到的话将会弹出failed tests提示。
带有
!important的v-bind:style移除这样写将失效：
// 将在各处使用该事件中心 // 组件通过它来通信 var eventHub = new Vue()如果确实需要覆盖其它的
!important，最好用字符串形式去写：// NewTodoInput // ... methods: { addTodo: function () { eventHub.$emit('add-todo', { text: this.newTodoText }) this.newTodoText = '' } }🎜이는 데이터 옵션에 🎜升级方式
运行 迁移帮助工具。找到含有
!importantv-model 사용는 더 이상 인라인value방식으로 초기 값을 초기화하지 않습니다. 당연히 인스턴스 데이터의 해당 속성을 실제 초기 값으로 사용합니다.// 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 }) } }🎜 요소가 모델을 'foo' 대신 'bar'로 렌더링한다는 의미입니다. 마찬가지로<textarea>의 기존 값의 경우: 🎜<input v-on:keyup="doStuff | debounce 500">🎜는text의 초기 값이 "hello world"🎜🎜🎜업그레이드 방법 🎜 🎜업그레이드 후 엔드투엔드 테스트를 실행하고v-model인라인 매개변수🎜🎜🎜🎜🎜에 대한 🎜콘솔 경고에 주의하세요.
🎜🎜v-model🎜🎜 withv-for반복된 기본 값 제거 🎜🎜이와 같이 작성하면 유효하지 않습니다. 🎜methods: { doStuff: function () { // ... } }🎜<input>가 다음으로 컴파일되기 때문입니다. 다음과 유사한 Node.js 코드: 🎜<input v-on:keyup="doStuff">🎜이렇게 하면v-model의 양방향 바인딩이 여기서 유효하지 않습니다.str을 반복기의 다른 값에 할당하는 것은 함수 내부의 변수일 뿐이므로 쓸모가 없습니다. 🎜🎜대안은v-model이 객체의 필드를 동기식으로 업데이트할 수 있도록 객체 배열을 사용할 수 있다는 것입니다. 예: 🎜methods: { doStuff: _.debounce(function () { // ... }, 500) }🎜🎜업그레이드 방법🎜🎜테스트 실행 귀하의 앱이 이 업데이트의 영향을 받는 경우 실패한 테스트 메시지가 표시됩니다. 🎜🎜🎜🎜🎜🎜🎜
v-bind:style및!important제거 지원 >🎜🎜이렇게 작성하면 유효하지 않습니다:🎜<p v-for="item in items | limitBy 10">{{ item }}</p>🎜다른!important를 꼭 다루어야 한다면 문자열 형식으로 작성하는 것이 가장 좋습니다:🎜<p v-for="item in filteredItems">{{ item }}</p>🎜🎜업그레이드 방법< /strong> 🎜🎜 마이그레이션 도우미 도구를 실행하세요.!important가 포함된 스타일 바인딩 개체를 찾습니다. 🎜🎜
v-el및v-ref대체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结合的时候是很有用的：computed: { filteredItems: function () { return this.items.slice(0, 10) } }以前
v-el/v-ref和v-for一起使用将产生一个 DOM 数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的ref：<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>和 1.x 中不同，
$refs不是响应的，因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。另一方面，设计
$refs主要是提供给 js 程序访问的，并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态，违背了 Vue 数据驱动的思想。升级方式
运行迁移工具找出实例中的
v-el和v-ref。
v-show后面使用v-else移除
v-else不能再跟在v-show后面使用。请在v-if的否定分支中使用v-show来替代。例如：<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 }) } }🎜升级方式
运行迁移工具找出实例中存在的
단순화를 위해v-else以及v-showv-el및v-ref구성요소 인스턴스의$refs를 통해 호출할 수 있는ref속성으로 병합됩니다. 이는v-el:my-element가 다음과 같이 작성됨을 의미합니다:ref="myElement"및v-ref:my-comComponent은 다음과 같습니다:ref="myComponent". 일반 요소에 바인딩된 경우ref는 DOM 요소를 참조합니다. 구성 요소에 바인딩된 경우ref는 구성 요소 인스턴스입니다.v-ref는 더 이상 지시어가 아닌 특수 속성이기 때문에 동적으로 정의할 수도 있습니다. 이는v-for와 결합할 때 유용합니다: 🎜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) ) })🎜이전에는v-el/v-ref및v와 함께 사용됨 -for는 각 요소에 특정 이름을 지정할 수 있는 방법이 없기 때문에 DOM 배열 또는 구성 요소 배열을 생성합니다. 여전히 이 작업을 수행하고 모든 요소에 동일한ref를 제공할 수 있습니다. 🎜<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>🎜1.x와 달리$refs는 렌더링 중에 등록/업데이트되기 때문에 응답하지 않습니다. 변경 사항을 수신하고 반복적으로 렌더링하는 것만으로 반응성을 높일 수 있습니다. 🎜🎜한편,$refs는 주로 js 프로그램에서 액세스하도록 설계되었으므로 템플릿에 너무 많이 의존하는 것은 권장되지 않습니다. 이는 인스턴스 외부에서 인스턴스 상태에 액세스하는 것을 의미하며 이는 Vue의 데이터 기반 사고에 어긋납니다. 🎜🎜 업그레이드 방법🎜🎜 이전 도구를 실행하여 인스턴스v-el및v-ref. 🎜🎜🎜🎜🎜
v-showv-else사용 제거🎜🎜v -else는v-show이후에 더 이상 사용할 수 없습니다. 대신v-if의 음수 분기에v-show를 사용하세요. 예를 들어, 🎜<p v-for="user in orderedUsers">{{ user.name }}</p>🎜는 이제 다음과 같이 작성해야 합니다: 🎜computed: { orderedUsers: function () { return _.orderBy(this.users, 'name') } }🎜업그레이드 방법🎜🎜이전 도구는v-else및v-show가 인스턴스에 존재하는지 확인합니다. 🎜🎜
사용자 지정 지시문 Simplification
새 버전에서는 지시문의 사용 범위가 크게 줄었습니다. 이제 지시문은 하위 수준 DOM 작업에만 사용됩니다. 대부분의 경우 코드 재사용을 위한 추상화 계층으로 구성 요소를 사용하는 것이 가장 좋습니다.
중요한 변경 사항은 다음과 같습니다.
명령에 더 이상 인스턴스가 없습니다. 즉, 지시문의 후크 기능에 더 이상
this인스턴스가 없습니다. 대신 매개변수에 필요한 모든 데이터를 적용할 수 있습니다. 꼭 필요한 경우el을 통해 인스턴스에 액세스할 수 있습니다.this。替代的是，你可以在参数中接受你需要的任何数据。如果确实需要，可以通过el来访问实例。类似
acceptStatement，deep，priority等都已被弃用。为了替换双向指令，见 示例。现在有些钩子的意义和以前不一样了，并且多了两个钩子函数。
幸运的是，新钩子更加简单，更加容易掌握。详见 自定义指令指南。
升级方式
运行迁移工具找出定义指令的地方。在 helper 工具会把这些地方标记出来，因为很有可能这些地方需要重构。
指令
.literalacceptStatement,deep,priority등과 유사한 기능은 더 이상 사용되지 않습니다.양방향지시문을 바꾸려면 예제 를 참조하세요.이제 일부 후크의 의미는 이전과 다르며 후크 기능이 두 가지 더 있습니다.
다행히도 새로운 후크는 더 간단하고 마스터하기가 더 쉽습니다. 자세한 내용은 사용자 정의 지시어 가이드
를 참조하세요. 🎜🎜🎜지시문
.literal수정자 🎜Remove🎜🎜🎜🎜🎜. 수정자는 제거되었으며 동일한 기능을 얻으려면 간단히 문자열 수정자를 값으로 제공하면 됩니다. 🎜🎜예: 🎜_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])🎜로 변경: 🎜<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>🎜🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜 🎜migration 도구🎜를 실행하여 인스턴스에서 `.literal` 수정자가 사용되는 위치를 알아보세요. 🎜🎜
Transition
transition参数 替换Vue 的过渡系统有了彻底的改变，现在通过使用
<transition>和<transition-group>来包裹元素实现过渡效果，而不再使用transition属性。详见 Transitions guide。升级方式
运行迁移工具找到使用
transition属性的地方。
可复用的过渡
Vue.transition替换在新的过渡系统中，可以通过模板复用过渡效果。
升级方式
运行迁移工具找到使用
transition属性的地方。
过渡的
stagger参数 移除如果希望在列表渲染中使用渐近过渡，可以通过设置元素的
data-index(或类似属性) 来控制时间。请参考这个例子。🎜 매개변수 Replacement🎜🎜🎜🎜🎜Vue의 전환 시스템이 완전히 변경되었습니다. 이제升级方式
运行迁移工具找到使用
transitiontransition<transition>및<transition-group>을 사용하여 변경되었습니다. ;는transition속성을 사용하는 대신 전환 효과를 얻기 위해 요소를 래핑합니다. 자세한 내용은 전환 가이드를 참조하세요. 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜 마이그레이션 도구를 실행하여transition속성을 찾으세요. 장소. 🎜🎜🎜🎜🎜🎜재사용 가능한 전환
Vue.transition교체🎜 🎜🎜🎜새로운 전환 시스템에서는 템플릿을 통해 전환 효과를 재사용할 수 있습니다. 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜 마이그레이션 도구를 실행하여transition속성을 찾으세요. 장소. 🎜🎜🎜🎜🎜🎜전환
stagger매개변수 제거됨🎜 🎜🎜 🎜목록 렌더링에서 점진적인 전환을 사용하려면 요소의data-index(또는 유사한 속성)를 설정하여 타이밍을 제어할 수 있습니다. 이 예를 참조하세요. 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜 마이그레이션 도구를 실행하여transition속성을 찾으세요. 장소. 업그레이드 중에 새로운 전환 전략으로 "전환"할 수 있습니다. 🎜🎜
이벤트
events选项 移除
events选项被弃用。事件处理器现在在created钩子中被注册。参考详细示例$dispatchand$broadcast迁移指南
Vue.directive('on').keyCodes替换新的简明配置
keyCodes的方式是通过Vue.config.keyCodes例如：<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>🎜 옵션 remove🎜🎜🎜🎜升级方式
运行迁移工具找到过时的
keyCodeeventsevents옵션은 더 이상 사용되지 않습니다. 이제 이벤트 핸들러가created후크에 등록됩니다. 자세한 예시$dispatch및$broadcast를 참조하세요. 마이그레이션 가이드 🎜🎜🎜🎜
🎜Vue.directive('on').keyCodes🎜🎜< /code >🎜 교체🎜🎜🎜🎜keyCodes를 구성하는 새롭고 간결한 방법은Vue를 이용하는 것입니다. config.keyCodes예: 🎜text[0].toUpperCase() + text.slice(1)🎜🎜업그레이드 방법🎜🎜🎜🎜 이전 도구를 실행하여 오래된 < code>keyCode 구성 찾기🎜🎜
$dispatch및$broadcast교체$dispatch和$broadcast替换
$dispatch和$broadcast已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且
$dispatch和$broadcast也没有解决兄弟组件间的通信问题。对于
$dispatch和$broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。这些方法的最常见用途之一是父子组件的相互通信。在这些情况下，你可以使用
v-on监听子组件上 $emit 的变化。这可以允许你很方便的添加事件显性。然而，如果是跨多层父子组件通信的话，
$emit并没有什么用。相反，用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利，即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例，实际上你可以使用一个空的 Vue 实例。比如，假设我们有个 todo 的应用结构如下：
text.toUpperCase()可以通过单独的事件中心管理组件间的通信：
text.toLowerCase()然后在组件中，可以使用
$emit,$on,$off分别来分发、监听、取消监听事件：function pluralizeKnife (count) { if (count === 0) { return 'no knives' } else if (count === 1) { return '1 knife' } else { return count + 'knives' } }'$' + price.toFixed(2)<keep-alive> <component v-bind:is="view"></component> </keep-alive>在简单的情况下这样做可以替代
$dispatch和$broadcast，但是对于大多数复杂情况，更推荐使用一个专用的状态管理层如：Vuex。🎜컴포넌트 트리 구조 기반의 이벤트 흐름 방식은 정말 이해하기 어렵고, 컴포넌트 구조가 확장될수록 점점 더 취약해지기 때문입니다. 이 이벤트 방식은 정말 좋지 않으며, 앞으로도 개발자들에게 너무 많은 고통을 끼치고 싶지 않습니다. 그리고升级方式
运行迁移工具找出使用
$dispatch和$broadcast$dispatch및$broadcast이미 더 이상 사용되지 않습니다. Vuex와 같은 보다 간결하고 명확한 구성 요소 간 통신과 더 나은 상태 관리 솔루션을 사용하세요.$dispatch및$broadcast는 형제 구성 요소 간의 통신 문제를 해결하지 못합니다. 🎜🎜$dispatch및$broadcast를 업그레이드하는 가장 간단한 방법은 이벤트 센터를 사용하여 구성 요소 트리의 어떤 레이어에 관계없이 구성 요소가 자유롭게 통신할 수 있도록 하는 것입니다. Vue 인스턴스는 이벤트 전달 인터페이스를 구현하므로 빈 Vue 인스턴스를 인스턴스화하여 이를 달성할 수 있습니다. 🎜🎜이 방법의 가장 일반적인 용도 중 하나는 상위-하위 구성 요소가 서로 통신하는 것입니다. 이러한 경우v-on를 사용하여 자녀의 말을 들을 수 있습니다. $emit의 구성 요소 변경 사항입니다. 이를 통해 이벤트 가시성을 쉽게 추가할 수 있습니다. 🎜🎜그러나$emit는 여러 계층의 상위-하위 구성 요소 간에 통신하는 경우에는 쓸모가 없습니다. 이와 대조적으로 중앙 집중식 이벤트 미들웨어를 사용하면 간단한 업그레이드가 가능합니다. 이렇게 하면 구성 요소가 형제인 경우에도 구성 요소 간의 통신이 매우 원활해집니다. Vue는 이벤트 이미터 인터페이스를 통해 인스턴스를 실행하므로 실제로는 빈 Vue 인스턴스를 사용할 수 있습니다. 🎜🎜예를 들어 다음과 같은 todo 애플리케이션 구조가 있다고 가정해 보겠습니다. 🎜<keep-alive> <todo-list v-if="todos.length > 0"></todo-list> <no-todos-gif v-else></no-todos-gif> </keep-alive>🎜 별도의 이벤트 센터를 통해 구성 요소 간의 통신을 관리할 수 있습니다. 🎜<transition> <keep-alive> <component v-bind:is="view"></component> </keep-alive> </transition>🎜 그런 다음 구성 요소에서$emit를 사용할 수 있습니다. , < code>$on,$off는 각각 청취 이벤트를 배포, 모니터링 및 취소하는 데 사용됩니다. 🎜<button class="btn btn-{{ size }}"></button><button v-bind:class="'btn btn-' + size"></button><button v-bind:class="buttonClasses"></button>🎜간단한 경우에는$dispatch 및$broadcast이지만 대부분의 복잡한 상황에서는 Vuex. 🎜🎜 업그레이드 방법🎜🎜이전 도구를 실행하여 업그레이드 방법을 알아보세요. <코드 인스턴스>$dispatch 및$broadcast를 사용합니다. 🎜🎜
필터
삽입된 텍스트 외부의 필터제거됨
이제 필터는 삽입된 텍스트 내부에서만 사용할 수 있습니다(<코드>{{ }} 태그). 지시어(예:
v-model,v-on등))에 필터를 사용하면 상황이 더 복잡해진다는 사실을 발견했습니다.v-for와 같은 목록 필터의 경우 처리 논리를 템플릿 전체에서 재사용할 수 있도록 js에 계산된 속성으로 넣는 것이 가장 좋습니다.{{ }}tags)。我们发现在指令 (如：v-model，v-on等) 中使用过滤器使事情变得更复杂。像v-for这样的列表过滤器最好把处理逻辑作为一个计算属性放在 js 里面，这样就可以在整个模板中复用。总之，能在原生 js 中实现的东西，我们尽量避免引入一个新的符号去重复处理同样的问题。下面是如何替换 Vue 内置过滤器：
替换
debounce过滤器不再这样写
computed: { buttonClasses: function () { return 'btn btn-' + size } }methods: { removeTodo: function (todo) { var index = this.todos.indexOf(todo) this.todos.splice(index, 1) } }请使用 lodash’s
debounce(也有可能是throttle) 来直接控制高耗任务。可以这样来实现上面的功能：methods: { removeTodo: function (index) { this.todos.splice(index, 1) } }myElement.appendChild(vm.$el)这种写法的更多优点详见：
v-model示例。
替换
limitBy过滤器不再这样写：
myElement.parentNode.insertBefore(vm.$el, myElement)在 computed 属性中使用 js 内置方法：
.slicemethod：myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)myElement.parentNode.appendChild(vm.$el)
替换
filterBy过滤器不再这样写：
vm.$el.remove()在 computed 属性中使用 js 内置方法
.filtermethod：new Vue({ el: '#app', template: '<div id="app"> ... </div>' })new Vue({ el: '#app', render: function (h) { h('div', { attrs: { id: 'app', } }, /* ... */) } })js 原生的
rrreee.filter同样能实现很多复杂的过滤器操作，因为可以在计算 computed 属性中使用所有 js 方法。比如，想要通过匹配用户名字和电子邮箱地址 (不区分大小写) 找到用户：
替换
orderBy过滤器不这样写：
rrreee而是在 computed 属性中使用 lodash’s
orderBy(或者可能是sortBy간단히 말하면, 네이티브 js에서 구현할 수 있는 것들은 같은 문제를 반복적으로 다루기 위해 새로운 심볼을 도입하는 것을 피하려고 노력합니다. Vue의 내장 필터를 교체하는 방법은 다음과 같습니다.🎜🎜🎜🎜rrreeerrreee
debounce필터를 교체하세요. 더 이상 이와 같이 작성하지 마세요lodash의
디바운스(throttle)을 사용하여 사용량이 많은 작업을 직접 제어할 수 있습니다. 위 함수는 다음과 같이 구현할 수 있습니다. rrreeerrreee이 쓰기 방법의 더 많은 장점은v-model예를 참조하세요.limitBy필터를 교체하세요. 🎜🎜🎜더 이상 다음과 같이 작성하지 마세요: 🎜rrreee🎜계산된 속성에 js 내장 메서드 사용:.slicemethod🎜: 🎜rrreeerrreee🎜🎜🎜🎜🎜교체filterBy필터 🎜🎜🎜는 더 이상 다음과 같이 작성되지 않습니다. 🎜rrreee🎜계산된 속성.filtermethod🎜：🎜rrreeerrreee🎜js 기본.filter모든 js 메서드는 계산된 속성에서 사용될 수 있기 때문에 필터 작업이 복잡해질 수도 있습니다. 예를 들어 이름과 이메일 주소를 일치시켜 사용자를 찾으려면(대소문자 구분 안 함): 🎜rrreee🎜🎜🎜🎜🎜다음을 쓰는 대신orderBy필터 🎜🎜🎜를 바꿉니다. 🎜rrreee🎜를 사용하는 것입니다. 계산된 속성에 있는 lodash의orderBy🎜(또는sortBy🎜): 🎜rrreeerrreee🎜짝 필드 정렬:🎜rrreee🎜🎜🎜🎜업그레이드 방법 🎜🎜🎜 🎜 🎜Migration Tool🎜을 실행하여 지시문에 사용된 필터를 찾으세요. 일부를 찾을 수 없으면 🎜콘솔 오류 메시지🎜를 살펴보세요. 🎜🎜
필터 매개변수 표기법change
이제 필터 매개변수 형식이 js 함수 호출 방법과 더 잘 일치할 수 있으므로 매개변수를 공백으로 구분할 필요가 없습니다.
rrreee이제 다음으로 묶입니다. 괄호 및 쉼표로 구분:
rrreee업그레이드 방법
마이그레이션 도구를 실행하여 이전 호출 기호가 누락된 경우 콘솔 오류 메시지를 참조하세요.
내장 텍스트 필터 제거됨
모든 내장 필터가 제거되었지만 텍스트 내부에 삽입된 필터는 여전히 유효합니다. 대신 각 분야에 좀 더 특화된 라이브러리를 활용하는 것이 좋습니다. (예를 들어 날짜 형식을 지정하려면
date-fnsdate-fns来格式化日期，用accounting来格式化货币)。对于每个内置过滤器，我们大概总结了下该怎么替换。代码示例可能写在自定义 helper 函数，方法或计算属性中。
替换
json过滤器不用一个个改，因为 Vue 已经帮你自动格式化好了，无论是字符串，数字还是数组，对象。如果想用 js 的
JSON.stringify功能去实现，你也可以把它写在方法或者计算属性里面。
替换
rrreeecapitalize过滤器
替换
rrreeeuppercase过滤器
替换
rrreeelowercase过滤器
替换
pluralize过滤器NPM 上的 pluralize 库可以很好的实现这个功能。如果仅仅想将特定的词格式化成复数形式或者想给特定的值 (‘0’) 指定特定的输出，也可以很容易地自定义复数格式化过滤器：
rrreee
Replacing the
currencyFilter对于简单的问题，可以这样做：
rrreee大多数情况下，仍然会有奇怪的现象 (比如
0.035.toFixed(2)向上取舍得到0.04，但是0.045向下取舍却也得到0.04)。解决这些问题可以使用accounting를 사용하고회계 통화 형식 지정).각 내장 필터에 대해 교체 방법을 대략적으로 정리해드립니다. 코드 예제는 사용자 지정 도우미 함수, 메서드 또는 계산된 속성으로 작성될 수 있습니다.🎜🎜json필터 교체문자열이든 숫자든 Vue가 자동으로 형식을 지정해 주기 때문에 하나씩 변경할 필요가 없습니다. 배열이든 객체이든. js의
JSON.stringify함수를 사용하여 구현하려는 경우 메서드나 계산된 속성에 작성할 수도 있습니다.capitalize필터 교체 🎜🎜rrreee🎜🎜🎜🎜🎜대문자필터 교체 🎜🎜rrreee🎜🎜🎜🎜🎜>소문자< /code> 필터 🎜🎜rrreee🎜🎜🎜🎜🎜는 NPM ="의Filter🎜🎜🎜간단한 문제의 경우 다음을 수행할 수 있습니다.🎜rrreee🎜대부분의 경우 여전히 이상한 현상이 발생합니다(예:pluralize필터 🎜🎜🎜pluralize🎜 라이브러리는 이 기능을 매우 잘 구현할 수 있습니다. 특정 단어의 형식을 복수형으로 지정하거나 특정 값('0')에 대한 특정 출력을 지정하려는 경우 복수 형식 지정 필터를 쉽게 사용자 정의할 수도 있습니다. 🎜rrreee🎜🎜🎜🎜🎜< 코드> 통화 바꾸기0.035.toFixed(2)0.04이지만 반내림하면0.045가 됩니다). 이러한 문제를 해결하려면회계🎜 라이브러리를 사용하여 보다 안정적인 통화를 얻을 수 있습니다. 서식을 지정합니다. 🎜🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜🎜이전 도구🎜를 실행하여 버려진 필터를 찾으세요. 누락된 내용이 있는 경우 🎜콘솔 오류 메시지🎜를 참고하세요. 🎜🎜
양방향 필터 Replacement
일부 사용자는
v-model을 통해 양방향 필터를 사용하여 매우 적은 코드로 흥미로운 입력을 생성하는 것을 즐겼습니다. 표면적으로는 단순하지만 양방향 필터는 몇 가지 엄청난 복잡성을 숨길 수 있습니다. 심지어 상태 업데이트를 느리게 만들고 사용자 경험에 영향을 미치기도 합니다. 대신 입력을 래핑하는 구성 요소를 사용하여 보다 명시적이고 기능이 풍부한 방식으로 사용자 지정 입력을 생성할 수 있도록 하는 것이 좋습니다.v-model使用双向过滤器，以很少的代码创建有趣的输入。尽管表面上很简单，双向过滤器也会暗藏一些巨大的复杂性——甚至促使状态更新变得迟钝影响用户体验。推荐用包裹一个输入的组件取而代之，这样以更显性且功能更丰富的方式创建自定义的输入。我们现在做一次双向汇率过滤器的迁移作为示范：
它基本工作良好，但是拖延的状态更新会导致奇怪的行为。比如，点击
Result标签，试着在其中一个输入框中输入9.999。当输入框失去焦点的时候，其值将会更新到.00。然而当我们从整个计算器的角度看时，你会发现存储的数据是9.999。用户看到的已经不是真实的同步了！为了过渡到一个更加健壮的 Vue 2.0 的方案，让我们首先在一个新的
<currency-input>组件中包裹这个过滤器：它允许我们添加独立过滤器无法封装的行为，比如选择输入框聚焦的内容。下一步我们从过滤器中提取业务逻辑。接下来是我们把所有的东西放到一个外部的
기본적으로는 잘 작동하지만 상태 업데이트가 지연되면 이상한 동작이 발생할 수 있습니다. 예를 들어currencyValidator현재 데모로 양방향 환율 필터 마이그레이션을 수행하고 있습니다.결과태그를 클릭하고 입력 상자 중 하나에9.999를 입력해 보세요. 입력 상자가 포커스를 잃으면 해당 값이$10.00로 업데이트됩니다. 그런데 전체 계산기를 보면 저장된 데이터가9.999인 것을 알 수 있습니다. 사용자가 보는 것은 더 이상 진정한 동기화가 아닙니다! 보다 강력한 Vue 2.0 솔루션으로 전환하려면 먼저 이 필터를 새로운<currency-input>구성 요소로 래핑해 보겠습니다.
- 다음과 같은 애플리케이션의 다른 부분에서 사용하세요. API 측 로드 유효성 검사 🎜🎜🎜🎜이 유효성 검사기를 추출한 후 더 강력한 솔루션으로 더욱 편안하게 구축할 수도 있습니다. 이러한 이상한 상태도 제거되어 브라우저의 기본 숫자 입력 상자처럼 사용자가 더 이상 오류를 입력할 가능성이 없습니다. 🎜🎜그러나 Vue 1.0 필터에서는 여전히 제한이 있으므로 Vue 2.0으로 완전히 업그레이드해 보겠습니다.
수명주기 후크와 DOM 이벤트를 사용하여 양방향 필터의 숨겨진 동작을 대체하여 입력 상자의 모든 측면이 더욱 명확해졌습니다.
이제 사용자 정의 입력 상자에서 직접
v-model을 사용할 수 있습니다. 이는 일반 입력 상자와 함께 사용될 뿐만 아니라 구성 요소가 Vuex 친화적임을 의미합니다.v-model，其不只是固定配合正常的输入框来使用，这也意味着我们的组件是对 Vuex 友好的。因为我们已经不再要求过滤器选项必须要有一个返回值，所以实际上我们的汇率工作可以异步完成。这意味着如果我们有很多应用需要和汇率打交道，我们可以轻松的提炼这个逻辑并成为一个共享的微服务。
升级方式
运行迁移工具找到在例如
v-model的指令中使用过滤器的例子。如果你错过了，则应该会收到命令行报错。
插槽
重名的插槽 移除
同一模板中的重名
<slot>已经弃用。当一个插槽已经被渲染过了，那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一内容，可以用 prop 来传递。升级方式
更新后运行测试，查看控制台警告信息 关于重名 slots 的提示
v-model。
slot样式参数 移除通过具名
<slot>插入的片段不再保持slot的参数。请用一个包裹元素来控制样式。或者用更高级方法：通过编程方式修改内容 ：render functions。🎜반환 값을 얻기 위해 더 이상 필터 옵션이 필요하지 않기 때문에 환율 작업은 실제로 비동기식으로 수행될 수 있습니다. 즉, 환율을 처리하는 애플리케이션이 많으면 이 논리를 쉽게 개선하여 공유 마이크로서비스로 만들 수 있습니다. 🎜🎜升级方式
运行迁移工具找到选择 slots 标签 CSS 选择器 (例如：
[slot="my-slot-name"]🎜업그레이드 방법🎜🎜이전 도구v-model과 같은 지시문에서 필터를 사용하는 예를 찾아보세요. 이를 놓치면 명령줄 오류가 발생합니다. 🎜🎜🎜
🎜슬롯
🎜
🎜동일한 이름의 슬롯삭제
🎜🎜동일 템플릿<slot>의 중복된 이름은 더 이상 사용되지 않습니다. 슬롯이 렌더링되면 동일한 템플릿의 다른 곳에서 다시 렌더링할 수 없습니다. 동일한 콘텐츠를 다른 위치에 렌더링하려면 prop을 사용하여 전달할 수 있습니다. 🎜🎜 업그레이드 방법🎜🎜업데이트 후 테스트를 실행하고 콘솔 경고 메시지에서 중복 이름이 지정된 슬롯v-model에 대한 팁을 확인하세요. 🎜🎜🎜
🎜
슬롯 스타일 매개변수 제거🎜🎜<slot> 삽입된 조각은 더 이상슬롯의 매개변수를 유지하지 않습니다. 스타일을 제어하려면 래핑 요소를 사용하세요. 또는 보다 고급 접근 방식을 취합니다. 프로그래밍 방식으로 콘텐츠를 수정합니다(렌더링 함수). 🎜🎜 업그레이드 방법🎜🎜이전 도구를 실행하여 찾아 선택하세요. 슬롯 태그 CSS 선택기(예:[slot="my-slot-name"]) 🎜🎜
특수 속성
keep-alive属性 替换rrreee
keep-alive不再是一个特殊属性而是一个包裹组件，类似于<transition>比如：这样可以在含多种状态子组件中使用
rrreee<keep-alive>：当
<keep-alive>含有不同子组件时，应该分别影响到每一个子组件。不仅是第一个而是所有的子组件都将被忽略。和
rrreee<transition>一起使用时，确保把内容包裹在内：升级方式
运行迁移工具找到
keep-alive属性。
计算插值
属性内部的计算插值 移除
属性内部的计算插值已经不能再使用了：
rrreee应该写成行内表达式：
rrreee或者计算属性：
rrreeerrreee升级方式
运行迁移工具找到属性内部的计算插值
HTML 计算插值 移除
HTML 的计算插值 (
{{{ foo }}}) 已经移除，取代的是v-htmlkeep-alive속성 replacementrrreee
keep-alive는 더 이상 특수 속성이 아니라<transition>와 유사한 래핑된 구성 요소입니다.예:이는
<keep-alive>상태가 여러 개인 하위 구성 요소에서 사용할 수 있습니다. rrreee<keep-alive> ;< /code> 다양한 하위 구성 요소가 포함된 경우 각 하위 구성 요소에 개별적으로 영향을 주어야 합니다. 첫 번째 구성요소뿐만 아니라 모든 하위 구성요소도 무시됩니다.<transition>과 함께 사용하는 경우 콘텐츠를 래핑해야 합니다. 🎜rrreee🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜실행 🎜마이그레이션 도구🎜찾기 연결 유지속성. 🎜🎜🎜🎜🎜🎜🎜계산된 보간🎜🎜🎜🎜🎜🎜🎜
🎜 속성 내 계산된 보간 제거됨 🎜🎜🎜🎜🎜 속성 내 계산된 보간은 더 이상 사용할 수 없습니다. 🎜rrreee🎜는 인라인 표현식: 🎜rrreee🎜 또는 계산된 속성: 🎜rrreeerrreee🎜으로 작성해야 합니다. 🎜 🎜🎜업그레이드 방법🎜🎜🎜🎜🎜마이그레이션 도구🎜를 실행하여 속성 내에서 계산된 보간을 찾습니다🎜🎜🎜🎜🎜
🎜 HTML 계산 보간 제거됨🎜🎜🎜🎜HTML 계산 보간(
{{{ foo }}})이 제거되고v-html명령 🎜. 🎜🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜 🎜이전 도구🎜를 실행하여 HTML 계산 보간법을 찾으세요. 🎜🎜
Single BindingReplaced
Single Binding(
{{* foo }})이 새로운v-once지시어{{* foo }}) 已经被新的v-oncedirective 取代。升级方式
运行迁移工具找到单次绑定使用位置。
响应
vm.$watchchanged通过
vm.$watch创建的观察器现在将在组件渲染时被激活。这样可以让你在组件渲染前更新状态，不用做不必要的更新。比如可以通过观察组件的 prop 变化来更新组件本身的值。如果以前通过
vm.$watch在组件更新后与 DOM 交互，现在就可以通过updated生命周期钩子来做这些。升级方式
运行测试，如果有依赖于老方法的观察器将弹出 failed tests。
vm.$set变更
vm.$set只是Vue.set的别名。升级方式
运行迁移工具找到过时的用法
vm.$delete变更
vm.$delete现在只是：Vue.delete가 대체되었습니다.🎜🎜업그레이드 방법
migration 도구를 실행하여 단일 바인딩 사용 위치를 찾으세요.
🎜response🎜🎜
🎜🎜🎜
🎜🎜vm.$watch🎜🎜🎜🎜 🎜changed🎜🎜🎜🎜🎜vm.$watch를 통해 생성된 Observer는 이제 구성 요소가 렌더링될 때 활성화됩니다. 이를 통해 불필요한 업데이트 없이 구성 요소가 렌더링되기 전에 상태를 업데이트할 수 있습니다. 예를 들어 구성 요소 소품의 변경 사항을 관찰하여 구성 요소 자체의 값을 업데이트할 수 있습니다. 🎜🎜이전에vm.$watch를 통해 구성 요소 업데이트 후 DOM과 상호작용했다면 이제업데이트된수명 주기 후크를 통해 이 작업을 수행할 수 있습니다. 🎜🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜테스트 실행, 이전 방법에 의존하는 관찰자가 있으면 실패한 테스트가 나타납니다. 🎜🎜🎜🎜🎜
🎜🎜vm.$set🎜🎜🎜🎜 🎜Change🎜🎜🎜🎜🎜vm.$setVue.set🎜의 별칭입니다. 🎜🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜🎜마이그레이션 도구 실행🎜사용되지 않는 사용법 발견🎜🎜🎜🎜🎜
🎜🎜vm.$delete🎜🎜🎜🎜 🎜Changes🎜🎜🎜🎜🎜vm.$delete는 이제Vue.delete🎜 별칭. 🎜🎜🎜🎜🎜업그레이드 방법🎜🎜🎜🎜 🎜마이그레이션 도구 실행🎜오래된 사용법 찾기🎜🎜
Array.prototype.$set Deprecated
대신
Vue.set를 사용하세요Vue.set替代升级方式
运行迁移工具找到数组上的
.$set。如有遗漏请参考控制台错误信息。
Array.prototype.$remove移除用
rrreeeArray.prototype.splice替代，例如：或者更好的方法，直接给除去的方法一个 index 参数：
rrreee升级方式
运行迁移工具找到数组上的
.$remove。如有遗漏请参考控制台错误信息。
Vue 实例上的
Vue.set和Vue.delete移除
Vue.set和Vue.delete在实例上将不再起作用。现在都强制在实例的 data 选项中声明所有顶级响应值。如果删除实例属性或实例$data上的某个值，直接将它设置为 null 即可。升级方式
运行迁移工具找到实例中的
Vue.set或Vue.delete。如有遗漏请参考控制台错误信息。
替换
vm.$data移除现在禁止替换实例的 $data。这样防止了响应系统的一些极端情况并且让组件状态更加可控可预测 (特别是对于存在类型检查的系统)。
升级方式
运行迁移工具找到覆盖
vm.$data업그레이드 방법🎜🎜실행 마이그레이션 도구는 어레이에서.$set를 찾습니다. 누락된 내용이 있는 경우 🎜콘솔 오류 메시지🎜를 참고하세요. 🎜🎜🎜🎜🎜
🎜🎜Array.prototype.$remove🎜🎜🎜🎜 🎜Remove🎜🎜🎜🎜🎜 withArray . 프로토타입.splice대안, 예: 🎜rrreee🎜 또는 더 나은 방법은 제거된 메소드에 인덱스 매개변수를 직접 제공하는 것입니다: 🎜rrreee🎜🎜업그레이드 방법🎜🎜🎜🎜Run마이그레이션 도구가 어레이에서.$remove를 찾았습니다. 누락된 내용이 있는 경우 🎜콘솔 오류 메시지🎜를 참고하세요. 🎜🎜🎜🎜🎜🎜🎜
Vue.set및Vue.delete🎜Remove🎜🎜🎜 Vue 인스턴스 🎜 🎜Vue.set및Vue.delete는 더 이상 인스턴스에서 작동하지 않습니다. 이제 인스턴스의 데이터 옵션에서 모든 최상위 응답 값을 선언하는 것이 필수입니다. 인스턴스$data에서 인스턴스 속성이나 값을 삭제하는 경우 null로 설정하면 됩니다. 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜 마이그레이션 도구를 실행하여 인스턴스 코드> 또는Vue.delete. 누락된 내용이 있는 경우 🎜콘솔 오류 메시지🎜를 참고하세요. 🎜🎜🎜🎜🎜🎜🎜
vm.$data교체 🎜removal🎜🎜🎜🎜🎜인스턴스의 $data 교체가 이제 금지됩니다. 이는 일부 극단적인 경우로부터 응답 시스템을 방지하고 구성 요소 상태를 보다 쉽게 제어하고 예측할 수 있게 만듭니다(특히 유형 검사 기능이 있는 시스템의 경우). 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜 마이그레이션 도구를 실행하여vm.$data< 적용 범위를 찾으세요. /코드 > 위치. 누락된 내용이 있다면 🎜콘솔 경고 메시지🎜를 참고해주세요. 🎜🎜
vm.$get移除可以直接取回响应数据。
升级方式
运行迁移工具找到
vm.$get的位置。如有遗漏请参考 控制台错误信息。
围绕 DOM 的实例方法
vm.$appendTo移除使用 DOM 原生方法：
rrreee升级方式
运行迁移工具找到
vm.$appendTo的位置。如果有遗漏可以参考 控制台错误信息。
vm.$before移除使用 DOM 原生方法：
rrreee升级方式
运行迁移工具找到
vm.$before。如有遗漏，请参考 控制台错误信息。
vm.$after移除使用 DOM 原生方法：
rrreee如果 myElement 是最后一个节点也可以这样写：
rrreee🎜를 사용하면 응답 데이터를 직접 검색할 수 있습니다. 🎜升级方式
运行迁移工具找到
vm.$aftervm.$get Remove🎜🎜업그레이드 방법 🎜🎜🎜마이그레이션 도구를 실행하여vm.$get을 찾으세요. < /code> 위치. 누락된 내용이 있는 경우 🎜콘솔 오류 메시지🎜를 참고하세요. 🎜🎜🎜🎜🎜🎜DOM 주변의 인스턴스 메서드🎜
🎜🎜🎜 < p id="vm-$appendTo">🎜vm.$appendTo🎜🎜 제거🎜🎜🎜🎜DOM 기본 방법 사용: 🎜rrreee🎜🎜업그레이드 방법🎜🎜🎜마이그레이션 도구는vm.$appendTo의 위치를 찾습니다. 누락된 내용이 있는 경우 🎜콘솔 오류 메시지🎜를 참고하세요. 🎜🎜🎜🎜🎜
🎜vm.$before🎜🎜 제거🎜🎜🎜DOM 기본 방법 사용: 🎜rrreee🎜🎜업그레이드 방법🎜🎜🎜실행 마이그레이션 도구가vm.$before를 찾았습니다. 누락된 것이 있으면 🎜콘솔 오류 메시지🎜를 참조하세요. 🎜🎜🎜🎜🎜
🎜vm.$after🎜🎜 제거🎜🎜🎜DOM 기본 방법 사용: 🎜rrreee🎜myElement가 마지막 노드인 경우 다음과 같이 작성할 수도 있습니다. 🎜rrreee< div 스타일 ="margin-top: 2em;padding: 2em; background: rgba(73,195,140,0.1);border-radius: 2px;">🎜🎜업그레이드 방법🎜< /span >🎜🎜마이그레이션 도구를 실행하여vm.$after 위치. 누락된 것이 있으면 🎜콘솔 오류 메시지🎜를 참조하세요. 🎜🎜
vm.$remove제거vm.$remove移除使用 DOM 原生方法：
rrreee升级方式
运行迁移工具找到
vm.$remove。如有遗漏，请参考 控制台错误信息。
底层实例方法
vm.$eval移除尽量不要使用，如果必须使用该功能并且不肯定如何使用请参考 the forum。
升级方式
运行迁移工具找到使用
vm.$eval的位置。如有遗漏请参考 控制台错误信息。
vm.$interpolate移除尽量不要使用，如果必须使用该功能并且不肯定如何使用请参考 the forum。
升级方式
运行迁移工具找到
vm.$interpolate。如有遗漏请参考 控制台错误信息。
vm.$log移除请使用 Vue Devtools 感受最佳 debug 体验。
rrreee升级方式
运行迁移工具找到
DOM 기본 방법 사용:vm.$log🎜업그레이드 방법🎜🎜Run마이그레이션 도구vm.$remove를 찾으세요. 누락된 항목이 있으면 콘솔 오류 메시지를 참조하세요. 🎜🎜🎜🎜🎜기본 인스턴스 메서드
🎜🎜🎜
vm.$eval제거🎜🎜 이 기능을 사용해야 하는데 그렇지 않은 경우에는 사용하지 마세요. 자세한 사용법은 포럼을 참고해주세요. 🎜🎜 업그레이드 방법🎜🎜 이전 도구를 실행하여 찾아서 사용하세요.vm.$eval의 위치. 누락된 항목이 있으면 콘솔 오류 메시지를 참조하세요. 🎜🎜🎜🎜🎜
vm.$interpolate제거🎜🎜 이 기능을 사용해야 하는데 그렇지 않은 경우에는 사용하지 마세요. 자세한 사용법은 포럼을 참고해주세요. 🎜🎜 업그레이드 방법🎜🎜마이그레이션 도구를 실행하여 <코드를 찾으세요. > vm.$보간. 누락된 항목이 있으면 콘솔 오류 메시지를 참조하세요. 🎜🎜🎜🎜🎜
vm.$log제거🎜🎜 Vue Devtools 최고의 디버깅 경험을 경험해 보세요. 🎜🎜 업그레이드 방법🎜🎜 이전 도구를 실행하여 <코드를 찾으세요. > vm.$log. 누락된 항목이 있는 경우 콘솔 오류 메시지를 참조하세요. 🎜🎜
인스턴스 DOM 옵션
replace: false移除现在组件总是会替换掉他们被绑定的元素。为了模仿
rrreeereplace: false的行为，可以用一个和将要替换元素类似的元素将根组件包裹起来：或者使用渲染函数：
rrreee升级方式
运行迁移工具找到
replace: false使用的位置。
全局配置
Vue.config.debug移除不再需要，因为警告信息将默认在堆栈信息里输出。
升级方式
运行迁移工具找到包含
Vue.config.debug的地方。
Vue.config.async移除异步操作现在需要渲染性能的支持。
升级方式
运行迁移工具找到使用
Vue.config.async的实例。
Vue.config.delimiters替换以模板选项的方式使用。这样可以在使用自定义分隔符时避免影响第三方模板。
🎜 제거🎜🎜🎜🎜🎜이제 구성 요소는 항상 바인딩된 요소를 대체합니다.升级方式
运行迁移工具找到使用
Vue.config.delimitersreplace: falsereplace: false의 동작을 모방하려면 대체할 요소와 유사한 요소로 루트 구성 요소를 래핑할 수 있습니다: 🎜rrreee🎜 또는 렌더링 기능을 사용할 수 있습니다: 🎜rrreee🎜🎜업그레이드 방법🎜🎜🎜🎜실행마이그레이션 도구replace: false가 사용되는 위치를 찾으세요. 🎜🎜🎜🎜🎜🎜🎜전역 구성🎜🎜🎜🎜🎜🎜🎜
🎜Vue.config.debug🎜🎜🎜 제거🎜🎜🎜🎜🎜경고로 인해 더 이상 필요하지 않음 정보 기본적으로 스택 메시지에 출력됩니다. 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜 마이그레이션 도구를 실행하여Vue.config가 포함된 파일을 찾으세요. 디버그 장소. 🎜🎜🎜🎜🎜
🎜Vue.config.async🎜🎜🎜 제거됨🎜🎜🎜🎜비동기 작업에는 이제 렌더링 성능 지원이 필요합니다. 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜마이그레이션 도구를 실행하여Vue.config.async를 찾아 사용하세요. 인스턴스. 🎜🎜🎜🎜🎜
🎜Vue.config.delimiters🎜🎜🎜 교체🎜🎜🎜🎜를 로 바꾸세요. 템플릿 옵션을 사용하세요. 이렇게 하면 사용자 정의 구분 기호를 사용할 때 타사 템플릿에 영향을 주지 않습니다. 🎜🎜🎜업그레이드 방법 🎜🎜🎜🎜마이그레이션 도구를 실행하여Vue.config.delimiters를 찾아 사용하세요. 인스턴스. 🎜🎜
Vue.config.unsafeDelimiters제거Vue.config.unsafeDelimiters移除HTML 插值替换为
v-html。升级方式
运行迁移工具来找到
Vue.config.unsafeDelimiters。然后 helper 工具也会找到 HTML 插入的实例，可以用`v-html`来替换。
全局 API
带
el的Vue.extend移除el 选项不再在
Vue.extend中使用。仅在实例创建参数中可用。升级方式
更新后运行测试在控制台警告信息中找到关于带有
Vue.extend的el。
Vue.elementDirective移除用组件来替代
🎜 업그레이드 방법🎜🎜마이그레이션 도구를 실행하여 <코드를 찾으세요. >Vue.config.unsafeDelimiters. 그런 다음 도우미 도구는 `v-html`로 대체될 수 있는 HTML 삽입 인스턴스도 찾습니다. 🎜🎜🎜🎜🎜글로벌 API
🎜 🎜🎜
Vue.extend및el제거 🎜🎜🎜el 옵션은 더 이상Vue.extend에서 사용되지 않습니다. 인스턴스 생성 매개변수에서만 사용할 수 있습니다. 🎜🎜 업그레이드 방법🎜🎜업데이트 후 테스트를 실행하세요.Vue.extendel에 대한 콘솔 경고 메시지를 찾으세요. 코드> 코드>. 🎜🎜🎜🎜🎜
Vue.elementDirective< span style="font-size: 18px;"> 제거🎜🎜구성 요소로 교체🎜🎜업그레이드 방법🎜🎜 실행 마이그레이션 도구를 사용하여Vue.elementDirective가 포함된 인스턴스를 찾습니다. 🎜🎜
Vue.partial제거됨Vue.partial移除Partials 已被移除，取而代之的是更明确的组件之间的数据流–props。除非你正在使用一个部分性能关键型区域，否则建议只使用一个 normal component 来代替。如果你是动态绑定部分的
name，您可以使用 dynamic component。如果你碰巧在你的应用程序的性能关键部分使用 partials，那么你应该升级到函数式组件。它们必须在纯 JS / JSX 文件中 (而不是在
.vue文件中)，并且是无状态的和无实例的，就像 partials。这使得渲染极快。函数式组件相对于 partials 一个好处是它们可以更具动态性，因为它们允许您访问 JavaScript 的全部功能。然而，这是有成本的。如果你从来没有使用过渲染式的组件框架，你可能需要花费更长的时间来学习它们。
升级方式
运行迁移工具找到包含
부분이 제거되고 구성 요소(props) 간의 보다 명확한 데이터 흐름으로 대체되었습니다. 부분적으로 성능이 중요한 영역을 사용하지 않는 한 대신 일반 구성요소 를 사용하는 것이 좋습니다.Vue.partialname부분을 동적으로 바인딩하는 경우 동적 구성 요소.애플리케이션의 성능이 중요한 부분에서 부분 부분을 사용하는 경우 로 업그레이드해야 합니다. 기능적 구성요소. 이는 순수 JS/JSX 파일(
부분 요소에 비해 기능적 구성 요소의 한 가지 이점은 JavaScript의 모든 기능에 액세스할 수 있기 때문에 더 동적으로 만들 수 있다는 것입니다. 그러나 여기에는 비용이 듭니다. 렌더링된 구성 요소 프레임워크를 사용해 본 적이 없다면 이를 배우는 데 시간이 더 오래 걸릴 수 있습니다..vue파일이 아님)에 있어야 하며 부분과 마찬가지로 상태 비저장 및 인스턴스가 없어야 합니다. 이로 인해 렌더링 속도가 매우 빨라집니다.업그레이드 방법🎜🎜마이그레이션 도구를 실행하여 < 코드 >Vue.partial 인스턴스🎜🎜🎜🎜🎜🎜 🎜
