Migration depuis Vue 1.x

v-for< /h2>

---

🎜🎜🎜

v-for Ordre des paramètres ^{modifié lors du parcours des tableaux}🎜🎜🎜Lorsqu'il contient un index , l'ordre des paramètres lors du parcours du tableau était (index, valeur). Il s'agit désormais de (value, index), pour être cohérent avec les méthodes de tableau natives de JavaScript (telles que forEach et map). 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'outil de migration dans la base de code pour trouver des exemples qui utilisent l’ancien ordre des arguments. Notez que si vous nommez votre paramètre d'index de manière inhabituelle (comme position ou num), l'outil de migration ne les marquera pas. 🎜🎜

v-pourOrdre des paramètres lors du parcours de l'objet^Changementv-for 遍历对象时的参数顺序 ^变更

当包含 property 名称/key 时，之前遍历对象的参数顺序是 (name, value)。现在是 (value, name)，来和常见的对象迭代器 (例如 lodash) 保持一致。

升级方式

在代码库中运行迁移工具来找出那些使用旧有参数顺序的示例。注意，如果你将你的 key 参数命名为一些不通用的名字 (例如 name 或 property)，迁移工具将不会把它们标记出来。

$index and $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

Lorsque le nom/la clé de la propriété est inclus, l'ordre précédent des paramètres de parcours de l'objet était ( nom, valeur ). Maintenant (value, name), pour être cohérent avec les itérateurs d'objets courants (par exemple lodash).

🎜 Méthode de mise à niveau🎜🎜Exécutez l'outil de migration dans la base de code pour trouver des exemples qui utilisent l’ancien ordre des arguments. Notez que si vous nommez vos paramètres clés de manière inhabituelle (comme name ou property), l'outil de migration ne les marquera pas. 🎜🎜🎜🎜🎜

$index et $key ^Supprimer🎜🎜a supprimé $index et $key sont des variables implicitement déclarées pour une définition explicite dans v-for. Cela permet aux développeurs sans grande expérience en développement Vue de mieux lire le code et entraîne également un comportement plus propre lorsqu'ils traitent des boucles imbriquées. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'outil de migration dans la base de code pour trouver des exemples d’utilisation de ces variables supprimées. Si vous ne le trouvez pas, vous pouvez également le rechercher dans Erreur de console (par exemple Uncaught ReferenceError : $index n'est pas défini). 🎜🎜🎜🎜🎜

track-by< span style="font-size: 18px;"> ^remplacement🎜🎜track-by a été remplacé par key , elle fonctionne comme les autres propriétés, sans préfixe v-bind ou :, elle sera traitée comme une chaîne. Dans la plupart des cas, vous devrez remplacer les clés statiques par des liaisons dynamiques par des expressions complètes. Par exemple, pour remplacer : 🎜

template: '<p>message: {{ getTimeMessage() }}</p>',
methods: {
  getTimeMessage: function () {
    return Date.now() + this.message
  }
}

🎜 vous devez maintenant écrire : 🎜

<my-component v-on:click.native="doSomething"></my-component>

🎜< span style="font-size: 16px;">Méthode de mise à niveau🎜🎜Exécuter dans la base de codeOutil de migration pour trouver des exemples qui utilisent track-by. 🎜🎜

v-pour Valeur de plage ^changev-for 范围值 ^变更

之前，v-for="number in 10" 的 number 从 0 开始到 9 结束，现在从 1 开始，到 10 结束。

升级方式

在代码库中使用正则 /w+ in d+/搜索。当出现在 v-for 中，请检查是否受到影响。

Props

---

coerce Prop 的参数 ^移除

如果需要检查 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 选项的实例。

twoWay Prop 的参数 ^移除

Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。详见：

• 自定义组件事件

• 自定义输入组件 (使用组件事件)

• 全局状态管理

升级方式

运行迁移工具，找出含有 twoWay

avant, numéro de v-for="numéro sur 10" > Cela a commencé à 0 et s'est terminé à 9, maintenant cela commence à 1 et se termine à 10.

🎜 Méthode de mise à niveau🎜🎜Utilisez la recherche régulière /w+ dans d+/ dans la base de code. Lorsqu'il est présent dans v-for , veuillez vérifier s'il est affecté. 🎜🎜🎜🎜🎜

Accessoires

---

🎜🎜🎜< p id="coerce-prop">contraindre Paramètres de prop ^supprimer🎜🎜Si vous devez vérifier la valeur de prop, créez une valeur calculée interne au lieu d'entrer dans la définition de props, par exemple exemple : 🎜

<input v-model="name" lazy>
<input v-model="age" type="number" number>

🎜 devrait maintenant être écrit comme : 🎜

<input v-model.lazy="name">
<input v-model.number="age" type="number">

🎜Cela présente certains avantages : 🎜

• 🎜Vous pouvez conserver les autorisations d'opération de la valeur de prop d'origine . 🎜
• 🎜Obligez les développeurs à utiliser des déclarations explicites en donnant un nom différent à la valeur vérifiée. 🎜

🎜Méthode de mise à niveau🎜🎜Exécutez la migration Trouver les instances contenant l'option coerce. 🎜🎜🎜🎜🎜

twoWay Paramètres des accessoires ^supprimés🎜🎜Les accessoires ne peuvent désormais être transmis que dans une seule direction. Afin d'avoir un effet inverse sur le composant parent, le composant enfant doit transmettre explicitement un événement au lieu de s'appuyer sur une liaison bidirectionnelle implicite. Pour plus de détails, voir : 🎜

• 🎜Personnalisé Événements de composant🎜
• 🎜Composants d'entrée personnalisés (Utilisation d'événements de composants)🎜
• 🎜Gestion globale de l'état🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'outil de migration, Recherchez les instances contenant le paramètre twoWay. 🎜🎜

v-bindLes modificateurs .once et .sync sont ^supprimésv-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

Les accessoires ne peuvent désormais être utilisés que transmettre individuellement à. Afin d'avoir un effet inverse sur le composant parent, le composant enfant doit transmettre explicitement un événement au lieu de s'appuyer sur une liaison bidirectionnelle implicite. Pour plus de détails, voir :

• 🎜Personnalisé Événements de composant🎜
• 🎜Composants d'entrée personnalisés (Utilisation d'événements de composants)🎜
• 🎜Gestion globale de l'état🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour recherchez des instances à l'aide des modificateurs .once et .sync. 🎜🎜🎜🎜🎜

Modifier les accessoires ^Obsolète 🎜 🎜Modifier des accessoires au sein d'un composant est un anti-modèle (non recommandé). Par exemple, déclarez d'abord un accessoire, puis modifiez la valeur de l'accessoire dans le composant via this.myProp = 'someOtherValue'. Selon le mécanisme de rendu, lorsque le composant parent est restitué, la valeur de prop interne du composant enfant sera également écrasée. 🎜🎜Dans la plupart des cas, la modification de la valeur de prop peut être remplacée par les options suivantes : 🎜

• 🎜Grâce à l'attribut data, utilisez prop pour définir la valeur par défaut d'un attribut de données. 🎜
• 🎜Grâce à l'attribut calculé. 🎜

🎜Méthode de mise à niveau🎜🎜Exécutez le test de bout en bout et vérifiez les informations d'avertissement de la console concernant la modification des accessoires. 🎜🎜🎜🎜🎜

