Berhijrah dari Vue 1.x

v-for< /h2>

---

🎜🎜🎜

v-for Susunan parameter ^{diubah apabila merentasi tatasusunan}🎜🎜🎜Apabila mengandungi indeks , susunan parameter semasa melintasi tatasusunan ialah (index, value). Ini kini (nilai, indeks), agar selaras dengan kaedah tatasusunan asli JavaScript (seperti forEach dan map). 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan alat migrasi dalam pangkalan kod untuk mencari contoh yang menggunakan susunan hujah lama. Ambil perhatian bahawa jika anda menamakan parameter indeks anda sesuatu yang luar biasa (seperti position atau num), alat migrasi tidak akan menandainya keluar. 🎜🎜

v-forTertib parameter semasa melintasi objek^Tukarv-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

Apabila nama/kunci sifat disertakan, susunan parameter sebelumnya untuk melintasi objek ialah ( nama, nilai ). Kini (nilai, nama), agar selaras dengan lelaran objek biasa (cth. lodash).

🎜 Kaedah naik taraf🎜🎜Jalankan alat migrasi dalam pangkalan kod untuk mencari contoh yang menggunakan susunan hujah lama. Harap maklum bahawa jika anda menamakan parameter utama anda sesuatu yang luar biasa (seperti nama atau property), alat migrasi tidak akan menandakannya. 🎜🎜🎜🎜🎜

$index dan $key ^Remove🎜🎜telah mengalih keluar $index dan $key adalah pembolehubah yang diisytiharkan secara tersirat untuk definisi eksplisit dalam v-for. Ini membolehkan pembangun tanpa banyak pengalaman pembangunan Vue untuk membaca kod dengan lebih baik dan juga menghasilkan tingkah laku yang lebih bersih apabila berurusan dengan gelung bersarang. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan alat migrasi dalam pangkalan kod untuk mencari contoh penggunaan pembolehubah yang dialih keluar ini. Jika anda tidak menjumpainya, anda juga boleh mencarinya dalam Ralat konsol (contohnya, Uncaught ReferenceError: $index is not definition). 🎜🎜🎜🎜🎜

track-by< span style="font-size: 18px;"> ^penggantian🎜🎜track-by telah digantikan dengan kunci , ia berfungsi seperti sifat lain, tanpa awalan v-bind atau :, ia akan dianggap sebagai rentetan. Dalam kebanyakan kes, anda perlu menggantikan kekunci statik dengan pengikatan dinamik dengan ungkapan penuh. Contohnya, untuk menggantikan: 🎜

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

🎜 anda kini perlu menulis: 🎜

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

🎜< span style="font-size: 16px;">Kaedah naik taraf🎜🎜Jalankan dalam pangkalan kod Alat Migrasi untuk mencari contoh yang menggunakan track-by. 🎜🎜

v-for Nilai julat ^tukarv-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

sebelum ini, nombor v-for="number in 10" > Ia bermula pada 0 dan berakhir pada 9, kini ia bermula pada 1 dan berakhir pada 10.

🎜 Kaedah naik taraf🎜🎜Gunakan /w+ biasa dalam carian d+/ dalam pangkalan kod. Apabila terdapat dalam v-for , sila semak untuk melihat sama ada ia terjejas. 🎜🎜🎜🎜🎜

Props

---

🎜🎜🎜< p id="coerce-prop">paksaan Parameter prop ^{alih keluar}🎜🎜Jika anda perlu menyemak nilai prop, buat nilai pengiraan dalaman dan bukannya masuk ke dalam Definisi prop, untuk contoh: 🎜

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

🎜 kini harus ditulis sebagai: 🎜

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

🎜Ini mempunyai beberapa kelebihan: 🎜

• 🎜Anda boleh mengekalkan kebenaran operasi nilai prop asal . 🎜
• 🎜Paksa pembangun menggunakan pengisytiharan eksplisit dengan memberikan nilai yang disahkan nama yang berbeza. 🎜

🎜Kaedah naik taraf🎜🎜Jalankan migrasi alat Cari contoh yang mengandungi pilihan paksaan. 🎜🎜🎜🎜🎜

twoWay Parameter prop ^{dialih keluar}🎜🎜Prop kini hanya boleh dihantar ke satu arah. Untuk mempunyai kesan terbalik pada komponen induk, komponen anak perlu secara eksplisit melepasi peristiwa dan bukannya bergantung pada pengikatan dua hala tersirat. Untuk butiran, lihat: 🎜