Accessoires pour le ^{remplacement de l'instance racine}🎜🎜Pour une instance racine (par exemple : une instance créée avec new Vue({ ... })), vous ne pouvez utiliser que propsData au lieu de accessoires . 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez des tests de bout en bout, les tests ayant échoué apparaîtront pour vous informer que l'instance racine utilisant props a expiré . 🎜🎜

Propriétés calculées

---

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

^Obsolète

Dans les futures versions majeures de Vue, la validation du cache des propriétés calculées sera supprimée. La conversion des propriétés calculées non mises en cache en méthodes donne les mêmes résultats qu'auparavant.

Exemple :

<textarea v-model="text">
  hello world
</textarea>

Ou utilisez la méthode du composant :

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

🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜Trouvez l'option cache: false . 🎜🎜🎜🎜🎜

🎜🎜Instruction intégrée🎜🎜🎜🎜🎜🎜🎜

🎜v-bind🎜🎜🎜 valeur vrai/faux ^changer🎜🎜🎜🎜🎜 dans Lors de l'utilisation de v-bind dans la version 2.0, seuls null, undefined et false sont considérés comme faux. Cela signifie que 0 et les chaînes vides seront rendues comme de vraies valeurs. Par exemple, v-bind:draggable="''" sera rendu comme draggable="true". 🎜🎜Pour les propriétés d'énumération, en plus des fausses valeurs ci-dessus, la chaîne "false" sera également rendue sous la forme attr="false". 🎜

🎜Notez que pour les autres fonctions hook (telles que v-if et v-show), elles suivent toujours les règles générales de js pour juger du vrai et du faux valeurs. 🎜

🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez des tests de bout en bout Si une partie de votre application peut être affectée par cette mise à niveau, les tests ayant échoué apparaîtront🎜🎜🎜🎜🎜

🎜Utilisez v-on pour surveiller les événements natifs ^Modifier🎜🎜🎜🎜Maintenant dans le composant L'utilisation de v-on n'écoutera que les événements personnalisés (événements déclenchés par le composant utilisant $emit). Si vous souhaitez écouter les événements natifs de l'élément racine, vous pouvez utiliser le modificateur .native, tel que : 🎜

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

🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜 dans la base de code pour tout savoir. Exemple d'utilisation de cette fonction hook. 🎜🎜

v-model^Supprimer avec debounce debounce 的 v-model^移除

Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。Vue 中v-model的 debounce 属性参数使得在一些简单情况下非常容易实现这种控制。但实际上，这是控制了状态更新的频率，而不是控制高耗时任务本身。这是个微小的差别，但是会随着应用增长而显现出局限性。

例如在设计一个搜索提示时的局限性：

使用 debounce 参数，便无法观察 “Typing” 的状态。因为无法对输入状态进行实时检测。然而，通过将 debounce 与 Vue 解耦，可以仅仅只延迟我们想要控制的操作，从而避开这些局限性：

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

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

这种方式的另外一个优点是：当包裹函数执行时间与延时时间相当时，将会等待较长时间。比如，当给出搜索建议时，要等待用户输入停止一段时间后才给出建议，这个体验非常差。其实，这时候更适合用 throttling 函数。因为现在你可以自由的使用类似 lodash 之类的库，所以很快就可以用 throttling 重构项目。

Upgrade Path

运行迁移工具使用 debounce 参数的 实例。

使用 lazy 或者 number 参数的 v-model 。^替换

lazy 和 number

Debouncing était autrefois utilisé pour contrôler les requêtes Ajax et autres Fréquence des demandes Tâches. Le paramètre d'attribut debounce de v-model dans Vue rend très facile la réalisation de ce contrôle dans certains cas simples. Mais en fait, il s'agit de contrôler la fréquence des

mises à jour du statut

, plutôt que de contrôler la tâche chronophage elle-même. Il s'agit d'une petite différence, mais elle deviendra limitante à mesure que votre application se développera. Exemples de limitations lors de la conception d'une invite de recherche :

En utilisant le paramètre debounce, vous ne pouvez pas observer l'état de "Typing". Parce que l'état de l'entrée ne peut pas être détecté en temps réel. Cependant, en découplant le debounce de Vue, nous ne pouvons que retarder les opérations que nous voulons contrôler, évitant ainsi ces limitations :

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

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

Un autre avantage de cette approche est que lors de l'encapsulation des fonctions, lorsque le temps d'exécution est égal au temps de retard, il attendra plus longtemps. Par exemple, lorsque vous donnez des suggestions de recherche, vous devez attendre que l'utilisateur arrête de saisir pendant un certain temps avant de donner les suggestions, ce qui est une très mauvaise expérience. En fait, il est plus approprié d'utiliser la fonction

throttling

à ce moment-là. Puisque vous avez désormais la liberté d'utiliser des bibliothèques comme lodash, vous pouvez rapidement refactoriser votre projet à l'aide de la limitation. 🎜🎜🎜🎜🎜Chemin de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜 en utilisant le paramètre debounce. 🎜🎜🎜🎜🎜

🎜🎜Utilisez v-model avec les paramètres lazy ou number. ^Remplacement 🎜🎜🎜🎜 Les paramètres lazy et number sont maintenant utilisés comme modificateurs pour que cela paraisse plus clair à la place de ceci : 🎜

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

🎜Maintenant, s'écrit comme ceci :🎜

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

🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜 pour trouver ces paramètres obsolètes. 🎜🎜

v-model utilisant la valeur en ligne ^Supprimervalue 的v-model ^移除

v-model 不再以内联 value 方式初始化的初值了，显然他将以实例的 data 相应的属性作为真正的初值。

这意味着以下元素：

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

在 data 选项中有下面写法的：

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

将渲染 model 为 ‘bar’ 而不是 ‘foo’ 。同样，对 <textarea> 已有的值来说：

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

必须保证 text 初值为 “hello world”

升级方式

升级后运行端对端测试，注意关于v-model内联参数的 console warnings

v-model with v-for Iterated Primitive Values ^移除

像这样的写法将失效：

// v-on:keyup.f1 不可用
Vue.config.keyCodes.f1 = 112

因为 <input> 将被编译成类似下面的 js 代码：

Todos
├─ NewTodoInput
└─ Todo
   └─ DeleteTodoButton

这样，v-model 的双向绑定在这里就失效了。把 str 赋值给迭代器里的另一个值也没有用，因为它仅仅是函数内部的一个变量。

替代方案是，你可以使用对象数组，这样v-model 就可以同步更新对象里面的字段了，例如：

// 将在各处使用该事件中心
// 组件通过它来通信
var eventHub = new Vue()

升级方式

运行测试，如果你的 app 有地方被这个更新影响到的话将会弹出failed tests提示。

带有 !important 的 v-bind:style ^移除

这样写将失效：

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

如果确实需要覆盖其它的 !important，最好用字符串形式去写：

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

升级方式

运行 迁移帮助工具。找到含有 !important

v-model n'initialise plus la valeur initiale de la manière value en ligne. Évidemment, il utilisera l'attribut correspondant des données de l'instance comme valeur initiale réelle.

🎜Cela signifie que l'élément suivant : 🎜

// 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
    })
  }
}

🎜avec ce qui suit dans l'option de données : 🎜

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

🎜 rendra le modèle sous la forme "bar" au lieu de "foo". De même, pour la valeur existante de <textarea> : 🎜

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

🎜doit s'assurer que la valeur initiale de text est "hello world"🎜

🎜🎜Méthode de mise à niveau 🎜 🎜Exécutez des tests de bout en bout après la mise à niveau, en faisant attention aux 🎜avertissements de la console concernant les paramètres en ligne du v-model🎜🎜🎜🎜🎜

🎜🎜v-model🎜🎜 avec v-for Valeurs primitives itérées ^Supprimer 🎜🎜Écrire comme ceci sera invalide : 🎜

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

🎜Parce que <input> sera compilé dans js similaire au suivant : 🎜

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

🎜De cette façon, la liaison bidirectionnelle de v-model n'est pas valide ici. Attribuer str à une autre valeur dans l'itérateur est inutile car il s'agit simplement d'une variable à l'intérieur de la fonction. 🎜🎜L'alternative est que vous pouvez utiliser un tableau d'objets pour que v-model puisse mettre à jour les champs de l'objet de manière synchrone, par exemple : 🎜

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

🎜🎜Méthode de mise à niveau🎜🎜Exécutez le test si Si une partie de votre application est affectée par cette mise à jour, une invite de tests ayant échoué apparaîtra. 🎜🎜🎜🎜🎜

🎜🎜v-bind:style avec !important ^{supprimer sup >🎜🎜Écrire comme ceci ne sera pas valide :🎜}

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

🎜Si vous avez vraiment besoin de couvrir d'autres !important, il est préférable de l'écrire sous forme de chaîne :🎜

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

🎜🎜Méthode de mise à niveau< /strong> 🎜🎜Exécutez l'outil d'aide à la migration. Recherchez l'objet de liaison de style contenant !important. 🎜🎜

v-el et v-refv-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="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

以前 v-el/v-ref 和 v-for 一起使用将产生一个 DOM 数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的ref：