• 🎜Tersuai Peristiwa komponen🎜
• 🎜Komponen input tersuai (Menggunakan acara komponen)🎜
• 🎜Pengurusan negeri global🎜

🎜 Kaedah naik taraf🎜🎜Jalankan alat migrasi, Cari kejadian yang mengandungi parameter twoWay. 🎜🎜

v-bindPengubah suai .sekali dan .sync ^{dialih keluar}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

Prop kini hanya boleh digunakan secara individu lulus ke. Untuk mempunyai kesan terbalik pada komponen induk, komponen anak perlu secara eksplisit melepasi peristiwa dan bukannya bergantung pada pengikatan dua hala tersirat. Untuk butiran, lihat:

• 🎜Tersuai Peristiwa komponen🎜
• 🎜Komponen input tersuai (Menggunakan acara komponen)🎜
• 🎜Pengurusan negeri global🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Alat migrasi ke cari Kejadian menggunakan pengubah suai .sekali dan .sync. 🎜🎜🎜🎜🎜

Ubah suai Props ^Ditamatkan 🎜 🎜Mengubah suai prop dalam komponen adalah anti-corak (tidak disyorkan). Contohnya, isytiharkan prop dahulu, dan kemudian tukar nilai prop dalam komponen melalui this.myProp = 'someOtherValue'. Menurut mekanisme pemaparan, apabila komponen induk dipaparkan semula, nilai prop dalaman komponen anak juga akan ditimpa. 🎜🎜Dalam kebanyakan kes, menukar nilai prop boleh digantikan dengan pilihan berikut: 🎜

• 🎜Melalui atribut data, gunakan prop untuk menetapkan nilai lalai daripada atribut data. 🎜
• 🎜Melalui atribut yang dikira. 🎜

🎜Kaedah naik taraf🎜🎜Jalankan ujian hujung ke hujung dan semak maklumat amaran konsol tentang pengubahsuaian prop. 🎜🎜🎜🎜🎜

Props untuk contoh akar ^penggantian🎜🎜Untuk contoh akar (contohnya: tika dibuat dengan Vue({ ... }) baharu), anda hanya boleh menggunakan propsData dan bukannya props . 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan ujian hujung ke hujung, ujian yang gagal akan muncul untuk memberitahu anda bahawa tika akar menggunakan props telah tamat tempoh . 🎜🎜. : 18px;">

^Ditamatkan

Dalam versi utama Vue yang akan datang, pengesahan cache bagi sifat yang dikira akan dialih keluar. Menukar sifat dikira yang tidak dicache kepada kaedah menghasilkan keputusan yang sama seperti sebelumnya. Contoh:

<input v-model="text" value="foo">

---

Atau gunakan kaedah komponen:

data: {
  text: 'bar'
}

cache: false ^弃用

在 Vue 未来的大版本中，计算属性的缓存验证将会被移除。把不缓存的计算属性转换为方法可以得到和之前相同的结果。

示例：

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

或者使用组件方法：

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

升级方式

运行迁移工具找到 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 触发的事件)。如果要监听根元素的原生事件，可以使用 .nativeKaedah naik taraf

Jalankan alat migrasi>Cari pilihan untuk

Arahan Terbina Dalam🎜🎜🎜🎜🎜🎜🎜

🎜v-bind🎜🎜🎜 nilai benar/salah ^ubah🎜🎜🎜🎜🎜 dalam Apabila menggunakan v-bind dalam 2.0, hanya null, undefined dan false dianggap palsu. Ini bermakna 0 dan rentetan kosong akan dipaparkan sebagai nilai sebenar. Contohnya, v-bind:draggable="''" akan dipaparkan sebagai draggable="true". 🎜🎜Untuk sifat penghitungan, sebagai tambahan kepada nilai palsu di atas, rentetan "false" juga akan dipaparkan sebagai attr="false". 🎜

🎜Perhatikan bahawa untuk fungsi cangkuk lain (seperti v-if dan v-show), mereka masih mengikut peraturan am js untuk menilai benar dan salah nilai. 🎜

🎜🎜🎜🎜Kaedah naik taraf🎜🎜🎜🎜Jalankan ujian hujung ke hujung Jika mana-mana bahagian apl anda mungkin terjejas oleh peningkatan ini, ujian yang gagal akan muncul " monitor-primary-event">🎜Gunakan v-on untuk memantau acara asli ^Tukar🎜🎜🎜🎜Sekarang dalam komponen Menggunakan v-on hanya akan mendengar acara tersuai (peristiwa yang dicetuskan oleh komponen menggunakan $emit). Jika anda ingin mendengar peristiwa asli unsur akar, anda boleh menggunakan pengubah suai .native, seperti: 🎜

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

🎜🎜🎜🎜Kaedah naik taraf🎜🎜🎜🎜Jalankan 🎜alat migrasi🎜 dalam pangkalan kod untuk mengetahui semua Contoh penggunaan fungsi cangkuk ini. 🎜🎜

v-model^{Alih keluar} dengan 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

Depanunan pernah digunakan untuk mengawal permintaan Ajax dan lain-lain Kekerapan menuntut tugasan. Parameter atribut debounce v-model dalam Vue menjadikannya sangat mudah untuk mencapai kawalan ini dalam beberapa kes mudah. Tetapi sebenarnya, ini adalah untuk mengawal kekerapan

kemas kini status

, dan bukannya mengawal tugas yang memakan masa itu sendiri. Ini adalah perbezaan kecil, tetapi akan menjadi terhad apabila aplikasi anda berkembang. Contoh had semasa mereka bentuk gesaan carian:

Menggunakan parameter debounce, anda tidak boleh melihat status "Menaip". Kerana status input tidak dapat dikesan dalam masa nyata. Walau bagaimanapun, dengan menyahganding debounce daripada Vue, kami hanya boleh menangguhkan operasi yang ingin kami kawal, justeru mengelakkan pengehadan ini:

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

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

Satu lagi kelebihan pendekatan ini ialah: apabila fungsi membalut Apabila masa pelaksanaan adalah sama kepada masa kelewatan, ia akan menunggu lebih lama. Sebagai contoh, apabila memberikan cadangan carian, anda perlu menunggu pengguna berhenti memasukkan untuk tempoh masa sebelum memberikan cadangan, yang merupakan pengalaman yang sangat buruk. Malah, lebih sesuai menggunakan fungsi

throttling

ketika ini. Memandangkan anda kini mempunyai kebebasan untuk menggunakan perpustakaan seperti lodash, anda boleh memfaktorkan semula projek anda dengan cepat menggunakan pendikit. 🎜🎜🎜🎜🎜Naik Taraf Laluan🎜🎜🎜🎜Jalankan 🎜alat migrasi🎜 menggunakan parameter debounce. 🎜🎜🎜🎜🎜

🎜🎜Gunakan v-model dengan parameter lazy atau number. ^Penggantian 🎜🎜🎜🎜 Parameter lazy dan number kini digunakan sebagai pengubah suai supaya ia kelihatan lebih jelas dan bukannya ini: 🎜

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

🎜Kini ia ditulis seperti ini:🎜

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

🎜🎜🎜🎜Kaedah naik taraf🎜🎜🎜🎜Jalankan 🎜alat migrasi🎜 untuk mencari parameter yang ditamatkan ini. 🎜🎜

v-model menggunakan nilai sebaris ^{Alih keluar}value 的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 tidak lagi memulakan nilai awal dalam cara value sebaris Jelas sekali, ia akan menggunakan atribut data contoh yang sepadan sebagai nilai awal sebenar.

🎜Ini bermakna elemen berikut: 🎜

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

🎜dengan yang berikut dalam pilihan data: 🎜

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

🎜 akan menjadikan model sebagai 'bar' dan bukannya 'foo' . Begitu juga, untuk nilai sedia ada <textarea>: 🎜

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

🎜mesti memastikan bahawa nilai awal text ialah "hello world"🎜

🎜🎜Kaedah naik taraf 🎜 🎜Jalankan ujian hujung ke hujung selepas menaik taraf, memberi perhatian kepada 🎜amaran konsol tentang v-model parameter sebaris🎜🎜🎜🎜🎜

🎜🎜v-model🎜🎜 dengan v-for Nilai Primitif Berulang ^{Alih keluar} 🎜🎜Tulisan seperti ini akan menjadi tidak sah: 🎜

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