<p v-for="user in filteredUsers">{{ 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来替代。例如：

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

现在应该写出这样：

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-else 以及 v-show

Pour plus de simplicité, v-el et v-ref Fusionné dans un attribut ref, qui peut être appelé via $refs dans l'instance du composant. Cela signifie que v-el:my-element sera écrit comme ceci : ref="myElement", et v-ref:my-component devient comme ceci : ref="myComponent". Lorsqu'il est lié à un élément général, ref fait référence à un élément DOM. Lorsqu'il est lié à un composant, ref est une instance de composant.

🎜Parce que v-ref n'est plus une directive mais un attribut spécial, il peut également être défini dynamiquement. Ceci est utile lorsqu'il est combiné avec v-for : 🎜

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

🎜Auparavant v-el/v-ref et Utilisé avec v -for produira un tableau DOM ou un tableau de composants, car il n'y a aucun moyen de donner à chaque élément un nom spécifique. Vous pouvez toujours faire cela et donner à chaque élément le même ref : 🎜

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

🎜Contrairement à 1.x, les $refs ne sont pas réactifs car ils sont enregistrés/mis à jour pendant le rendu. Seule l'écoute des modifications et le rendu répété peuvent les rendre réactifs. 🎜🎜D'un autre côté, $refs est principalement conçu pour être accessible par les programmes js, et il n'est pas recommandé de trop s'y fier dans les modèles. Parce que cela signifie accéder à l'état de l'instance en dehors de l'instance, ce qui va à l'encontre de la pensée basée sur les données de Vue. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour connaître le instance Le v-el et le v-ref . 🎜🎜🎜🎜🎜

v-showUtiliser v-else ^Supprimer🎜🎜v -else ne peut plus être utilisé après v-show. Veuillez utiliser v-show à la place dans la branche négative de v-if. Par exemple : 🎜

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

🎜 devrait maintenant être écrit comme ceci : 🎜

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

🎜Méthode de mise à niveau🎜🎜ExécuterL'outil de migration découvre si v-else et v-show existent dans l'instance. 🎜🎜

Directives personnalisées ^Simplifiées

---

Dans la nouvelle version, la portée d'utilisation des directives a été considérablement réduite : désormais, les directives ne sont utilisées que pour les opérations DOM de bas niveau. Dans la plupart des cas, il est préférable d'utiliser les composants comme couche d'abstraction pour la réutilisation du code.

Les changements significatifs sont les suivants :

• Les instructions n'ont plus d'instances. Cela signifie que vous n'avez plus d'instance de this dans la fonction hook de la directive. Au lieu de cela, vous pouvez accepter toutes les données dont vous avez besoin dans les paramètres. Si vous en avez vraiment besoin, vous pouvez accéder à l'instance via el. this 。替代的是，你可以在参数中接受你需要的任何数据。如果确实需要，可以通过 el 来访问实例。

• 类似 acceptStatement ，deep ，priority 等都已被弃用。为了替换双向指令，见 示例。

• 现在有些钩子的意义和以前不一样了，并且多了两个钩子函数。

幸运的是，新钩子更加简单，更加容易掌握。详见 自定义指令指南。

升级方式

运行迁移工具找出定义指令的地方。在 helper 工具会把这些地方标记出来，因为很有可能这些地方需要重构。

指令 .literalSimilaire à acceptStatement, deep, priority, etc. sont obsolètes. Pour remplacer la directive bidirectionnelle, voir l'exemple .

Maintenant, la signification de certains hooks est différente d'avant, et il existe deux autres fonctions de hook.

Heureusement, le nouveau crochet est plus simple et plus facile à maîtriser. Pour plus de détails, consultez le Guide des directives personnalisées

.

Méthode de mise à niveau

Exécutez l'

outil de migration pour savoir où la directive est définie. L'outil d'assistance marquera ces emplacements car il est probable que ces emplacements doivent être refactorisés.

🎜🎜

🎜Modificateur de directive .literal 🎜Supprimer🎜🎜🎜🎜🎜 Le littéral. Le modificateur a été supprimé et pour obtenir la même fonctionnalité, vous pouvez simplement fournir un modificateur de chaîne comme valeur. 🎜🎜Exemple, remplacez par : 🎜

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

🎜 Juste : 🎜

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

🎜🎜🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜 pour savoir où le modificateur `.literal` est utilisé dans l'instance. 🎜🎜

Transition

---

transition 参数 替换


Vue 的过渡系统有了彻底的改变，现在通过使用 <transition> 和 <transition-group> 来包裹元素实现过渡效果，而不再使用 transition 属性。详见 Transitions guide。

升级方式

运行迁移工具找到使用 transition 属性的地方。




可复用的过渡 Vue.transition 替换

在新的过渡系统中，可以通过模板复用过渡效果。

升级方式

运行迁移工具找到使用 transition 属性的地方。




过渡的 stagger 参数 移除

如果希望在列表渲染中使用渐近过渡，可以通过设置元素的 data-index (或类似属性) 来控制时间。请参考这个例子。

升级方式

运行迁移工具找到使用 transitiontransition

🎜 ^{Remplacement des paramètres}🎜🎜🎜🎜🎜Le système de transition de Vue a été complètement modifié, désormais grâce à l'utilisation de <transition> et <transition-group> ; pour envelopper les éléments afin d'obtenir des effets de transition, au lieu d'utiliser l'attribut transition. Consultez le Guide des transitions pour plus de détails. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Outil de migration pour trouver l'attribut transition lieu. 🎜🎜🎜🎜🎜

🎜Transition réutilisableVue.transition ^{remplacement🎜 🎜🎜🎜Dans le nouveau système de transition, vous pouvez réutiliser les effets de transition via des modèles . 🎜}

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Outil de migration pour trouver l'attribut transition lieu. 🎜🎜🎜🎜🎜

🎜Paramètre de transition stagger ^supprimé🎜 🎜🎜 🎜Si vous souhaitez utiliser une transition progressive dans le rendu de la liste, vous pouvez contrôler le timing en définissant le data-index de l'élément (ou un attribut similaire). Veuillez vous référer à cet exemple. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Outil de migration pour trouver l'attribut transition lieu. Lors d'une mise à niveau, vous pouvez effectuer une « transition » vers une nouvelle stratégie de transition. 🎜🎜

Événements

---

events 选项 移除

events 选项被弃用。事件处理器现在在 created 钩子中被注册。参考详细示例 $dispatch and $broadcast 迁移指南




Vue.directive('on').keyCodes 替换

新的简明配置 keyCodes 的方式是通过 Vue.config.keyCodes例如：

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

升级方式

运行迁移工具找到过时的 keyCodeévénements

🎜 option ^supprimer🎜🎜🎜🎜events est obsolète. Les gestionnaires d'événements sont désormais enregistrés dans le hook created. Reportez-vous à l'exemple détaillé$dispatch et $broadcast guide de migration 🎜🎜🎜🎜

🎜Vue.directive('on').keyCodes🎜🎜< /code >🎜 Remplacement🎜🎜🎜🎜La nouvelle façon concise de configurer les keyCodes passe par Vue. config. keyCodesPar exemple : 🎜

text.toUpperCase()

🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'Outil de migration pour trouver la configuration keyCode obsolète🎜🎜

$dispatch et $broadcast ^remplacement$dispatch 和 $broadcast ^替换

$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。

因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。

对于$dispatch 和 $broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。

这些方法的最常见用途之一是父子组件的相互通信。在这些情况下，你可以使用 v-on 监听子组件上 $emit 的变化。这可以允许你很方便的添加事件显性。

然而，如果是跨多层父子组件通信的话，$emit 并没有什么用。相反，用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利，即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例，实际上你可以使用一个空的 Vue 实例。

比如，假设我们有个 todo 的应用结构如下：

text.toLowerCase()

可以通过单独的事件中心管理组件间的通信：

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

然后在组件中，可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件：

'$' + price.toFixed(2)

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

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

在简单的情况下这样做可以替代 $dispatch 和 $broadcast，但是对于大多数复杂情况，更推荐使用一个专用的状态管理层如：Vuex。

升级方式

运行迁移工具找出使用 $dispatch 和 $broadcast

$dispatch et $broadcast Déjà obsolète. Veuillez utiliser une communication inter-composants plus concise et claire et de meilleures solutions de gestion de l'état, telles que : Vuex.

🎜Parce que la méthode de flux d'événements basée sur la structure arborescente des composants est vraiment difficile à comprendre et deviendra de plus en plus fragile à mesure que la structure des composants se développe. Cette méthode événementielle n’est vraiment pas bonne et nous ne voulons pas causer trop de problèmes aux développeurs à l’avenir. Et $dispatch et $broadcast ne résolvent pas le problème de communication entre les composants frères. 🎜🎜Le moyen le plus simple de mettre à niveau $dispatch et $broadcast est d'utiliser des centres d'événements pour permettre aux composants de communiquer librement, quelle que soit la couche dans laquelle ils se trouvent dans l'arborescence des composants. Étant donné que les instances Vue implémentent une interface de répartition d'événements, vous pouvez y parvenir en instanciant une instance Vue vide. 🎜🎜L'une des utilisations les plus courantes de ces méthodes consiste à permettre aux composants parent-enfant de communiquer entre eux. Dans ces cas, vous pouvez utiliser v-on pour écouter l'enfant composant Modifications dans $emit. Cela vous permet d’ajouter facilement une visibilité aux événements. 🎜🎜Cependant, si vous communiquez sur plusieurs couches de composants parent-enfant, $emit ne sert à rien. En revanche, l’utilisation d’un middleware d’événements centralisé permet des mises à niveau simples. Cela rend la communication entre les composants très fluide, même s'ils sont frères et sœurs. Étant donné que Vue exécute des instances via l'interface de l'émetteur d'événements, vous pouvez réellement utiliser une instance Vue vide. 🎜🎜Par exemple, supposons que nous ayons une structure d'application todo comme suit : 🎜

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

🎜 Vous pouvez gérer la communication entre les composants via un centre d'événements séparé : 🎜

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

🎜 Ensuite, dans le composant, vous pouvez utiliser $emit , < code>$on, $off sont utilisés respectivement pour distribuer, surveiller et annuler les événements d'écoute : 🎜

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

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

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

🎜Dans les cas simples, cela peut remplacer $dispatch et $broadcast, mais pour les situations les plus complexes, il est recommandé d'utiliser une couche de gestion d'état dédiée telle que : Vuex. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour découvrir comment pour utiliser < Instances of code>$dispatch et $broadcast. 🎜🎜

Filtres

---

Filtres en dehors du texte inséré^Supprimé

Les filtres ne peuvent désormais être utilisés qu'à l'intérieur du texte inséré ({{ } Mots clés). Nous avons constaté que l'utilisation de filtres dans les directives (par exemple v-model, v-on, etc.) rendait les choses plus compliquées. Pour les filtres de liste comme v-for, il est préférable de mettre la logique de traitement dans js en tant que propriété calculée afin qu'elle puisse être réutilisée dans tout le modèle. {{ }} tags)。我们发现在指令 (如：v-model，v-on等) 中使用过滤器使事情变得更复杂。像 v-for 这样的列表过滤器最好把处理逻辑作为一个计算属性放在 js 里面，这样就可以在整个模板中复用。

总之，能在原生 js 中实现的东西，我们尽量避免引入一个新的符号去重复处理同样的问题。下面是如何替换 Vue 内置过滤器：

替换 debounce 过滤器

不再这样写

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

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

请使用 lodash’s debounce (也有可能是 throttle) 来直接控制高耗任务。可以这样来实现上面的功能：

myElement.appendChild(vm.$el)

myElement.parentNode.insertBefore(vm.$el, myElement)

这种写法的更多优点详见：v-model 示例。

替换 limitBy 过滤器

不再这样写：

myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)

在 computed 属性中使用 js 内置方法：.slice method：

myElement.parentNode.appendChild(vm.$el)

vm.$el.remove()

替换 filterBy 过滤器

不再这样写：

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

在 computed 属性中使用 js 内置方法 .filter method：

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

rrreee

js 原生的 .filter 同样能实现很多复杂的过滤器操作，因为可以在计算 computed 属性中使用所有 js 方法。比如，想要通过匹配用户名字和电子邮箱地址 (不区分大小写) 找到用户：

rrreee

替换 orderBy 过滤器

不这样写：

rrreee

而是在 computed 属性中使用 lodash’s orderBy (或者可能是 sortByEn bref, pour les choses qui peuvent être implémentées en js natif, nous essayons d'éviter d'introduire un nouveau symbole pour traiter à plusieurs reprises le même problème. Voici comment remplacer les filtres intégrés de Vue :

Remplacez le filtre anti-rebond N'est plus écrit comme ça

rrreeerrreee

Veuillez utiliser le debounce de Lodash (peut aussi être throttle) pour contrôler directement les tâches les plus gourmandes. La fonction ci-dessus peut être implémentée comme ceci : rrreeerrreeePour plus d'avantages de cette méthode d'écriture, voir : exemple v-model.

🎜🎜🎜🎜Remplacez le filtre limitBy 🎜🎜🎜N'écrivez plus comme ceci : 🎜rrreee🎜Utilisez la méthode intégrée js dans l'attribut calculé : .slice🎜 : 🎜rrreeerrreee🎜🎜🎜🎜🎜remplacement filterBy Le filtre 🎜🎜🎜 n'est plus écrit comme ceci : 🎜rrreee🎜Utilisez la méthode intégrée js dans l'attribut calculé .filter méthode🎜：🎜rrreeerrreee🎜js natif .filter peut également réaliser de nombreuses opérations de filtrage complexes car toutes les méthodes js peuvent être utilisées dans les propriétés calculées. Par exemple, pour rechercher des utilisateurs en faisant correspondre leurs noms et adresses e-mail (insensible à la casse) : 🎜rrreee🎜🎜🎜🎜🎜Remplacez le filtre orderBy 🎜🎜🎜 au lieu d'écrire : 🎜rrreee🎜 c'est utiliser le orderBy🎜 de lodash dans l'attribut calculé (ou peut-être sortBy🎜) : 🎜rrreeerrreee🎜Tri des champs pairs :🎜rrreee🎜🎜🎜🎜Mise à niveau 🎜🎜🎜 🎜exécutez l'🎜Migration Tool🎜 pour trouver le filtre utilisé dans la directive. Si certains ne sont pas trouvés, jetez un œil au 🎜message d'erreur de la console🎜. 🎜🎜

Notation des paramètres de filtre^change

Maintenant, le formulaire de paramètre de filtre peut être mieux cohérent avec la méthode d'appel de la fonction js, il n'est donc pas nécessaire de séparer les paramètres par des espaces :

rrreee

Maintenant inclus entre parenthèses Et séparés par des virgules :

rrreee

Méthode de mise à niveau

Exécutez l'outil de migration pour trouver les anciens symboles d'appel. S'il en manque, veuillez consulter le message d'erreur de la console.

Filtres de texte intégrés ^Supprimé

Tous les filtres intégrés ont été supprimés, bien que les filtres insérés dans le texte soient toujours valides. Il est plutôt recommandé d’utiliser des bibliothèques plus spécialisées pour chaque domaine. (Par exemple, utilisez date-fnsdate-fns 来格式化日期，用 accounting 来格式化货币)。

对于每个内置过滤器，我们大概总结了下该怎么替换。代码示例可能写在自定义 helper 函数，方法或计算属性中。

替换 json 过滤器

不用一个个改，因为 Vue 已经帮你自动格式化好了，无论是字符串，数字还是数组，对象。如果想用 js 的 JSON.stringify 功能去实现，你也可以把它写在方法或者计算属性里面。

替换 capitalize 过滤器

rrreee

替换 uppercase 过滤器

rrreee

替换 lowercase 过滤器

rrreee

替换 pluralize 过滤器

NPM 上的 pluralize 库可以很好的实现这个功能。如果仅仅想将特定的词格式化成复数形式或者想给特定的值 (‘0’) 指定特定的输出，也可以很容易地自定义复数格式化过滤器：

rrreee

Replacing the currency Filter

对于简单的问题，可以这样做：

rrreee

大多数情况下，仍然会有奇怪的现象 (比如 0.035.toFixed(2) 向上取舍得到 0.04，但是 0.045 向下取舍却也得到 0.04)。解决这些问题可以使用 accounting pour formater les dates, utilisez comptabilité pour formater la devise).

Pour chaque filtre intégré, nous résumons grossièrement comment le remplacer. Les exemples de code peuvent être écrits dans des fonctions d'assistance personnalisées, des méthodes ou des propriétés calculées.

Remplacez le filtre json

Vous n'avez pas besoin de le changer un par un, car Vue l'a automatiquement formaté pour vous, qu'il s'agisse d'une chaîne, d'un nombre, un tableau ou un objet. Si vous souhaitez utiliser la fonction JSON.stringify de js pour l'implémenter, vous pouvez également l'écrire dans une méthode ou un attribut calculé.

🎜🎜remplace le filtre majuscule 🎜🎜rrreee🎜🎜🎜🎜🎜remplace le filtre majuscule 🎜🎜rrreee🎜🎜🎜🎜🎜remplace minuscule< /code> filtre 🎜🎜rrreee🎜🎜🎜🎜🎜remplace le filtre pluralize 🎜🎜🎜pluralize🎜 peut très bien implémenter cette fonction. Si vous souhaitez simplement formater des mots spécifiques au pluriel ou si vous souhaitez spécifier une sortie spécifique pour une valeur spécifique (« 0 »), vous pouvez également facilement personnaliser le filtre de formatage pluriel : 🎜rrreee🎜🎜🎜🎜🎜Remplacer le < code> change Filter🎜🎜🎜Pour des problèmes simples, vous pouvez faire ceci :🎜rrreee🎜Dans la plupart des cas, il y aura toujours des phénomènes étranges (tels que 0.035.toFixed(2) Up Arrondi donne 0,04, mais l'arrondi vers le bas donne également 0,045). Pour résoudre ces problèmes, vous pouvez utiliser la bibliothèque accounting🎜 pour obtenir une devise plus fiable. mise en page . 🎜🎜🎜🎜🎜Comment mettre à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜 pour trouver les filtres supprimés. S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜

Filtre bidirectionnel ^Remplacement

Certains utilisateurs ont apprécié utiliser des filtres bidirectionnels via v-model pour créer des entrées intéressantes avec très peu de code. Bien que simples en apparence, les filtres bidirectionnels peuvent cacher d’énormes complexités, allant même jusqu’à ralentir les mises à jour de statut et à avoir un impact sur l’expérience utilisateur. Il est recommandé d'utiliser plutôt un composant qui encapsule une entrée, vous permettant de créer des entrées personnalisées de manière plus explicite et plus riche en fonctionnalités. v-model 使用双向过滤器，以很少的代码创建有趣的输入。尽管表面上很简单，双向过滤器也会暗藏一些巨大的复杂性——甚至促使状态更新变得迟钝影响用户体验。推荐用包裹一个输入的组件取而代之，这样以更显性且功能更丰富的方式创建自定义的输入。

我们现在做一次双向汇率过滤器的迁移作为示范：

它基本工作良好，但是拖延的状态更新会导致奇怪的行为。比如，点击 Result 标签，试着在其中一个输入框中输入 9.999。当输入框失去焦点的时候，其值将会更新到 .00。然而当我们从整个计算器的角度看时，你会发现存储的数据是 9.999。用户看到的已经不是真实的同步了！

为了过渡到一个更加健壮的 Vue 2.0 的方案，让我们首先在一个新的 <currency-input> 组件中包裹这个过滤器：

它允许我们添加独立过滤器无法封装的行为，比如选择输入框聚焦的内容。下一步我们从过滤器中提取业务逻辑。接下来是我们把所有的东西放到一个外部的 currencyValidatorNous effectuons actuellement une migration bidirectionnelle du filtre de taux de change à titre de démonstration :

Cela fonctionne fondamentalement bien, mais les mises à jour de statut retardées peuvent provoquer un comportement étrange. Par exemple, cliquez sur la balise Result et essayez de saisir 9.999 dans l'une des zones de saisie. Lorsque la zone de saisie perd le focus, sa valeur sera mise à jour à $10,00. Cependant, lorsque nous examinons l'ensemble de la calculatrice, vous constaterez que les données stockées sont 9,999. Ce que les utilisateurs voient n’est plus une véritable synchronisation !

Pour passer à une solution Vue 2.0 plus robuste, enveloppons d'abord ce filtre dans un nouveau composant <currency-input> :

• Utilisez-le dans d'autres parties de votre application, telles que valider un chargement côté API 🎜🎜🎜🎜Après avoir extrait ce validateur, nous pouvons également l'intégrer plus confortablement dans une solution plus robuste. Ces états étranges sont également éliminés et les utilisateurs ne sont plus susceptibles de saisir des erreurs, tout comme la zone de saisie de numéro native du navigateur. 🎜🎜Cependant, dans les filtres Vue 1.0, nous sommes encore limités, alors passons complètement à Vue 2.0 : 🎜🎜🎜🎜🎜🎜Vous avez peut-être remarqué : 🎜

  • Chaque aspect de notre zone de saisie est plus explicite, en utilisant des hooks de cycle de vie et des événements DOM pour remplacer le comportement caché des filtres bidirectionnels.

  • Nous pouvons désormais utiliser v-model directement dans la zone de saisie personnalisée. Il n'est pas seulement utilisé avec les zones de saisie normales, mais signifie également que nos composants sont compatibles avec Vuex. v-model，其不只是固定配合正常的输入框来使用，这也意味着我们的组件是对 Vuex 友好的。

  • 因为我们已经不再要求过滤器选项必须要有一个返回值，所以实际上我们的汇率工作可以异步完成。这意味着如果我们有很多应用需要和汇率打交道，我们可以轻松的提炼这个逻辑并成为一个共享的微服务。

  升级方式

  运行迁移工具找到在例如 v-model 的指令中使用过滤器的例子。如果你错过了，则应该会收到命令行报错。

  
  

  插槽

  ---

  
  

  重名的插槽 ^移除
  

  同一模板中的重名 <slot> 已经弃用。当一个插槽已经被渲染过了，那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一内容，可以用 prop 来传递。

  升级方式

  更新后运行测试，查看控制台警告信息 关于重名 slots 的提示 v-model。

  
  

  slot 样式参数 ^移除

  通过具名 <slot> 插入的片段不再保持 slot 的参数。请用一个包裹元素来控制样式。或者用更高级方法：通过编程方式修改内容 ：render functions。

  升级方式

  运行迁移工具找到选择 slots 标签 CSS 选择器 (例如：[slot="my-slot-name"]

  🎜Parce que nous n'avons plus besoin d'options de filtrage pour avoir une valeur de retour, notre travail sur les taux de change peut en fait être effectué de manière asynchrone. Cela signifie que si nous disposons de nombreuses applications traitant des taux de change, nous pouvons facilement affiner cette logique et en faire un microservice partagé. 🎜🎜

🎜Méthode de mise à niveau🎜🎜Exécutez l'Outil de migrationTrouvez des exemples d'utilisation de filtres dans des directives telles que v-model. Si vous le manquez, vous devriez obtenir une erreur de ligne de commande. 🎜🎜🎜
🎜

emplacement

---

🎜
🎜

Emplacement du même nom^Supprimer
🎜🎜Les noms en double dans le même modèle <slot> sont obsolètes. Une fois qu'un emplacement a été rendu, il ne peut pas être restitué ailleurs dans le même modèle. Si vous souhaitez restituer le même contenu à différents emplacements, vous pouvez utiliser prop pour le transmettre. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez le test après la mise à jour et consultez le message d'avertissement de la console pour obtenir des conseils sur les emplacements v-model dont le nom est en double. 🎜🎜🎜
🎜

emplacement Paramètre de style Supprimer🎜🎜En nommant <slot> Les fragments insérés ne conservent plus les paramètres du slot. Veuillez utiliser un élément d'habillage pour contrôler le style. Ou adoptez une approche plus avancée : modifiez le contenu par programmation : fonctions de rendu. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour rechercher et sélectionner le sélecteur CSS de balise slots (par exemple : [slot="my-slot-name"]). 🎜🎜

Propriétés spéciales

---

keep-alive 属性 替换


keep-alive 不再是一个特殊属性而是一个包裹组件，类似于 <transition>比如：

rrreee

这样可以在含多种状态子组件中使用 <keep-alive> ：

rrreee

当 <keep-alive> 含有不同子组件时，应该分别影响到每一个子组件。不仅是第一个而是所有的子组件都将被忽略。

和 <transition>一起使用时，确保把内容包裹在内：

rrreee

升级方式

运行迁移工具找到keep-alive 属性。

计算插值

---

属性内部的计算插值 ^移除

属性内部的计算插值已经不能再使用了：

rrreee

应该写成行内表达式：

rrreee

或者计算属性：

rrreeerrreee

升级方式

运行迁移工具找到属性内部的计算插值

HTML 计算插值 ^移除

HTML 的计算插值 ({{{ foo }}}) 已经移除，取代的是 v-htmlkeep-alive

l'attribut ^remplacement

keep-alive n'est plus un attribut spécial mais un composant encapsulé, similaire à <transition> ; Par exemple :

rrreee

Ceci peut être utilisé dans des sous-composants avec plusieurs états <keep-alive> : rrreee

Quand <keep-alive> ;< /code> Lorsqu'il contient différents sous-composants, il doit affecter chaque sous-composant séparément. Non seulement le premier, mais tous les composants enfants seront ignorés.

Lorsqu'il est utilisé avec <transition>, assurez-vous d'emballer le contenu : 🎜rrreee🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜Trouver attribut keep-alive. 🎜🎜🎜🎜🎜

🎜🎜Interpolation calculée🎜🎜🎜🎜🎜🎜🎜

🎜 Interpolation calculée au sein des attributs ^Supprimé 🎜🎜🎜🎜🎜 L'interpolation calculée au sein des attributs ne peut plus être utilisée : 🎜rrreee🎜 doit être écrit sous la forme d'une expression en ligne : 🎜rrreee🎜 ou d'un attribut calculé : 🎜rrreeerrreee🎜 🎜 🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜pour trouver l'interpolation calculée à l'intérieur de l'attribut🎜🎜🎜🎜🎜

🎜 Interpolation informatique HTML ^Supprimée🎜🎜🎜🎜Interpolation informatique HTML ({{{ foo }}}) a été supprimée et remplacée par v-html commande 🎜. 🎜🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜pour trouver l'interpolation de calcul HTML. 🎜🎜

Single Binding^Replaced

Single Binding ({{* foo }}) a été remplacé par le nouveau v-once{{* foo }}) 已经被新的 v-once directive 取代。

升级方式

运行迁移工具找到单次绑定使用位置。

响应

---

vm.$watch ^changed

通过 vm.$watch创建的观察器现在将在组件渲染时被激活。这样可以让你在组件渲染前更新状态，不用做不必要的更新。比如可以通过观察组件的 prop 变化来更新组件本身的值。

如果以前通过 vm.$watch 在组件更新后与 DOM 交互，现在就可以通过updated生命周期钩子来做这些。

升级方式

运行测试，如果有依赖于老方法的观察器将弹出 failed tests。

vm.$set ^变更

vm.$set 只是 Vue.set 的别名。

升级方式

运行迁移工具找到过时的用法

vm.$delete ^变更

vm.$delete 现在只是：Vue.delete remplacée.

Méthode de mise à niveau

Exécutez l'

outil de migration pour trouver l'emplacement d'utilisation de liaison unique.

🎜🎜

🎜response🎜🎜

---

🎜🎜🎜

🎜🎜vm.$watch🎜🎜🎜🎜 🎜changé🎜🎜🎜🎜🎜Les observateurs créés via vm.$watch seront désormais activés lors du rendu du composant. Cela vous permet de mettre à jour l'état avant le rendu du composant sans effectuer de mises à jour inutiles. Par exemple, vous pouvez mettre à jour la valeur du composant lui-même en observant les modifications apportées aux accessoires du composant. 🎜🎜Si vous avez déjà interagi avec le DOM après les mises à jour des composants via vm.$watch, vous pouvez désormais le faire via le hook de cycle de vie mis à jour. 🎜🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez des tests, s'il y a des observateurs qui s'appuient sur l'ancienne méthode, les tests ayant échoué apparaîtront. 🎜🎜🎜🎜🎜

🎜🎜vm.$set🎜🎜🎜🎜 🎜Change🎜🎜🎜🎜🎜vm.$set Juste un alias pour Vue.set🎜. 🎜🎜🎜🎜🎜Méthode de mise à niveau🎜🎜🎜🎜Exécutez l'🎜outil de migration🎜Recherchez les utilisations obsolètes🎜🎜🎜🎜🎜

🎜🎜vm.$delete🎜🎜🎜🎜 🎜Changes🎜🎜🎜🎜🎜vm.$delete est désormais simplement : Vue.delete🎜 Alias. 🎜🎜🎜🎜🎜Comment mettre à niveau🎜🎜🎜🎜Exécutez l'outil de migration 🎜Recherchez une utilisation obsolète🎜🎜

Array.prototype.$set ^Obsolète

Utilisez plutôt Vue.setVue.set 替代

升级方式

运行迁移工具找到数组上的.$set。如有遗漏请参考控制台错误信息。

Array.prototype.$remove ^移除

用 Array.prototype.splice 替代，例如：

rrreee

或者更好的方法，直接给除去的方法一个 index 参数：

rrreee

升级方式

运行迁移工具找到数组上的.$remove。如有遗漏请参考控制台错误信息。

Vue 实例上的Vue.set 和 Vue.delete^移除

Vue.set 和 Vue.delete 在实例上将不再起作用。现在都强制在实例的 data 选项中声明所有顶级响应值。如果删除实例属性或实例$data上的某个值，直接将它设置为 null 即可。

升级方式

运行迁移工具找到实例中的 Vue.set 或 Vue.delete 。如有遗漏请参考控制台错误信息。

替换 vm.$data ^移除

现在禁止替换实例的 $data。这样防止了响应系统的一些极端情况并且让组件状态更加可控可预测 (特别是对于存在类型检查的系统)。

升级方式

运行迁移工具找到覆盖 vm.$data

Méthode de mise à niveau

🎜🎜Exécuter Migration Tool trouve .$set sur le tableau. S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜🎜🎜🎜

🎜🎜Array.prototype.$remove🎜🎜🎜🎜 🎜Supprimer🎜🎜🎜🎜🎜 avec Array . prototype.splice, par exemple : 🎜rrreee🎜 Ou mieux encore, donnez directement à la méthode supprimée un paramètre d'index : 🎜rrreee

🎜🎜Méthode de mise à niveau🎜🎜🎜🎜ExécuterOutil de migration trouvé .$remove sur la baie. S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜🎜🎜🎜

🎜🎜Vue.set et Vue.delete🎜Remove🎜🎜🎜 sur l'instance Vue 🎜 🎜Vue.set et Vue.delete ne fonctionneront plus sur les instances. Il est désormais obligatoire de déclarer toutes les valeurs de réponse de niveau supérieur dans l'option data de l'instance. Si vous supprimez une propriété d'instance ou une valeur sur l'instance $data, définissez-la simplement sur null. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Outil de migration pour trouver Vue.set ou Vue.delete . S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜🎜🎜🎜

🎜🎜remplacement de vm.$data 🎜suppression🎜🎜🎜🎜🎜le remplacement des $data de l'instance est désormais interdit. Cela empêche le système de réponse de certains cas extrêmes et rend l'état du composant plus contrôlable et prévisible (en particulier pour les systèmes avec vérification de type). 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Outil de migration pour trouver la couverture vm.$data< /code > emplacement. S'il manque quelque chose, veuillez vous référer au 🎜Message d'avertissement de la console🎜. 🎜🎜

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 ^Supprimer

🎜 peut récupérer directement les données de réponse. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜Exécutez l'Outil de migration pour trouver vm.$get < /code> emplacement. S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜🎜🎜🎜

🎜Méthodes d'instance autour de DOM🎜

---

🎜🎜🎜 < p id="vm-$appendTo">🎜vm.$appendTo🎜🎜 ^Supprimer🎜🎜🎜🎜Utiliser la méthode native DOM : 🎜rrreee

🎜🎜Méthode de mise à niveau🎜🎜🎜Exécutez L'outil de migration trouve l'emplacement de vm.$appendTo. S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜🎜🎜🎜

🎜vm.$before🎜🎜 ^Supprimer🎜🎜🎜Utiliser la méthode native DOM : 🎜rrreee

🎜🎜Méthode de mise à niveau🎜🎜🎜Exécutez Outil de migration trouvé vm.$before. S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜🎜🎜🎜

🎜vm.$after🎜🎜 ^Remove🎜🎜🎜Utilisez la méthode native DOM : 🎜rrreee🎜Si myElement est le dernier nœud, vous pouvez également écrire comme ceci : 🎜rrreee< div style ="margin-top: 2em;padding: 2em;background: rgba(73,195,140,0.1);border-radius: 2px;">🎜🎜Méthode de mise à niveau🎜< /span >🎜🎜Exécutez l'Outil de migration pour trouver vm.$after Localisation. S'il manque quelque chose, veuillez vous référer au 🎜Message d'erreur de la console🎜. 🎜🎜




vm.$remove Supprimervm.$remove 移除

使用 DOM 原生方法：

rrreee

升级方式

运行迁移工具找到vm.$remove。如有遗漏，请参考 控制台错误信息。

底层实例方法

---

vm.$eval ^移除

尽量不要使用，如果必须使用该功能并且不肯定如何使用请参考 the forum。

升级方式

运行迁移工具找到使用 vm.$eval 的位置。如有遗漏请参考 控制台错误信息。

vm.$interpolate ^移除

尽量不要使用，如果必须使用该功能并且不肯定如何使用请参考 the forum。

升级方式

运行迁移工具找到vm.$interpolate。如有遗漏请参考 控制台错误信息。

vm.$log ^移除

请使用 Vue Devtools 感受最佳 debug 体验。

升级方式

运行迁移工具找到 vm.$log

Utiliser la méthode native DOM :

rrreee

🎜Méthode de mise à niveau🎜🎜ExécuterOutil de migration Recherchez vm.$remove. S'il manque quelque chose, veuillez vous référer aux Messages d'erreur de la console. 🎜🎜🎜🎜🎜

Méthode d'instance sous-jacente

---

🎜🎜🎜

vm.$eval ^Supprimer🎜🎜Essayez de ne pas l'utiliser, si vous devez utiliser cette fonction et que vous ne l'êtes pas savez comment l'utiliser. Veuillez vous référer au le forum. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour rechercher et utiliser vm.$eval. S'il manque quelque chose, veuillez vous référer aux Messages d'erreur de la console. 🎜🎜🎜🎜🎜

vm.$interpolate ^Supprimer🎜🎜Essayez de ne pas l'utiliser, si vous devez utiliser cette fonction et que vous ne l'êtes pas savez comment l'utiliser. Veuillez vous référer au le forum. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour trouver le vm.$interpolate. S'il manque quelque chose, veuillez vous référer aux Messages d'erreur de la console. 🎜🎜🎜🎜🎜

vm.$log ^Supprimer🎜🎜Veuillez utiliser Vue Devtools Vivez la meilleure expérience de débogage. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour trouver le vm.$log. S'il manque quelque chose, veuillez vous référer au message d'erreur de la console. 🎜🎜

Options DOM d'instance

---

replace: false 移除


现在组件总是会替换掉他们被绑定的元素。为了模仿replace: false的行为，可以用一个和将要替换元素类似的元素将根组件包裹起来：

rrreee

或者使用渲染函数：

rrreee

升级方式

运行迁移工具找到 replace: false 使用的位置。

全局配置

---

Vue.config.debug ^移除

不再需要，因为警告信息将默认在堆栈信息里输出。

升级方式

运行迁移工具找到包含Vue.config.debug的地方。

Vue.config.async ^移除

异步操作现在需要渲染性能的支持。

升级方式

运行迁移工具找到使用 Vue.config.async 的实例。

Vue.config.delimiters ^替换

以模板选项的方式使用。这样可以在使用自定义分隔符时避免影响第三方模板。

升级方式

运行迁移工具找到使用 Vue.config.delimitersremplacer: false

🎜 ^Supprimer🎜🎜🎜🎜🎜Désormais, les composants remplaceront toujours l'élément auquel ils sont liés. Pour imiter le comportement de replace: false, vous pouvez envelopper le composant racine avec un élément similaire à l'élément à remplacer : 🎜rrreee🎜 ou utiliser une fonction de rendu : 🎜rrreee

🎜🎜Méthode de mise à niveau🎜🎜🎜🎜ExécuterOutil de migration Recherchez l'emplacement où replace: false est utilisé. 🎜🎜🎜🎜🎜

🎜🎜Configuration globale🎜🎜🎜🎜🎜🎜🎜

🎜Vue.config.debug🎜🎜🎜 ^Supprimer🎜🎜🎜🎜🎜Plus nécessaire en raison d'informations d'avertissement sera affiché dans le message de la pile par défaut. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Migration Tool pour trouver le fichier contenant Vue.config. lieu de débogage. 🎜🎜🎜🎜🎜

🎜Vue.config.async🎜🎜🎜 ^Supprimé🎜🎜🎜🎜Les opérations asynchrones nécessitent désormais la prise en charge des performances de rendu. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Outil de migration pour rechercher et utiliser Vue.config.async instance. 🎜🎜🎜🎜🎜

🎜Vue.config.delimiters🎜🎜🎜 ^Remplacer🎜🎜🎜🎜 par Utilisez les options du modèle. Cela évite d'affecter les modèles tiers lors de l'utilisation de séparateurs personnalisés. 🎜

🎜🎜Méthode de mise à niveau 🎜🎜🎜🎜Exécutez l'Outil de migration pour rechercher et utiliser Vue.config.delimiters instance. 🎜🎜

Vue.config.unsafeDelimiters ^SupprimerVue.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.elementDirective

Interpolation HTML avec v-html.

🎜 Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour trouver le Vue.config.unsafeDelimiters. L'outil d'assistance trouvera alors également des instances d'insertion HTML, qui peuvent être remplacées par « v-html ». 🎜🎜🎜🎜🎜

API globale

---

🎜 🎜🎜

Vue.extend avec el ^Supprimer L'option 🎜🎜🎜el n'est plus utilisée dans Vue.extend. Disponible uniquement dans les paramètres de création d'instance. 🎜

🎜 Méthode de mise à niveau🎜🎜Exécutez le test après la mise à jour. Recherchez dans le Message d'avertissement de la console à propos de el avec Vue.extend. code>code>. 🎜🎜🎜🎜🎜

Vue.elementDirective< span style="font-size: 18px;"> ^Supprimer🎜🎜Remplacer par des composants🎜

🎜Méthode de mise à niveau🎜🎜 Exécutez le Outil de migration pour trouver l'instance contenant Vue.elementDirective. 🎜🎜

Vue.partial ^SuppriméVue.partial ^移除

Partials 已被移除，取而代之的是更明确的组件之间的数据流–props。除非你正在使用一个部分性能关键型区域，否则建议只使用一个 normal component 来代替。如果你是动态绑定部分的 name，您可以使用 dynamic component。

如果你碰巧在你的应用程序的性能关键部分使用 partials，那么你应该升级到函数式组件。它们必须在纯 JS / JSX 文件中 (而不是在 .vue 文件中)，并且是无状态的和无实例的，就像 partials。这使得渲染极快。

函数式组件相对于 partials 一个好处是它们可以更具动态性，因为它们允许您访问 JavaScript 的全部功能。然而，这是有成本的。如果你从来没有使用过渲染式的组件框架，你可能需要花费更长的时间来学习它们。

升级方式

运行迁移工具找到包含 Vue.partial

Les partiels ont été supprimés et remplacés par un flux de données plus explicite entre les composants – les accessoires. Sauf si vous utilisez une zone partiellement critique en termes de performances, il est recommandé d'utiliser simplement un composant normal à la place. Si vous liez dynamiquement la partie name, vous pouvez utiliser le composant dynamique.

Si vous utilisez des partiels dans des parties critiques en termes de performances de votre application, vous devez alors passer à Composants fonctionnels. Ils doivent être dans des fichiers JS/JSX purs (pas dans des fichiers .vue) et être sans état et sans instance, tout comme les partiels. Cela rend le rendu extrêmement rapide.

L'un des avantages des composants fonctionnels par rapport aux partiels est qu'ils peuvent être plus dynamiques car ils vous permettent d'accéder à toute la puissance de JavaScript. Cependant, cela a un coût. Si vous n'avez jamais utilisé de framework de composants rendus, cela peut vous prendre plus de temps pour les apprendre.

Méthode de mise à niveau🎜🎜Exécutez l'Outil de migration pour trouver le < code >Instance de Vue.partial🎜🎜🎜🎜🎜🎜 🎜

Migration depuis Vue Router 0.7.x →

soumettre

Site Web PHP chinois

MaisonCoursArticleQuestions et réponsesDictionnaireManuelTéléchargerrecherche APPTélécharger