🎜Kerana <input> akan dikumpulkan ke dalam js serupa dengan yang berikut: 🎜

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

🎜Dengan cara ini, pengikatan dua hala v-model tidak sah di sini. Menugaskan str kepada nilai lain dalam iterator tidak berguna kerana ia hanyalah pembolehubah di dalam fungsi. 🎜🎜Alternatifnya ialah anda boleh menggunakan tatasusunan objek supaya v-model boleh mengemas kini medan dalam objek secara serentak, contohnya: 🎜

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

🎜🎜Naik taraf kaedah🎜🎜Jalankan ujian jika Jika apl anda terjejas oleh kemas kini ini, gesaan ujian yang gagal akan muncul. 🎜🎜🎜🎜🎜

🎜🎜v-bind:style dengan !penting ^{Alih keluar sup >🎜🎜Menulis seperti ini akan menjadi tidak sah:🎜}

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

🎜Jika anda benar-benar perlu menutup !penting lain, sebaiknya tuliskannya dalam bentuk rentetan:🎜

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

🎜🎜Kaedah naik taraf< /strong> 🎜🎜Jalankan Alat Pembantu Migrasi. Cari objek mengikat gaya yang mengandungi !penting. 🎜🎜

v-el dan v-ref penggantianv-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

Untuk kesederhanaan, v-el dan v-ref Digabungkan ke dalam atribut ref, yang boleh dipanggil melalui $refs dalam contoh komponen. Ini bermakna v-el:my-element akan ditulis seperti ini: ref="myElement", dan v-ref:my-component menjadi Seperti ini: ref="myComponent". Apabila terikat kepada elemen umum, ref merujuk kepada elemen DOM Apabila terikat kepada komponen, ref ialah contoh komponen.

🎜Oleh kerana v-ref bukan lagi arahan tetapi atribut khas, ia juga boleh ditakrifkan secara dinamik. Ini berguna apabila digabungkan dengan v-for: 🎜

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

🎜Sebelum ini v-el/v-ref dan Digunakan bersama-sama dengan v -forakan menghasilkan tatasusunan DOM atau tatasusunan komponen, kerana tiada cara untuk memberikan setiap elemen nama tertentu. Anda masih boleh melakukan ini dan memberikan setiap elemen ref yang sama: 🎜

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

🎜Tidak seperti dalam 1.x, $refs tidak responsif kerana ia Daftar/kemas kini semasa pemaparan. Hanya mendengar perubahan dan membuat persembahan berulang kali boleh menjadikannya responsif. 🎜🎜Sebaliknya, $refs direka terutamanya untuk diakses oleh program js, dan tidak disyorkan untuk terlalu bergantung padanya dalam templat. Kerana ini bermakna mengakses keadaan contoh di luar contoh, yang bertentangan dengan pemikiran terdorong data Vue. 🎜

🎜 Kaedah naik taraf🎜🎜Jalankan Alat Migrasi untuk mengetahui contoh v-el dan v-ref . 🎜🎜🎜🎜🎜

v-showGunakan v-else ^{Alih keluar}🎜🎜v -else tidak lagi boleh digunakan selepas v-show. Sila gunakan v-show sebaliknya dalam cabang negatif v-if. Contohnya: 🎜

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

🎜 kini sepatutnya ditulis seperti ini: 🎜

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

🎜Kaedah naik taraf🎜🎜JalankanAlat migrasi mengetahui sama ada v-else dan v-show wujud dalam contoh. 🎜🎜

Arahan tersuai ^Pemudahan

---

Dalam versi baharu, skop penggunaan arahan telah dikurangkan dengan banyak: kini arahan hanya digunakan untuk operasi DOM peringkat rendah. Dalam kebanyakan kes, sebaiknya gunakan komponen sebagai lapisan abstraksi untuk penggunaan semula kod.

Perubahan ketara adalah seperti berikut:

• Arahan tidak lagi mempunyai contoh. Maksudnya, anda tidak lagi mempunyai contoh ini dalam fungsi cangkuk arahan. Sebaliknya, anda boleh menerima sebarang data yang anda perlukan dalam parameter. Jika anda benar-benar memerlukannya, anda boleh mengakses contoh melalui el. this 。替代的是，你可以在参数中接受你需要的任何数据。如果确实需要，可以通过 el 来访问实例。

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

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

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

升级方式

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

指令 .literal