Vue: 2.0 Perubahan

Saya baru saja melihat bahwa fitur tertentu hanya akan tersedia di build mandiri . Apakah itu berarti bahwa ini dan versi NPM berbeda secara signifikan?

@rekateka 2.0 standalone build berarti (compiler + runtime). Ekspor default paket NPM akan menjadi runtime saja, karena jika menginstal dari NPM, Anda mungkin akan mengkompilasi template terlebih dahulu dengan alat build.

Terima kasih, @yyx990803. Saya masih memiliki beberapa pertanyaan lagi mengenai kompiler dan fitur lainnya, tetapi saya telah menggunakan forum untuk itu.

Apakah ada perubahan mengkhawatirkan yang dibuat pada dokumen yang harus saya tinjau? Kerja bagus! Tetap semangat. Anda mendefinisikan ulang pengembangan web. Terima kasih!

Bisakah saya mendapatkan this.arg dari arahan saya?

Saya melihat vnode.data.directives memiliki arg , tetapi ketika saya memiliki dua atau lebih arahan, saya tidak dapat mengetahui index .

<!-- show @ 0, img @ 1-->
<img v-show="true" v-img:200*200="imgSrc">

<!-- img @ 0, show @ 1-->
<img v-img:200*200="imgSrc" v-show="true">

Haruskah saya menggunakan forEach ? Terima kasih!

@banricho poin bagus, itu sudah diabaikan! Lihat tanda tangan fungsi direktif yang diperbarui.

Pertama-tama, maaf karena saya tidak yakin apakah saya dapat menanyakan masalah ini di sini, dan saya memiliki sedikit persyaratan yang ingin saya katakan.
Syaratnya saya harap saya bisa mendesain penggunaan komponen saya seperti ini

<carousel>
  <img src="..." alt="..." desc="..." is="argument">
  <img src="..." alt="..." desc="..." is="argument">
</carousel>

Semoga anak-anak bisa menjadi semacam argumentasi, tidak hanya sebatas atribut
Untuk saat ini saya dapat membuat komponen, penggunaan seperti

<carousel items="[{}, {}, {}]"></carousel>

Tapi menurut saya kurang bagus, semoga bisa seperti yang saya buat sebelumnya di React coverflow

@andyyou - pertanyaan itu mungkin paling baik diposting di forum, karena itu bukan masalah, atau saran yang jelas, atau bantuan nyata apa pun untuk masalah ini.

http://forum.vuejs.org/

Jika Anda mengetahui bahwa persyaratan Anda tidak dapat dipenuhi dengan Vue di utas forum Anda, maka Anda dapat membuka masalah baru di sini.

skot

@smolinari Terima kasih

"Tetapi untuk kasus yang lebih kompleks, disarankan untuk memperkenalkan lapisan manajemen status khusus menggunakan Vuex." Ini tampaknya menyiratkan bahwa negara harus digunakan di atas acara. Saya melihat mereka sebagai benar-benar terpisah - suatu peristiwa adalah momen dalam waktu, sedangkan keadaan tidak berubah. Anda bisa mengatakan bahwa Anda bisa menonton keadaan, tetapi itu juga tidak menyampaikan momen tertentu, tetapi kapan saja sesuatu berubah. Saya tertarik dengan makna di balik rekomendasi ini.

@jrenton Secara umum, kita dapat menganggap sistem acara hanya sebagai komponen A yang memberi tahu komponen B untuk mengubah
Jadi untuk kasus pertama, kita dapat menggunakan manajemen status (mengelola status bersama untuk A dan B) daripada menggunakan sistem peristiwa untuk membiarkan A memberi tahu B untuk mengubah status.
Untuk kasus kedua, saya pikir itu bisa ditangani dengan pendekatan 'bus acara' dengan cukup baik.

@jrenton alih-alih sup komponen yang berbicara satu sama lain, Vuex menyarankan satu saluran untuk komponen untuk mengekspresikan "niat" dengan tindakan, dan merekam "fakta" dengan mutasi.

Saya menggunakan Twig bersama dengan Vue.

Sampai sekarang (vue 1.0) saya telah mengirimkan data ke komponen saya seperti ini:

<my-component data="{{ DATA }}"><my-component>

(Perhatikan bahwa {{ dan }} adalah tag ranting - untuk vue saya telah menggunakan pembatas khusus ${ dan } )

Jika saya memahami berbagai hal dengan benar, di Vue 2.0 saya harus melakukannya seperti ini:

<my-component :data=" '{{ DATA }}' "></my-component>
Baik?

@gholol tidak, hanya saja

<my-component :data="{{ DATA }}"></my-component>

Sebenarnya sepertinya penggunaan lama Anda seharusnya tidak berfungsi.

Yah itu bekerja dengan baik ...

Seperti yang saya katakan, datanya berasal dari twig template engine. Sekarang di Vue 2.0 tidak berfungsi. Saya sudah mencoba meneruskannya seperti yang Anda katakan (tanpa tanda kutip tunggal) tetapi properti data menjadi tidak terdefinisi.

Kesalahan: SyntaxError: hilang } setelah daftar properti

EDIT: Berhasil, saya lupa menyebutkan bahwa variabel DATA adalah string

@jrenton Ide dan motivasi saya cukup sederhana sepertinya Vue tidak menyukai React yang memaksa kami untuk menggunakan JSX. Kita bisa memilih banyak template .

Saya harap saya dapat menggunakan sintaks elemen anak-anak sebagai parameter (argumen) meneruskan args ke induk karena dalam beberapa bahasa templat seperti slim jika Anda memiliki sedikit banyak atribut atau mengatakan nama attr cukup panjang maka kita harus meletakkan semua hal dalam satu baris. lebih mudah membuat kode satu baris lebih dari 80 karakter.

@yyx990803 Merasa ingin bertualang hari ini ingin melihat seberapa banyak upaya yang diperlukan untuk memigrasikan 1.0 ke 2.0a, sayangnya karena tidak mungkin lagi menggunakan interpolasi sederhana, bagaimana saya akan melakukan sesuatu yang sederhana seperti <input type="text" name="account[categories][{{ category.id }}]"> di 2.0?

Templat sebaris ES6 berfungsi dalam ekspresi pengikatan:

<input type="text" :name="`account[categories][${ category.id }]`">

https://jsfiddle.net/Linusborg/cm4v75xh/

Jika itu satu-satunya cara untuk membuatnya bekerja pada 2.0, maka jangan keberatan saya mengatakan bahwa itu adalah regresi dalam sintaks 1.0 yang indah membuat kita terbiasa – ya saya tahu itu hanya ES2015.

Saya berasumsi interpolasi telah dihapus karena alasan kinerja? Saya hanya berharap itu sepadan dengan sintaks yang lebih buruk.

@oskarkrawczyk Saya berasumsi Anda ingin berakhir dengan sesuatu seperti name="account[categories][fruits]" di DOM Anda, karena inilah yang akan dirender oleh ekspresi Anda.

Versi 2.0 (dan 1.0 yang sebenarnya) akan menjadi :name=" 'account[categories][' + category.id + ']' " .

@simplesmiler Dipahami. Saya pikir {{ }} hanya sedikit memanjakan saya.

@yyx990803 dapatkah saya memasukkan komponen secara dinamis, seperti ini?

    render () {
        return this.$createElement('div', { staticClass: 'list-container' }, this.list)
    },
    data () {
         return {
               list: []
         }
    },
    method: {
         a () {
               this.list.push(this.$createElement('myComponent', {}))    
         }
    }

Bagaimana saya bisa mengikat beberapa nilai untuk atribut yang bergantung pada ekspresi? Sebagai contoh:

new Vue({
  el:'body',
  data:{
    flag: true
  }
})

<input type="text" v-bind:placeholder="{test: flag, test2: !flag}" />

Saya mengharapkan hasil selanjutnya:

<input type="text" placeholder="test" />
<!-- or -->
<input type="text" placeholder="test2" />

@nervgh ini bukan tempat yang tepat untuk menanyakan pertanyaan ini.
Gunakan ekspresi ternary, v-bind:placeholder="flag ? 'test' : 'test2'" .

@simplesmiler , terima kasih atas jawaban Anda. Saya mencoba mengatakan bahwa _Object-Syntax_ akan berguna dalam kasus ini, tetapi tidak berfungsi seperti yang saya harapkan.

Sintaks objek class , dan untuk komponen tidak akan ada cara untuk mendeteksi dari sisi anak apakah Anda bermaksud mengirim daftar string atau objek yang tepat.

Re: .once dan .sync tidak digunakan lagi.

Bukankah ini merusak pola desain yang sangat umum?

Saya tidak dapat memikirkan bagaimana Anda dapat memiliki komponen sederhana untuk menangani bidang formulir tanpa ini.

Saya memiliki komponen sederhana untuk berbagai jenis bidang formulir, misalnya, inilah templat komponen "kotak teks" saya::

<label>{{type.caption}}:<input type="text" v-model="data"></label>

...dan juga komponen yang lebih kompleks untuk daftar yang menyediakan ui untuk menambah dan menghapus elemen dari array dalam struktur data

Kemudian saya menggunakan komponen ini misalnya seperti:

<div v-for="field in type.fields">
    <component :data.sync="data[field.name]" :is="field.ctype" :type="field">

Catatan: Semua komponen ini memiliki dua props: data dan type . data adalah simpul dalam struktur data yang sedang diedit yang menjadi tanggung jawab komponen untuk menyediakan UI untuk pengeditan, dan type adalah simpul dalam struktur data (masif, statis) yang berisi tipe /hierarki bidang.

Bagaimana hal-hal seperti itu bisa bekerja tanpa .sync ?

Tampaknya bagi saya bahwa akan sangat memperumit hal-hal untuk membuat semacam sistem pengiriman pesan antara komponen-komponen ini di mana sub-komponen entah bagaimana dapat berkomunikasi dengan orang tua yang merupakan sub-komponen mereka, dan orang tua kemudian dapat mencari tahu bagian mana dari datanya struktur untuk dimodifikasi.

Saya sangat berharap saya kehilangan sesuatu.... karena sepertinya Anda mengatakan bahwa menggunakan komponen untuk membuat editor untuk bagian dari struktur data Anda adalah anti-pola. Apa? Sejauh ini hanya itu yang saya gunakan untuk Vue. Saya kira Anda berpikir bahwa menghapus fitur ini akan mendorong orang untuk menulis kode yang lebih bersih. Mungkin itu akan berdampak pada beberapa orang, tetapi banyak orang akan menulis kode yang jauh lebih buruk untuk mengatasi batasan ini. Memodifikasi status adalah satu-satunya hal berguna yang dilakukan komputer. Silakan lanjutkan untuk membuat ini lebih mudah.

@JasonWoof v-model di 2.0 dapat bekerja pada komponen khusus. Komponen hanya perlu:

1. mengekspos prop bernama value
2. memancarkan acara input ketika nilai perlu disinkronkan ke induk, misalnya this.$emit('input', value)

Lihat contoh .

@yyx990803 Terima kasih atas penjelasan dan tautannya. Sekarang saya hanya terjebak pada:

Mengapa menghapus .sync ?

Saya tidak melihat kelebihannya, hanya kekurangannya. Contoh yang Anda tautkan menunjukkan bahwa Anda dapat mencapai hal yang sama dengan :selected.sync atau v-model . Saya hanya melihat kekurangan untuk metode v-model:

1. Ini membutuhkan pelat ketel yang signifikan di sisi sub-komponen, lebih rumit, lebih banyak dipelajari, dll.
2. Anda hanya dapat melewatkan satu nilai dengan v-model, tetapi Anda dapat memiliki beberapa .sync props

Saya tidak melihat bagaimana beralih ke v-model membuat sesuatu lebih jelas/bersih. Dalam kedua kasus tersebut, satu-satunya indikasi pada induk bahwa komponen turunan dapat dengan mudah mengubah status induk adalah sintaks prop dalam template. Saya bahkan berpendapat bahwa .sync lebih jelas.

Hal lainnya adalah ketika Anda melewatkan objek/array/dll sebagai props, maka mereka dapat diubah dari komponen anak. Jadi, Anda tidak dapat melindungi pemrogram agar tidak dapat mengubah status dari komponen anak dalam kasus ini (yang saya anggap sangat umum.) Jadi bagi saya sepertinya Anda memperkenalkan batu sandungan dengan menghapus hal yang membuatnya begitu melewatkan nilai string bekerja sama dengan melewatkan nilai objek. .sync membuat kode saya lebih sederhana dan lebih konsisten dengan selalu membuat properti "data" saya dapat ditulis dari sisi anak, apa pun tipe datanya.

Saya baru mengenal Vue.js (3 hari yang lalu) tetapi dari apa yang saya lihat sejauh ini, Vue.js berharga terutama karena dua hal:

1. manipulasi dom mudah dengan template
2. propagasi perubahan nilai/data otomatis, termasuk memicu perubahan template

Setidaknya itulah yang saya temukan sejauh ini.

Tampaknya bagi saya bahwa menghapus .sync mempersulit Vue.js untuk secara konsisten melakukan yang kedua.

@JasonWoof karena efek samping eksplisit vs implisit di luar cakupan komponen sendiri membuat semua perbedaan dalam pemeliharaan jangka panjang.

... dan sementara orang dapat berargumen bahwa orang harus belajar kapan tidak menggunakan .sync , pengalaman kami sejauh ini berbeda. orang cenderung terlalu bergantung pada ini dan membuat kode yang nantinya sulit untuk di-debug.

jadi ini adalah keputusan desain untuk memaksa orang melakukannya dengan benar sejak awal.

sebuah contoh:

• Kami menyinkronkan nilai name antara orang tua dan anak. semua baik-baik saja.
• kami memutuskan _'hei, ketika nilai itu berubah, kami perlu melakukan sesuatu pada induknya!'_
• Jadi, kami membuat fungsi watch . Bagus!
• Kemudian kita menyadari bahwa pengamat tampaknya menembak ketika kita tidak menginginkannya. Tetapi kami tidak dapat mengetahui alasannya, karena kami tidak dapat benar-benar meletakkan console.log() mana pun untuk melacak perilaku tersebut.
• Setelah berpikir keras, kami menyadari bahwa kami _benar-benar_ hanya menginginkan _sesuatu_ itu terjadi ketika nilainya diubah pada induk, bukan pada anak atau "kakek".
• Sekarang kami mencoba menemukan cara untuk membedakan skenario ini dalam fungsi watch .
• Hanya untuk menyadari bahwa ini membuat hal yang sederhana menjadi sangat rumit
• dan pada akhirnya, seseorang memberi tahu kami untuk menghapus sinkronisasi, jadi kami membuang semuanya dan menggunakan prop satu arah dan peristiwa yang dipancarkan untuk menangani situasi - kodenya menjadi lebih sederhana dan lebih eksplisit, jadi mudah untuk memikirkan bagaimana dan ketika data mengalir dan menjadi lebih mudah untuk men-debugnya. Bug ditemukan dengan cepat dan kami dapat melanjutkan.

...dan ini menjadi lebih gila ketika Anda menyinkronkan lebih dari satu level.

Ini adalah pola (anti-) yang sering kita lihat di forum dan di gitter chat.

Menghapus .sync memaksa orang untuk menulis kode yang jelas, eksplisit, dan dapat dipelihara sejak awal, karena kode mereka tidak akan cukup sederhana untuk .sync untuk waktu yang lama, sebagian besar waktu.

OKE. Terima kasih telah menjelaskan.

Ada baiknya mendengar masalah apa yang Anda coba selesaikan.

Saya benar-benar ragu ini akan membantu ... Buatlah agar orang tidak dapat dengan mudah mematahkan pola yang Anda suka dan orang akan melakukan hal-hal yang jauh lebih buruk untuk mengatasi keterbatasan.

Ini mengingatkan saya pada banyak abstraksi. Abstraksi membawa kita ke dalam banyak masalah. Mereka membuat kode sulit dibaca, sulit untuk di-debug, dll.... Tetapi Anda tidak dapat memperbaikinya dengan menghilangkan kemampuan untuk membuat abstraksi... itulah yang membuat pemrograman menjadi mungkin/berguna. Solusi untuk ini bukan pada tingkat bahasa atau kerangka kerja, tetapi dalam pengajaran, saran, pembelajaran. Kami mendorong orang untuk tidak membuat hal-hal yang terlalu abstrak.

Kedengarannya bagi saya seperti Anda berbicara tentang filosofi desain seperti itu. Dalam banyak kasus, ini adalah filosofi yang bagus untuk diingat saat membuat kode. Tetapi ketika itu diberlakukan sebagai batasan, dan programmer berpikir bahwa batasan ini menghentikannya dari melakukan apa yang perlu dia lakukan, maka dia akan mengatasinya, yang akan menghasilkan semua masalah yang Anda coba hindari dan lebih buruk.

Orang-orang tidak akan berhenti mencoba mengubah status induk dari anak-anak. Anda tidak bisa memaksa orang untuk tidak melakukan itu.

v-model cukup rumit sehingga saya akan mengatasi masalah ini dengan melewatkan objek/array induk dan kunci sehingga anak dapat memodifikasinya.

Saya kira hit terakhir ini adalah inti dari apa yang saya coba sampaikan: Saya (secara pribadi) melihat kurangnya .sync sebagai masalah, dan akan mengatasinya atau tidak menggunakan kerangka kerja Anda. Saya yakin banyak orang akan memiliki pendekatan yang sama.

Mungkin ini tidak perlu dikatakan lagi, tetapi itu membuat saya sedikit marah ketika orang mencoba memaksakan filosofi desain pada saya. Saya lebih suka membangun hal-hal yang sangat salah dan belajar untuk tidak melakukannya lagi daripada menggunakan sistem yang sengaja menahan daya karena takut saya akan menggunakannya dengan buruk.

PS Maaf, saya tidak bisa menahan diri, satu komentar lagi, maka saya akan meninggalkan kalian sendiri. Kebanyakan programmer menulis kode yang tidak dapat mereka debug. Ini terjadi pada setiap programmer di setiap bahasa dengan setiap kerangka kerja. Beginilah cara programmer menjadi programmer yang lebih baik: mereka membuat kesalahan, mereka membuat kode yang tidak dapat mereka perbaiki, mereka belajar bagaimana menulis sesuatu secara berbeda di masa depan. Tolong jangan membodohi kerangka kerja Anda untuk semua orang dalam upaya membuatnya sehingga programmer yang mengabstraksikan diri mereka ke sudut dapat membuat barang-barang mereka sedikit lebih membingungkan/kompleks sebelum menjadi berantakan sehingga mereka tidak dapat men-debug-nya.

@JasonWoof itu tidak ada hubungannya dengan "membodohi", dan mencegah pengguna dari jebakan umum / memastikan pemeliharaan yang lebih baik menurut definisi adalah bagian dari pekerjaan kerangka kerja. Kami membuat keputusan berdasarkan pengalaman langsung merancang, menggunakan kerangka kerja itu sendiri, dan mengamati perilaku pengguna dalam berbagai kasus penggunaan. Jika itu anti-pola, kami akan melarang pengguna menggunakannya, dan memberikan panduan tentang solusi idiomatik. Anda bebas untuk tidak setuju dengan itu berdasarkan pendapat pribadi Anda, tetapi menurut saya argumen Anda tidak meyakinkan.

Orang-orang tidak akan berhenti mencoba mengubah status induk dari anak-anak. Anda tidak bisa memaksa orang untuk tidak melakukan itu.

Tentu. Dan kami _tidak_ 'memaksa' mereka, karena mungkin ada beberapa kasus tepi yang mungkin masih perlu. Jadi Anda masih dapat mengakses this.$parent , Anda dapat meneruskan $data melalui prop dll, tetapi sejujurnya melakukannya tidak akan lebih meyakinkan bahwa $emit mengadakan sebagian besar acara waktu, jadi mereka tidak akan semenarik .sync gula.

Juga, $parent dkk. bukan bagian dari panduan resmi, jadi pengguna yang menggunakannya secara aktif mengerjakan praktik terbaik yang disarankan - yang bebas mereka lakukan, tetapi kami tidak menganjurkan perilaku itu.

Akibatnya, kerangka kerja tidak boleh mendorong perilaku serupa dengan menyediakan gula sintaksis 'ajaib' seperti .sync jika kami merasa bahwa fitur seperti itu disalahgunakan di sebagian besar skenario dan bertentangan dengan praktik terbaik yang ingin dibuat kerangka kerja.

Apakah Youda memiliki versi Cina? .

Seperti apa tampilan kompatibilitas untuk vue-router?

@roblav96

Ada beberapa perubahan yang diperlukan agar kompatibel, kami berharap untuk memasukkan Router ke dalam Vue dengan lebih baik.

@blake-newman

Bisakah kita mendapatkan template boilerplate bersama di vue-cli? Sepertinya saya tidak bisa menjalankan semua ini

@roblav96

Ada beberapa saat ini, ada beberapa perubahan yang diperlukan dengan vue-loader agar kompatibel. Saat ini 2.0 harus digunakan untuk eksperimen hanya sampai semua dependensi lebih lanjut untuk aplikasi skala besar diperbarui.

Apakah ada ETA untuk kandidat beta/rilis?

@Evertt Alpha dijadwalkan minggu ini. Beta akan mengikuti dengan dokumentasi yang selesai, dan mungkin lebih banyak dukungan dari perpustakaan perluasan inti (Vue-router dll). Lepaskan Kandidat ketika Beta terbukti berhasil.

@blake-newman terima kasih atas tanggapan yang cepat, singkat, dan lengkap itu. Mereka adalah yang terbaik. :-D

Adakah solusi untuk replace: false di vue 2.0 ?

Hai, apakah JSX sudah dapat digunakan?

@reohjs - Tidak dan saya pribadi akan melihatnya sebagai langkah mundur yang nyata untuk Vue, jika itu mendukung JSX.

skot

@reohjs Dalam aliran Evan tadi malam dia menyebutkan itu bisa dibuat dengan plugin jadi saya membayangkan begitu ini masuk ke beta, tidak akan lama bagi seseorang untuk membuatnya. Saya senang itu bukan inti tetapi plugin JSX terdengar seperti ide bagus.

Saya senang itu tidak ada di intinya

👍 👍 👍 👍

Ya harus menjadi plugin. Namun, seperti yang terlihat, template memiliki banyak manfaat untuk komponen standar.

Kompilasi JSX harus mudah dicapai dengan plugin ini: https://babeljs.io/docs/plugins/transform-react-jsx/

Saya pikir fungsi _h akan menjadi pengganti React.createElement

Bagaimana dengan menyediakan antarmuka untuk membuat pengubah model v khusus sebagai cara untuk mengganti filter 2 arah? Tampaknya mereka sudah digunakan untuk mengurai input pengguna (misalnya v-model.trim ). Jika penguraian/ pemformatan sederhana dan independen dari properti data tertentu, menggunakan pengubah akan memungkinkan penguraian/pemformatan untuk digunakan kembali dengan boilerplate yang jauh lebih sedikit daripada dengan menyetel properti yang dihitung untuk setiap properti data individual, atau membuat komponen baru untuk masing-masing jenis input di mana kita ingin parsing/format diterapkan.

Hai, saat ini saya sedang mengerjakan sebuah plugin untuk mendukung gettext di Vue.js 1.0 dan saya memiliki arahan yang menggunakan vm.$interpolate .

Saya bertanya-tanya bagaimana cara memigrasikan kode saya ke 2.0 karena:

• vm.$interpolate akan digunakan lagi
• direktif tidak akan lagi memiliki instance di 2.0

Atau adakah pendekatan yang lebih baik daripada arahan?

import languages from 'src/plugins/translate/languages'
import translateUtils from 'src/plugins/translate/utils'

const translateDirective = {
  terminal: true,
  params: ['translateN', 'translatePlural'],
  paramWatchers: {
    translateN: function () {
      this.translate()
    },
  },
  isPlural: function () {
    return 'translateN' in this.params && 'translatePlural' in this.params
  },
  bind: function () {
    this.boundTranslate = this.translate.bind(this)
    this.msgid = this.el.innerHTML.trim()
    this.translate()
    languages.eventEmitter.on(languages.languageChangedEventName, this.boundTranslate)
  },
  unbind: function () {
    languages.eventEmitter.removeListener(languages.languageChangedEventName, this.boundTranslate)
  },
  translate: function () {
    let n = this.isPlural() ? parseInt(this.params.translateN) : 1
    let translation = translateUtils.getTranslation(this.msgid, n)
    this.el.innerHTML = this.vm.$interpolate(translation)
  },
}

export default translateDirective

Hanya menyampaikan beberapa kata pendek karena saya baru di Vue , hanya untuk mengatakan bahwa saya senang melihat pengurangan API secara umum atau pembantu _under-the-hood_. JavaScript sudah sangat kuat, dan dengan properti yang dihitung ditambah fitur reaktif lainnya dari kerangka kerja, hampir semuanya dapat dicapai.

Kudos untuk rilis _next_ ini! 🎆

@kemar Saya tidak begitu akrab dengan gettext, tetapi saya hanya akan memperluas Vue.prototype dengan metode $translate, dan kemudian melakukannya

{{ $translate('some.Key.path') }}

Apakah kemampuan untuk mendaftarkan aset dengan sintaks array telah dihapus dari 2.0? Tidak bekerja pada alpha, hanya ingin tahu apakah itu disengaja atau tidak.
yaitu:

components: [compA, compB, compC]

Saya tahu ES6 memiliki singkatan yang terlihat serupa, tetapi ada beberapa skenario di mana sintaks array berguna.

Saya melihat Anda menyebutkan rendering to native interfaces on mobile dengan weex dan saya bertanya-tanya betapa mudahnya membuat vue dan Nativescript berbicara.

Sesuatu yang lebih sesuai dengan Nativescript untuk Vue adalah Weex, yang Anda sebutkan, atau Quasar .

skot

Jika tidak ada lagi dispatch atau broadcast bagaimana komponen turunan generik akan memberi tahu induknya tentang suatu peristiwa/perubahan? Ini sepertinya tidak cocok dengan pola bus global atau vuex. Kasus penggunaan yang kami gunakan sekarang adalah penggeser rentang untuk filter pencarian. Komponen penggeser rentang bersifat umum dan merupakan anak dari beberapa filter pencarian yang berbeda. Saat ini kami menggunakan dispatch ketika penggeser rentang selesai digeser, maka induknya tahu untuk memicu pencarian berdasarkan perubahan.

@jrenton pendengar sebaris <child @some-event="parentHandler">

Kerja bagus.

Dalam sudut pandang saya, semua perubahan mengatakan bahwa pendekatan terbaik adalah membuat pohon komponen Anda hanya berdasarkan "aliran satu arah", yang jauh lebih sederhana dan mudah untuk di-debug dan dipelihara.

Tanpa ini, kebenaran data Anda akan berbanding terbalik dengan seberapa jauh Anda dari komponen paling atas.

Hanya ingin mengatakan bahwa:

render (h) {
    return (
    <div>
      {this.things.map(thing => <Thing thing={thing}></Thing>)}
   </div>
 );

Membuatku bahagia

Apakah diharapkan akan ada lebih banyak lagi yang ditambahkan ke daftar ini sebelum rilis 2.0? Hanya ingin tahu karena masalah ini masih terbuka.

@zephraph Ya, kami terus memperbarui daftar saat kami memperbarui API. Tidak ada yang besar sejauh ini, tetapi sesekali melanggar perubahan dari alfa sebelumnya.

Saya punya kasus, saya menggunakan pengiriman acara di masa lalu dan di mana saya terjebak dengan vuex: Komponen induk memiliki daftar komponen anak dan anak itu mengirim acara ketika nilainya berubah sehingga orang tua dapat melakukan sesuatu sebagai reaksi dari perubahan itu.
Sekarang saya mencoba memiliki array nilai anak di toko vuex. Masalahnya adalah, bagaimana komponen anak tahu di pengambil, dan dalam aksinya, elemen larik apa yang perlu diperbarui. Sejauh yang saya lihat, vuex tidak menyediakan fungsionalitas untuk secara dinamis mendapatkan atau memicu pertukaran nilai, atau apakah saya salah tentang itu?
Apa cara terbaik untuk menangani kasus ini tanpa pengiriman acara?

Dengan $broadcast dihapus, bagaimana Anda memberi tahu anak langsung untuk melakukan sesuatu ketika hal tertentu terjadi? Ini akan menjadi skenario di mana tidak ada data yang benar-benar berubah, jadi alat peraga reaktif sepertinya tidak cocok.

Saya bisa menggunakan prop dan mewariskan stempel waktu atau data acak dan menonton prop itu pada anak tetapi itu tampak aneh. Bus peristiwa global akan memerlukan pembuatan ID unik sehingga anak hanya bereaksi terhadap peristiwa dari induknya dan bukan instance lain dari komponen induk.

Ada $emit pada anak yang dapat didengarkan oleh orang tua menggunakan pendengar sebaris, apakah ada yang sebaliknya?

Saya bisa mewariskan instance emitor melalui prop, lalu emmiter.on pada anak, apakah itu terdengar buruk?

@gwildu tindakan dapat mengambil argumen, sehingga Anda dapat meneruskan id item bersama dengan tindakan. Dan alih-alih membuat komponen item mengambil item yang sesuai dari toko, ambil daftar di induknya, dan teruskan data item ke komponen item dengan prop.

// Vuex store
state: {
  items: [],
},
mutations: {
  ITEM_REMOVED: function(state, id) {
    var io = state.items.findIndex(item => item.id === id);
    state.items.splice(io, 1);
  },
},

// within the parent component
vuex: {
  getters: {
    items: state => state.items,
  },
  actions: {
    removeItem(store, id) {
      store.dispatch('ITEM_REMOVED', id);
    },
  },
},

<!-- within the parent template -->
<item v-for="item in item"
  :item-data="item.data"
  @removed="removeItem(item.id)"
>
</item>

<!-- within the child template -->
<button @click="$emit('removed')">Remove</button>

Jika item Anda tidak memiliki id unik lokal, Anda dapat membuatnya saat item dibuat atau diterima dari API. Sebagian besar waktu cuid cukup baik untuk itu.

@fergaldoyle karena orang tua selalu mengetahui itu anak-anak, Anda dapat meletakkan v-ref:some-child pada anak untuk mendapatkan referensi ke vm anak, dan kemudian $emit di atasnya, atau cukup panggil metode secara langsung dengan this.$refs.someChild.<methodName>(...) .

Namun saya akan menyarankan untuk memikirkan kembali arsitektur dalam kasus itu, karena peristiwa yang mengalir membuat komponen sangat sulit untuk dipikirkan.

Saya sedang bermain-main dengan vuejs 2 dan saya perhatikan untuk Snabbdom jika Anda lulus

h('div', {style: {color: '#000'}}, [
  h('h1', 'Headline'),
  h('p', 'A paragraph'),
]);

Untuk fungsi render yang Anda dapatkan

<div style="color:#000;"><h1>Headline</h1><p>A paragraph</p></div>

Tetapi di vuejs Anda mendapatkan

<div style="color:#000;"><h1></h1><p></p></div>

Apakah ada cara untuk mengubah konten teks (di dalam <h1> )?

@dubcanada mengapa tidak meneruskannya sebagai anak-anak?

Benar itu masuk akal. Terima kasih

Hai. Saya memiliki beberapa pertanyaan tentang sistem transisi di Vue 2.0 atau lebih tepatnya proposal karena saya tidak melihatnya dalam rencana untuk Vue 2.0. Di Vue 1.0 saya sering menemukan kebutuhan untuk mendeteksi ketika beberapa transisi/animasi yang telah saya siapkan akan berakhir. Sekarang saya melakukan ini dengan menggunakan setTimeout, tetapi ini adalah cara yang sangat hacky dan jelek, kita semua bisa setuju. Jadi pertanyaan saya adalah, apakah di Vue 2.0 akan ada cara untuk mendeteksi akhir transisi CSS ketika kita menggunakan transisi yang dikombinasikan dengan v-show/v-if, mungkin melalui acara?

<my-comp v-show="isVisible" @transition-end="onTransitionEnd" transition></my-comp>

saya akan sangat senang melihat sesuatu seperti ini di rilis Vue berikutnya :) terima kasih telah mendengarkan saya

@sqal Anda dapat melakukannya dengan kait transisi: https://jsfiddle.net/simplesmiler/Lrk9sxjf/97/

@dubcanada itu akan didukung di rilis berikutnya (menghilangkan data saat membuat elemen)

Terima kasih @fergaldoyle dan @simplesmiler atas petunjuk yang Anda pancarkan.

Saya tidak sadar, orang tua mampu mendengarkan peristiwa yang dipancarkan oleh anak. Tentu saja lebih masuk akal untuk mendengarkan acara yang tidak menggelegak itu.

Halo semua. Sedikit latar belakang: kami bekerja dengan webgl dan saya ingin melakukan beberapa antarmuka pada permukaan 3D. Ini berarti bahwa kita perlu merender antarmuka ke misalnya kanvas dan kemudian mengubah konten kanvas menjadi tekstur.

Saya telah bekerja dengan Angular, React dan Vue dan bagi saya Vue adalah yang paling masuk akal! Saat membaca tentang React, saya menemukan proyek react-canvas. Hal yang menarik adalah bahwa alih-alih mengubah DOM virtual menjadi simpul DOM nyata, mereka menggambarnya ke kanvas.

Karena Vue 2.0 juga menggunakan DOM virtual, saya bertanya-tanya apakah hal seperti ini dapat dilakukan juga?

Halo,

Hanya beberapa klarifikasi tentang penghapusan .sync dan seperti apa alur kerja umum untuk menangani alat peraga pada komponen generik.

jadi, pergi dari
<component :value.sync="some.value"></component>
ke
<component :value="some.value" @update="updateSomeValue"></component>

Apa cara yang disarankan untuk melacak prop value ?
Dalam kasus yang paling mendasar, sepertinya

props: ['value'],
computed: {
    _value: {
        get(){
            return this.value;
        },
        set(newVal) {
            this.$emit('update', newVal);
            return newVal;
        }
    }
}

Tapi, tentunya ini bergantung pada komponen induk yang mengembalikan nilai itu ke prop, jadi ketika komponen mendapatkannya lagi, itu mencerminkan perubahan terbaru...

Apakah itu berarti kita sekarang perlu melakukan sesuatu seperti ini:

props: ['value'],
data() {
    return {
        _val: this.value
    }
},
watch: {
    value(newVal) {
        this._val = newVal;
    }
},
computed: {
    _value: {
        get(){
            return this._val;
        },
        set(newVal) {
            this._val = newVal
            this.$emit('update', newVal);
        }
    }
}

Ini sepertinya banyak boilerplate untuk menangani penerusan (dan perubahan) suatu nilai, memberi tahu induk bahwa nilainya telah berubah, dan melacak perubahan secara internal, jika perubahan tidak disebarkan kembali oleh induknya.

Atau apakah saya kehilangan sedikit reaktivitas sihir vue di sini?

Juga, ada kemungkinan jika ada banyak alat peraga yang harus ditangani, ini bisa menjadi sangat rumit.
Saya hampir bisa melihat diri saya mengerjakan komponen pembungkus, di mana anak-anak mengakses this.$parent.value untuk bermutasi secara langsung, dan komponen pembungkus hanya menangani alat peraga/dihitung/jam tangan

@Towerful apa sebenarnya yang Anda maksud dengan "melacak nilai"? Dan mengapa Anda menginginkan gaya penyetel ( this._value = newValue ) alih-alih eksplisit this.$emit('value-updated', newValue) ?

Kekuatan aliran satu arah adalah bahwa orang tua dapat memutuskan untuk tidak menerapkan perubahan yang diminta oleh anak, atau dapat menandai anak sebagai "ditahan" dan menerapkan perubahan nanti (misalnya setelah memeriksa kembali dengan server).

@simplesmiler menggunakan properti yang dihitung memungkinkan Anda untuk mengikatnya di templat, bukan? sehingga Anda dapat menggunakan v-model .
Dan memiliki setter & pengambil yang terdapat di 1 tempat memudahkan untuk pergi dan melihat fungsionalitas ketika nilai diperbarui, dibandingkan dengan memiliki cara yang berbeda untuk mengakses nilai dan mengubah nilai di dalam komponen, dan tersebar di seluruh kode.
Jika menggunakan cara eksplisit dalam sebuah model, dan tidak menggunakan setter, sepertinya objek methods akan dikotori dengan metode tipe updateValue untuk template, bukan metode sebenarnya.

Saya kira itu berlaku di mana pengguna memilih opsi dalam komponen, dan komponen bergantung pada nilai itu untuk menunjukkan apa yang dipilih.
Anda mengandalkan komponen induk yang meneruskannya kembali ke komponen agar dapat melakukannya.
Kecuali, saat pengguna memilih opsi, Anda memicu pembaruan tampilan komponen secara manual. Yang tampaknya menjauh dari reaktivitas Vue.
Jadi memiliki nilai internal melacak apa yang 'seharusnya', minta template bereaksi terhadapnya. Gunakan setter/getter untuk membungkus properti untuk melacak perubahan internal & meningkatkan peristiwa eksternal, dan arloji di properti untuk memperbarui nilai internal saat diubah secara eksternal.

Mungkin saya hanya berjuang untuk mendapatkan cara baru untuk melakukannya.

@Towerful - Anda bukan satu-satunya ....

skot

@Menarik :

Bagi saya tampaknya apa yang Anda gambarkan pada dasarnya adalah komponen yang bertindak seperti input dengan v-model : pengguna mengubah beberapa nilai di UI, dan Anda ingin perubahan itu segera tercermin dalam data terikat.

Untuk jenis komponen ini, Anda dapat menggunakan v-model pada komponen di 2.0:

<my-input v-model="myValue">

// in my-input.vue
<input :value="value" @change="$emit('input', $event.target.value)">

export default {
  props: ['value']  //special prop received from v-model
}

Ini membuat antarmuka ke elemen <input> dan komponen input khusus pada dasarnya identik, dan pengikatan dua arah.

Untuk komponen yang lebih kompleks yang menerima banyak props (dan bukan input kustom sederhana, tetapi lebih abstrak), kami tidak menyarankan penggunaan .sync karena menjadi sulit untuk dipikirkan dalam kebanyakan situasi.

Orang tua harus memutuskan apa yang harus dilakukan dengan nilai yang diterimanya dari anak, datanya tidak boleh diubah secara implisit seperti yang dilakukan .sync .

Bisakah Anda memberikan contoh yang _not_ solvabel dengan pendekatan v-model di atas dan masih diuntungkan menggunakan .sync ? Itu mungkin dasar yang lebih baik untuk diskusi daripada teori abstrak.

Oh, bagaimana aku melewatkannya?! Itu pasti ada di OP, dan bahkan ada diskusi tentang ini beberapa komentar yang lalu! Sekarang saya merasa agak bodoh.
Bisakah posting asli diperbarui untuk membuatnya sedikit lebih jelas bahwa v-model dapat digunakan pada suatu komponen?
@LinusBorg Dari atas kepala saya, saya tidak bisa memikirkan kasus di mana v-model pada komponen tidak akan berfungsi. Saya melewatkan bagian itu di posting asli.
Bahkan untuk komponen objek yang rumit, itu hanya masalah komponen bersarang. Dan ini menegakkan kembali komponen tanggung jawab tunggal.
Itu jauh lebih masuk akal :)

@Menakjubkan

Re: menggunakan v-model . Masalahnya, v-model sinkron (dengan cara tertentu), sedangkan aliran data lintas komponen secara inheren tidak sinkron karena antrian pengamat ( demo ). Saya telah melihat ini membingungkan banyak orang. Aliran satu arah hanya membuatnya lebih eksplisit bahwa alat peraga tidak sinkron dan memaksa Anda untuk tidak bergantung pada mereka yang sinkron (inilah yang Anda coba untuk menipu jalan Anda).

Re: metode yang berantakan. Untuk kasus sederhana, Anda selalu dapat melakukan @value-updated="value = $arguments[0]" . Untuk kasus yang rumit, ada baiknya memiliki metode, di mana Anda dapat menyesuaikan status agar tetap konsisten (mis. memicu pembaruan secara manual). Segway ke titik berikutnya.

Re: menjauh dari reaktivitas. Saya tidak setuju dengan pernyataan ini. Untuk kasus sederhana, Anda tidak perlu sihir untuk membuat anak mengambil nilainya, diperbarui oleh value-updated="value = $arguments[0]" .

Untuk kasus yang rumit, dengan .sync props Anda harus menggunakan watch , tetapi watch eksplisit sebenarnya bukan bagian dari reaktivitas. Ini adalah pintu keluar, di mana Anda memicu pembaruan manual Anda yang tidak dapat dinyatakan sebagai dihitung. Dan itu tidak bagus, karena tidak dapat bereaksi terhadap perubahan secara serempak, seperti kaleng yang dihitung. Inilah sebabnya mengapa ketika menggunakan watch berlebihan, Anda mungkin menemukan pembaruan data Anda membutuhkan beberapa "centang" untuk disebarkan. Jika Anda pernah menemukan langsung bersarang nextTick , Anda tahu apa yang saya bicarakan.

Sekarang, -updated handler menyediakan jalan keluar yang lebih baik, membiarkan perubahan model yang rumit diterapkan secara sinkron (atau secara bersamaan secara asinkron) setelah anak menyatakan maksud, memastikan bahwa anak akan menerima nilai yang diperbarui pada centang berikutnya (atau tidak menerima keadaan tidak konsisten).

@yyx990803 Bisakah kita menerapkan cara untuk mendengarkan $emit, mirip dengan bagaimana kita mengadakan acara untuk $dispatch dan $broadcast di vuejs1?

Terasa lebih vuejs-esque, sesuatu seperti ini ('on' atau 'listen'):

Vue.component('cart', {
  template: "#cart-template",
  data () {
    return {quantity : 0 }
  },
  watch: {
    'quantity': function (quantity, oldQuantity) {
      console.log('quantity changed from %s to %s', oldQuantity, quantity)

      bus.$emit('cart.quantity-changed', quantity)
    }
  }
});

new Vue({
  el: '.container',
  data : function () {
    return {
      quantity: 0
    };
  },
  on: {
    'cart.quantity-changed': function (newQuantity) {
      console.log('quantity change emitted');

      Vue.set(self, 'quantity', newQuantity);
    }
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})

Ini pada dasarnya akan secara otomatis menempel pada bus global.

Bus Acara bukanlah pola yang ingin kami dorong - ini hanya berguna untuk beberapa kasus tepi. Umumnya, pola toko, seperti vuex, lebih disukai.

Menerapkan API yang membuat penggunaan bus lebih mudah dan terasa "didukung secara resmi" akan menjadi sinyal yang salah.

Melihat contoh Anda, jika Anda menyimpan kuantitas di toko yang diakses oleh kedua komponen, tidak ada peristiwa yang diperlukan. Properti yang dihitung dalam komponen container akan diperbarui secara otomatis.

Kode contoh sederhana tanpa menggunakan solusi toko nyata seperti vuex:

var store = {
  cart: {
    quantity: 0
  }
}
Vue.component('cart', {
  template: "#cart-template",
  data () {
    return store.cart
  },
});

new Vue({
  el: '.container',
  data : function () {
    return store.cart;
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})

Saya akan mengatakan ide umum dari vue2 adalah membuat lebih sulit untuk menembak diri sendiri
di kaki.

Pada Sun, Jul 3, 2016 at 11:24, Thorsten Lünborg [email protected]
menulis:

Bus Acara bukanlah pola yang ingin kami dorong - itu hanya
berguna beberapa kasus tepi. Umumnya, pola toko, seperti vuex, lebih disukai.

Menerapkan API yang membuat penggunaan bus lebih mudah dan terasa "resmi
didukung" akan menjadi sinyal yang salah.

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/vuejs/vue/issues/2873#issuecomment -230158828, atau bisukan
benang
https://github.com/notifications/unsubscribe/AACoukCpCgYlDbVej_w_h4NEhQ-imYHBks5qR9QwgaJpZM4IedHC
.

@kharysharpe $emit s dimaksudkan untuk didengarkan dengan v-on pada instance anak. Ini juga memiliki manfaat tambahan karena dapat memanfaatkan konteks asli tempat instance digunakan:

<list-item v-for="(item, index) in items"
  :title="item.title"
  @remove="items.splice(index, 1)"
>
</list-item>

Apakah ada tanggal untuk rilis 2.0? Saya cukup senang dengan perubahannya. Selamat!
Saya sedang berpikir untuk menggunakan Vue 2.0 + Redux.

@Sendoushi Belum ada tanggal rilis final, tetapi beta mungkin dalam waktu seminggu. Vuex 2.0 juga sedang dikembangkan bersama dan tidak hanya akan menampilkan API yang jauh lebih sederhana daripada vuex saat ini, tetapi juga terintegrasi ke dalam ekosistem Vue jauh lebih baik daripada redux.

Vuex 2.0 juga sedang dikembangkan bersama dan tidak hanya akan menampilkan API yang jauh lebih sederhana daripada vuex saat ini, tetapi juga terintegrasi ke dalam ekosistem Vue jauh lebih baik daripada redux.

@chrisvfritz Senang sekali mendengarnya! Saya selalu merasa API saat ini agak terlalu rumit dan tidak perlu. Akhirnya harus melakukan hal-hal seperti ini untuk mengimbangi:

const mutations = {
  LOGIN (state) { state.loggedIn = true },
  LOGOUT (state) { state.loggedIn = false }
}

export const types = Object.keys(mutations)

// For now we dynamically generate all the actions like this.
// It's rare when anything more complicated is needed, but there
// is an example here:
// http://vuex.vuejs.org/en/actions.html
export const actions = types.reduce((o, el) => {
  var action = S(el.toLowerCase()).camelize().s
  o[action] = ({dispatch}, ...args) => dispatch(el, ...args)
  return o
}, {})

Bagaimana dengan peta jalan vue 2 dan vuex 2. Apakah direncanakan untuk merilisnya bersama-sama atau satu sebelum yang lain dan bagaimana dengan kompatibilitas versi yang berbeda?

Berkaitan dengan pertanyaan di atas, bagaimana status vue-router -- apakah akan segera mendapatkan dukungan Vue 2 atau apakah pengujian Vue 2 perlu dilakukan tanpa router?

@gwildu Mereka kemungkinan akan dirilis bersama-sama dan Vuex 2.0 hanya akan mendukung Vue 2.0. Pre 2.0 Vuex masih akan menerima dukungan hingga Vue 1.x tidak lagi didukung.

@Uninen Vue Router akan menerima beberapa cinta berikutnya, sebelum rilis Vue 2.0.

Terima kasih atas infonya @chrisvfritz :)

@chrisvfritz @Uninen koreksi: Vuex 2.0 juga berfungsi untuk Vue 1.x.

Versi utama berikutnya dari vue-router hanya akan mendukung Vue 2.x.

Runtime only build: karena tidak menyertakan kompiler, Anda perlu melakukan pra-kompilasi template dalam langkah kompilasi, atau fungsi render yang ditulis secara manual.

Apakah ada / akankah ada cara untuk mengkompilasi template tanpa menggunakan file vueify/vue-loader dan .vue ? Jika tidak, apakah sebaiknya memiliki plugin babel untuk mengubah properti template: menjadi render fungsi dalam komponen?

Setelah memutakhirkan ke 2.0, apakah fitur yang tidak digunakan lagi dapat digunakan. Bisakah Anda meningkatkan ke 2.0 terlebih dahulu, lalu perlahan mengubah fitur yang tidak digunakan lagi?

Apakah mungkin untuk membuat komponen terminal, setelah elementDirective hilang?

Seperti yg disebutkan:

v-model tidak lagi peduli dengan nilai inline awal. Itu akan selalu memperlakukan data instance Vue sebagai sumber kebenaran.

Pertimbangkan itu

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value" />
  <label :for="_uid"><slot></slot></label>
</child-component>

Bagaimana saya bisa menangani kotak centang dengan array di antara komponen khusus?

_Diperbarui 1:_
Terpecahkan. Transfer prop type="checkbox" ke komponen anak di komponen induk.

<parent-component>
  <child-component type="checkbox" v-model="parentModel" value="apple"  />
  <child-component type="checkbox" v-model="parentModel" value="orange" />
  <child-component type="checkbox" v-model="parentModel" value="banana" />
</parent-component>

Kemudian Anda bisa mendapatkan nilai sebaris melalui {props: [ 'value' ]} .
Keluarkan acara change ke komponen induk untuk memberi tahu bahwa nilainya telah berubah.

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value"
    @change="$emit('change', $event)"
  />
  <label :for="_uid"><slot></slot></label>
</child-component>

Ini karena kompiler mengkompilasi direktif v-model sesuai dengan type . Dan kompilator akan menghasilkan prop checked dan mengikat event change padanya.

_Diperbarui 2:_
Namun, kait siklus hidup updated tidak terpicu karena v-model secara langsung mengubah atribut checked (Itu berarti Anda tidak bisa mendapatkan acara change dari komponen kotak centang html asli dengan memodifikasi nilai v-model ).
Jadi, @yyx990803 , dapatkah Anda memicu peristiwa change setelah v-model berubah?

@ YunSun-CN Satu-satunya cara saya bisa mengatasi masalah Anda adalah dengan menambahkan properti khusus untuk nilai, ala val, dan menggunakannya untuk mengatur nilai aktual, dan kemudian hanya memancarkan perubahan ke input v-model ' ' peristiwa.

@johnleider Saya menulis arahan khusus untuk mensimulasikan apa yang dilakukan v-model .
Omong-omong, Anda harus membuat model dengan cara yang ketat tidak hanya memeriksa prop type tetapi juga memeriksa tagName elemen. Jika tidak, komponen kustom lain dengan prop type dapat menimpa perilaku model defaultnya.

Hai. Apakah kita tahu tanggal rilis?

@thanosalexander Kami belum memutuskan tanggalnya, tidak. Kami baru saja memperkenalkan beberapa perubahan besar pada sistem Transisi dengan 2.0.0-bet.2, yang harus benar-benar diuji. Jadi masih akan ada beberapa minggu sampai kita bisa memikirkan rilis, menurut saya.

ok..aku akan pergi dengan ini..aku tidak berpikir langkah ke kandang akan terlalu besar! Terima kasih

Bagaimana dengan para dok? Salah satu alasan Vue diadopsi lebih awal adalah dokumentasinya dan itulah satu-satunya alasan yang menahan saya sekarang dengan v2. Saya melihat masalah menindaklanjuti dokumen, tetapi tidak melihat semakin dekat untuk segera selesai. Mungkin saya mengabaikan begitu banyak hal yang terjadi di bawah tenda, alasan mengapa mengajukan pertanyaan :)

Adakah rencana untuk menerapkan mode transisi di luar peralihan komponen di 2.0?
https://github.com/vuejs/Discussion/issues/156

@miljan-aleksic Docs akan siap ketika 2.0 akan dirilis secara resmi. Kami masih dalam versi beta. ;)

Sampai saat itu, Anda dapat mengikuti perkembangan dokumentasi di sini (atau bahkan berkontribusi)

@aristidesfl Sudah selesai. 🎉

@miljan-aleksic Menambah apa yang disebutkan @LinusBorg , sebagian besar panduan baru sudah lengkap dan Anda bahkan dapat membaca sumbernya di sini jika Anda mau. Ingatlah bahwa pada saat penulisan, ini belum sepenuhnya diperbarui untuk mencerminkan perubahan dalam beta.2 , tinjauan sejawat yang signifikan masih akan datang, dan ada beberapa perubahan API kecil lainnya yang sedang dipertimbangkan. Jadi, kecuali jika Anda ingin membantu memperbaiki kesalahan ketik dan meningkatkan penjelasan, saya sarankan menunggu hingga kami menerbitkannya secara resmi (mungkin dalam tahap RC).

Kami juga setuju bahwa dokumentasi yang sangat baik adalah bagian penting dari Vue. Bahkan Dan Abramov dari tim React menyukai dokumen kami. Itulah mengapa salah satu tujuan pribadi saya adalah bahwa 2.0 docs _bahkan lebih baik_. Sementara itu meskipun...

Bagi siapa saja yang ingin mempelajari 2.0 lebih awal, saya akan merekomendasikan pengujian unit fitur sebagai sumber daya paling mutakhir yang tersedia.

Itu salah satu sumber utama saya dalam menulis dokumentasi dan umumnya cukup mudah dibaca jika Anda terbiasa dengan Jasmine.

Terima kasih @chrisvfritz , informasi yang sangat berguna. Saya akan mencoba dokumen baru, dengan mempertimbangkan WIP, dan umpan balik yang diperlukan. Saatnya untuk serius tentang Vue 2.0 ;)

createElement dalam fungsi render menggunakan on tampaknya tidak menangani array (seperti halnya snabbdom) apakah ada cara untuk meneruskan data ke fungsi yang dipanggil?

Misalnya di snabbdom saya bisa menggunakan

{on:{click: [function, dataToPass]}}

Dan function akan mendapatkan dataToPass sebagai argumen pertama. Tapi ini sepertinya error di vuejs 2 beta 2 Uncaught TypeError: arr[i] is not a function . Apakah ada cara untuk melewatkan data & acara menggunakan elemen on from create?

@dubcanada penanganan acara di Vue 2.0 berbeda dari snabbdom - Anda harus mencari sendiri fungsinya. Sintaks array hanya melampirkan beberapa penangan ke acara yang sama.

Saya mencoba mendapatkan konten slot sebagai string alih-alih merendernya. Dengan node standar ada solusi yang mudah, tetapi dengan Vnodes saya tidak menemukan cara. Apakah ada solusi untuk itu?

@miljan-aleksic Coba render, dapatkan konten elemen dengan innerHTML , lalu sembunyikan elemen dengan display: none di css.

Terima kasih untuk bantuannya. Jika saya merendernya, hasil akhirnya akan berbeda. Saya membuat komponen yang akan membungkus konten turunannya dengan tag pre dan menyandikan HTML.

Dalam hal ini, render output dalam elemen yang berbeda dari aslinya.

Meskipun saya akan menegaskan bahwa templating tidak boleh menjadi cara Anda menulis konten. Ini harus menjadi cara dalam menggambarkan _bagaimana_ konten ditulis, dan bukan konten itu sendiri. Saya akan merekomendasikan menyimpan teks sebagai string di JS (atau sebagai sumber daya di tempat lain dalam proyek Anda, _terutama_ jika itu adalah input pengguna dari beberapa jenis), kemudian meneruskannya ke anak sebagai penyangga, yang seharusnya menghasilkan ribuan kali lebih mudah pula.

Anda benar @Kingdaro , yang terbaik adalah tidak mencampur konsep dan membuatnya tetap sederhana. Itu bagus untuk memiliki sintaks hihgligthig, meskipun :)

Bila menggunakan v-on direktif yang $arguments variabel tidak tersedia lagi. Saya tidak melihat referensi tentang perubahan itu di sini. Apakah ada bug atau referensi yang hilang?

@ miljan-aleksic pakai saja arguments .

Pasti seorang pengembang PHP (seperti saya)... Saya tahu bagaimana perasaan Anda. TERTAWA TERBAHAK-BAHAK!

skot

@yyx990803 , @smolinari saya... dan malu sekarang haha. Saya membuat diri saya percaya bahwa saya sudah mencobanya ... sepertinya saya tidak cukup baik. Ini bekerja, terima kasih dan maaf telah menghabiskan waktu Anda.

Saya akan membuka tiket tentang "masalah" lain tetapi tidak yakin lagi apakah itu... Saat menggunakan ref komponen atau elemen yang terdaftar tidak segera tersedia, jadi hal seperti ini tidak akan berfungsi.

<button ref="button"...></button>
<foo :connect="$refs.button"></foo>

Pada saat Foo dirender $refs.button masih belum ditentukan. Di Vue 1 berfungsi seperti yang diharapkan. Apa yang saya lewatkan kali ini?

Anda melewatkan bahwa Anda tidak boleh melewatkan elemen DOM atau instance komponen sebagai props...

Mengapa itu ide yang buruk? Katakanlah saya memiliki komponen Dropdown yang ingin saya sambungkan ke Tombol (pemicu). Keduanya merupakan komponen independen dan alih-alih menghubungkannya melalui kueri, saya meneruskan referensi secara langsung.

@miljan-aleksic bahkan lebih baik untuk menghubungkan mereka melalui status:

• status buka/tutup dipertahankan di induknya yang sama
• orang tua meneruskan status ke dropdown sebagai prop
• orang tua mendengarkan acara tombol untuk mengaktifkan status

Dengan cara ini dropdown dan tombol benar-benar dipisahkan, tombol dapat digunakan kembali untuk mengontrol jenis komponen lain, dan dropdown dapat dikontrol oleh jenis komponen input lainnya.

Memang tidak mudah untuk menghilangkan kebiasaan lama. Haruskah saya menyalahkan jQuery atau terutama saya? :D

Pendekatan Anda, Evan, benar. Saya akan melakukannya meskipun itu berarti integrasi Dropdown akan lebih membosankan. Karena komponen induk harus tahu tentang cara mendengarkan acara yang berbeda, tidak hanya tentang membuka tetapi menutup Dropdown ketika diklik di luar tetapi bukan dropdown itu sendiri, dll. Banyak acara dan solusi yang diselesaikan oleh Dropdown.

Karena komponen induk harus tahu tentang cara mendengarkan acara yang berbeda, tidak hanya tentang membuka tetapi menutup Dropdown ketika diklik di luar tetapi bukan dropdown itu sendiri, dll. Banyak acara dan solusi yang diselesaikan oleh Dropdown.

Masih bisa? Anda benar-benar dapat melakukan addEventListener('body', ... ) dari komponen dropdown untuk mendaftar klik luar dll... Dropdown dapat dengan mudah mengeluarkan acara 'tutup' untuk induk ketika seseorang mengklik di luar, misalnya.

Ya, ya. Saatnya memperbaiki beberapa komponen :) Terima kasih semuanya! Komunitas yang luar biasa.

Bagaimana cara menerapkan v-model ke komponen dengan createElement ? Saya melihat kode yang dihasilkan menggunakan kompiler template, dan...ada banyak kode. Saya tidak begitu mengerti dokumentasi di sana tentang arahan.

Secara default, arahan waktu kompilasi akan mengekstrak arahan dan arahan tidak akan ada saat runtime. Jika Anda ingin arahan juga ditangani oleh definisi runtime, kembalikan true dalam fungsi transformasi.

@blocka Anda tidak memiliki akses ke arahan render . Anda harus menangani sendiri logika yang setara. Misalnya v-if hanyalah ekspresi ternary, v-for adalah ekspresi array.map() ... dan v-model (pada elemen <input> normal ) diterjemahkan ke dalam value mengikat dan input pendengar acara.

@yyx990803 itulah yang saya pikirkan. Saya mungkin akan menyelesaikannya dengan HOC (saya sudah menyerahkan persyaratan dengan cara yang sama (walaupun saya berpikir untuk menggunakan this )

Dengan vue 1 ada dua keuntungan yang dinyatakan dari vuex vs redux.

1. Kinerja lebih baik karena vuex mengubah status, yang berfungsi paling baik dengan vue (mengganti status lama memiliki kinerja yang setara dengan "pemeriksaan kotor")
2. Vuex lebih "sadar" bahwa itu ada di aplikasi vue

Apakah menggunakan dom virtual mengurangi sebagian atau semua dari 1?

@blocka memang mengurangi sebagian, tetapi kinerja keseluruhan masih akan jauh lebih baik daripada dengan Redux.

Apa yang berubah di 2.0 adalah granularitas reaktivitas. Mari kita buat perbandingan:

• Di Vue 1.x, reaktivitasnya sangat halus. Setiap arahan dan setiap pengikatan teks memiliki pengamat yang sesuai. Hal ini menghasilkan pembaruan terperinci saat data berubah, tetapi dengan biaya overhead pelacakan ketergantungan yang lebih banyak pada render awal, dan penggunaan memori yang sedikit lebih tinggi.
• Dengan Redux, reaktivitas tidak memiliki granularitas sama sekali. Setiap kali ada perubahan, seluruh aplikasi perlu dirender ulang. Di React, pengikatan Redux melakukan beberapa optimasi pada container yang terhubung, tetapi pengguna masih perlu mengimplementasikan shouldComponentUpdate secara ekstensif untuk mendapatkan kinerja yang lebih baik.
• Di Vue 2.0, reaktivitas memiliki granularitas sedang. Setiap komponen memiliki pengamat terkait yang melacak dependensi komponen tersebut. Saat data berubah, hanya komponen yang bergantung pada perubahan yang perlu merender ulang DOM virtualnya. Ini pada dasarnya adalah skenario kasus terbaik untuk React, tetapi Anda tidak perlu melakukan apa pun untuk mencapainya di Vue 2.0.

Umumnya dengan 2.0, Anda akan melihat (dibandingkan dengan 1.x)

• pembaruan sedikit lebih lambat (tapi masih sangat cepat) untuk perubahan data kecil
• pembaruan yang lebih cepat untuk perubahan data sedang hingga besar
• render awal yang jauh lebih cepat

Hai,
saya tidak mendapatkan transisi dengan animasi.css untuk bekerja.

<transition enterClass="fadeIn" leaveClass="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>

Apakah seseorang punya ide?

Nama prop Anda salah.

camelCase vs kebap-case masih berlaku di 2.0.

<transition enter-class="fadeIn" leave-class="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>

@LinusBorg Maaf, saya sudah mencobanya. Di sini saya punya biola kecil. Dengan transisi css dan tag nama berfungsi dengan baik.
https://jsfiddle.net/z0nyfba0/

Saat menggunakan v-model pada suatu komponen, apakah komponen tersebut akan memiliki visibilitas ke pengubah apa pun yang digunakan dengan v-model ?

misalnya jika saya memiliki komponen yang memancarkan peristiwa input , kapan peristiwa itu dipancarkan tergantung pada apakah pengubah lazy digunakan atau tidak.

@fergaldoyle saya bermain dengan ini sedikit dan saya pikir Anda tidak dapat menggunakan pengubah model-v pada elemen khusus karena Anda perlu memancarkan acara input secara manual. Jika Anda ingin mencapai perilaku malas, Anda perlu mengikat acara change ke input misalnya https://jsfiddle.net/cynhtLty/1/

@calebboyd

https://jsfiddle.net/Linusborg/z0nyfba0/1/

1. Anda harus menggunakan enter-active-class dan leave-active-class
2. Anda harus meletakkan class="animated" pada elemen <router-view> .

@fergaldoyle Menurut 1.0 docs, saya pikir dengan lazy , v-model hanya akan bereaksi change bukannya input . Anda dapat menggunakan ini untuk mengubah perilaku, dan memancarkan input atau change untuk memberikan hasil yang berbeda tergantung pada apakah lazy diberikan atau tidak.

Saya telah menggaruk-garuk kepala saat bermain-main dengan contoh sederhana v-for . Untuk beberapa alasan pengikatan value tidak berfungsi untuk elemen select di 2.0: https://jsfiddle.net/972eL5fL/

Juga mungkin harus dicatat dalam dokumen bahwa rentang v-for seperti "i in 10" mulai dari 1 bukannya 0 seperti pada 1.0.

@lauritzen

Saya telah menggaruk-garuk kepala saat bermain-main dengan v sederhana misalnya. Untuk beberapa alasan pengikatan nilai tidak berfungsi untuk elemen tertentu di 2.0: https://jsfiddle.net/972eL5fL/

Tampaknya berfungsi seperti yang diharapkan untuk saya, apa yang tidak berhasil untuk Anda?

Pengumuman Layanan Masyarakat

Kami mendorong Anda untuk mengajukan pertanyaan dukungan di forum atau di gitter .

Masalah ini harus dicadangkan untuk diskusi tentang API baru. Jika kami menangani dukungan untuk berbagai pertanyaan di sini, ini akan menjadi tidak terkendali.

Terima kasih.

Mengapa vm.$get tidak digunakan lagi?
Mengapa bukan Vue.get saja?
Ini sangat berguna untuk mengevaluasi ekspresi yang dihitung seperti ini
var exp = 'entity.type.name' // this is generated in runtime return vm.$get(exp)

@iagafonov tidak ada banyak skenario di mana ini berguna, oleh karena itu tidak boleh menjadi bagian dari inti.

Jika Anda memerlukan fungsionalitas untuk salah satu dari beberapa skenario, Anda dapat dengan mudah menambahkan perilaku serupa dengan bantuan misalnya lodash:

import get from 'lodash/get';
Vue.prototype.$get = get

//in any component
var value = this.$get(this.someObject,'some.path.to.value')

(tentu saja Anda juga dapat menambahkannya sebagai "metode kelas" sebagai Vue.get() - atau cukup mengimpornya secara lokal di mana Anda membutuhkannya -pilihan Anda)

@LinusBorg. Pertama-tama, saya tidak menggunakan lodash atau semacamnya.
Kedua implementasi lodash lambat, karena dalam run-time mencoba untuk jauh ke dalam struktur ekspresi. vue mematuhi fungsi baru yang ditentukan (oleh parseExpression), terikat ke ruang lingkup.
Ini bukan bagian yang sepele, sangat sulit untuk menerapkannya kembali.
Tentu saja, $get fungsi kompilasi setiap waktu). Akan lebih baik jika parseExression menjadi bagian dari api di Vue.util, misalnya.

@iagafonov this.$get juga harus mengurai jalur saat runtime dan mengambil nilai secara dinamis. Kalau tidak, Anda akan mendapatkan kesalahan jika jalurnya tidak ada. Juga perbedaan kinerja akan diabaikan dalam banyak kasus. Jika Anda tidak ingin lodash, ada banyak perpustakaan pengambilan jalur lain di luar sana. Itu bukan bagian dari perhatian Vue lagi.

Apa saja alternatif untuk atribut param yang sekarang tidak digunakan lagi?

apakah Anda berbicara tentang params dalam arahan? Kemudian Anda dapat menemukan semua atribut yang diikat di dalam objek vnode

<button v-test="123" color="red" type="button">click me</button>

bind (el, binding, vnode) {
 // vnode.data.attrs -> { color: 'red' }
}

@sqal , apakah ini sebagai balasan atas pertanyaan saya? Jika demikian, saya berbicara tentang atribut param seperti lazy, number, dan debounce. Misalnya, sebelum 2.0, saya bisa melakukan ini <input type="text" v-model="msg" number> (nomor menjadi atribut param di sini). Bagaimana saya bisa mendapatkan hasil yang sama tanpa menggunakan atribut param?

@p-adams disebutkan dalam posting - mereka adalah pengubah sekarang <input v-model.number="msg">

Saya menemukan di Vue 2.0, ketika props berubah, fungsi render selalu dipanggil, jadi saya ingin tahu apakah 2.0 akan mendukung shouldComponentUpdate untuk memutuskan apakah merender ulang.

@yyx990803 Oke, saya melihatnya sekarang di pos The lazy and number params are now modifiers .

@HeChenTao Evan menjelaskan ini sedikit di sini https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.pc5c8urbv

@HeChenTao fungsi render tidak "selalu" dipanggil, hanya jika diperlukan:

• Vue tidak membutuhkan shouldComponentUpdate , karena Reaktivitasnya.
• Ketika data reaktif yang digunakan dalam komponen diubah, ini akan memicu fungsi render, diffing vdom, dan sebagainya.
• Tetapi jika tidak ada data yang berubah, pembaruan tidak diperlukan dan fungsi render akan _not_ dipanggil.

Hal yang sama dapat dilakukan dalam bereaksi dengan mobx. Saya cukup yakin bahwa Anda tidak perlu mengimplementasikan shouldComponentUpdate . Namun, seperti vue, mobx bersikeras pada keadaan yang bisa berubah. Jika, karena alasan tertentu, Anda telah menerima konsep negara yang tidak dapat diubah. Dalam hal ini, reaksi mendukung Anda dengan shouldComponentUpdate .

Jadi apakah itu berarti jika seseorang bersikeras pada keadaan yang tidak dapat diubah, vue tidak akan menjadi pasangan yang baik?

Argumen konteks Komponen Fungsional memiliki children plus slots . Saya merasa sedikit membingungkan mengetahui bahwa children() dan slots().default sama persis. Membuat saya bertanya-tanya apa pendekatan yang benar. Mungkin 'anak-anak' sebagai slot itu malas, tetapi mengapa masih mendukung dua cara berbeda untuk mendapatkan perilaku yang sama?

Komponen fungsional hanyalah fungsi dan karenanya tidak memiliki anak. IMHO, anak-anak harus ditinggalkan dan simpan saja slotnya agar tidak malas.

@blocka Anda dapat menerapkan data reaktif dalam reaksi dengan mobx, benar. Tetapi reaktivitas adalah inti dari fungsionalitas Vue. Jadi jika itu bukan secangkir teh, orang itu berada di pihak yang salah.

@miljan-aleksic children mentah (Anda mendapatkan setiap node terlepas dari slot apa yang harus mereka masuki), slots akan diselesaikan berdasarkan nama slot pada anak-anak yang masuk.

Terima kasih @yyx990803. Mungkin detail lebih lanjut tentang ini di dokumen akan menghindari kebingungan, @chrisvfritz.

@ miljan-aleksic Saya akan menambahkan catatan. 👍

Mengenai filter, menggunakan properti yang dihitung tampaknya cukup mudah, tetapi bagaimana menangani kasus penggunaan filter dengan v-model. Jika seseorang ingin menyaring daftar nama dengan mengetik di kolom input, bagaimana ini bisa dilakukan di 2.0?

Pikiran tentang memiliki Vue memperingatkan ketika bidang data/properti yang dihitung tidak digunakan dalam template? Saya membayangkan ada beberapa batasan di sini, tetapi akan sangat membantu untuk mengetahui di mana saya mampu menarik beberapa impor toko yang tidak berguna di tempat yang tidak diperlukan.

@yyx990803 , apa pendapat Anda tentang menyetel referensi $context ke prototipe Komponen? Sama seperti dengan $parent atau $root saya menemukan diri saya sering mengakses konteks yang saat ini hanya tersedia melalui objek $vnode .

Sebenarnya itu sepertinya bukan cara yang dapat diandalkan untuk mengakses konteks. Bagaimana seharusnya dilakukan?

@miljan-aleksic Bisakah Anda membagikan kasus penggunaan di mana Anda sering mengakses konteks?

@Kingdaro Bisakah Anda membuka masalah untuk itu? Kedengarannya bagus jika itu bisa dilakukan.

@p-adams Anda masih dapat menggunakan properti yang dihitung dengan Array.prototype.filter .

@chrisvfritz , pada dasarnya untuk solusi seperti misalnya untuk mengatur variabel dalam konteks yang diharapkan anak. Atau untuk menyetel referensi ke komponen sebelumnya yang dilakukan Vue sendiri.

Saya setuju tidak umum untuk semua, tetapi setidaknya harus ada cara yang dapat diandalkan untuk mengaksesnya di dalam komponen. $vnode tidak ada sampai komponen dipasang saat menggunakan templat (setidaknya kesimpulan saya sejauh ini).

Saya akan puas mengetahui cara mengaksesnya dengan cara yang benar.

Situasi lain di mana $context akan berguna adalah saat menggunakan kembali komponen sebagai root dari komponen lain.

<template>
  <Foo>
    <child/>
  </Foo>
</template>
<script>
{ name: 'Bar' ... }
</script>

Dalam contoh child.$parent akan mengembalikan komponen Foo alih-alih Bar, yang mana benar tetapi jika orang tua dan anak saling bergantung, komunikasi langsung di antara mereka bisa melalui konteks.

@miljan-aleksic Saya akan menyerahkan yang ini kepada @yyx990803. Saya akan mengatakan bahwa seperti halnya $parent , meraih $context mungkin akan menjadi cara yang salah 99,9% dari waktu dan saya pikir saya mungkin tidak akan pernah menggunakannya.

Saya memiliki situasi dengan v-show dan transisi. Dalam skenario ini ada modal yang secara default adalah 'display: none' di CSS. Ketika digabungkan dengan v-show itu tidak akan pernah ditampilkan karena arahan menghapus properti tampilan, yang CSS kemudian bertahan. Saya tidak dapat mengubah CSS (persyaratan proyek) dan saya tidak dapat menggunakan arahan khusus karena tampaknya transisi Vue bergantung secara khusus padanya.

Saya berpikir sekarang bahwa arahan yang mengevaluasi tepat setelah v-show dapat mengatur properti tampilan untuk diblokir. Perlu mencobanya, tetapi bagaimanapun juga, itu bisa menjadi ide yang baik untuk menambahkan pengubah ke v-show untuk memungkinkan pengaturan tampilan untuk memblokir atau inline-block. Hanya pemikiran saja.

@chrisvfritz , diharapkan untuk komponen fungsional referensi induk bukan induk langsung di mana mereka digunakan sebagai slot, tetapi komponen konteks sebagai gantinya?

Kompilasi template gagal jika berisi "<" (dan mungkin karakter sensitif html lainnya) di 2.0.0-beta7

https://jsfiddle.net/x0r59ur1/

Ini bekerja di 1.0.26.

Melarikan diri dari "<" dengan "<" memecahkan masalah.

@GlurG diharapkan untuk keluar dari "<" dengan benar.

@yyx990803 , jika saya ingin menggunakan transisi pada daftar komponen dengan tipe yang sama dan mempertahankan

Katakanlah komponen Tab dan transisi itemnya. Saya tidak dapat menemukan cara :(

<tabs>
  <transition>
    <tabs-item>Content 1</tabs-item>
    <tabs-item>Content 2</tabs-item>
    <tabs-item>Content 3</tabs-item>
  <transition>
</tabs>

@miljan-aleksic <transition> hanya untuk elemen tunggal. Anda membutuhkan <transition-group> untuk beberapa item.

@yyx990803 , mencoba yang itu juga, tetapi masih tidak melihat bagaimana mencapainya. Grup transisi bekerja dengan menambahkan/menghapus elemen tetapi saat melakukannya komponen akan dimulai lagi, kehilangan status. Selain ide Tab adalah untuk menampilkan hanya satu komponen pada satu waktu, itu bukan daftar :)

@yyx990803 , @LinusBorg Saya menghargai bantuannya tetapi solusinya tidak jelas. Saya tahu bagaimana transisi diterapkan, yang tidak dapat saya pahami adalah bagaimana keep-alive komponen yang ditransisikan.

Saya telah membuat masalah baru demi kejelasan dengan contoh jsfiddle tentang bagaimana komponen dibuat setiap kali.

@yyx990803 , terima kasih banyak telah meningkatkan fitur keep-alive, sekarang berfungsi seperti yang diharapkan.

Anda benar-benar mengubah hidup saya, dengan produk dan etos kerja Anda, saya bisa belajar, membangun, dan mengirimkan produk yang sudah lama saya standby. Dengan pendekatan Anda yang sederhana, teknologi tinggi tersedia untuk digunakan dan dikembangkan oleh semua orang. Untuk semua itu dan lebih lagi, saya selamanya berterima kasih.

@ miljan-aleksic Ada kampanye Patreon wink wink .

Anda tahu apa @phanan , Anda benar sekali. Saya sudah mulai mendukung Evan secara pribadi dan segera setelah produk perusahaan mulai memberikan hasil akan memastikan dukungan menjadi lebih terlihat.

Kait siklus hidup ready tidak digunakan lagi dan digantikan oleh mounted ; tetapi menurut changelog tidak ada jaminan bahwa komponen akan dirender sebelum mount dipanggil. Ini menyebabkan kesalahan sporadis ketika saya ingin menginisialisasi komponen jquery tertentu (seperti pilih) setelah komponen diinisialisasi. Kait siklus hidup mana yang harus saya gunakan sebagai gantinya? Bisakah kait "siap" ditiru seperti ini:

function mounted() {
  Vue.nextTick(() => {
    //...
  });
}

@GlurG Ya, itu akan berhasil. Dan omong-omong, itu juga perlu dengan ready'() dalam 1.0 dalam banyak kasus.

Apakah ada alasan mengapa tidak ada kaitan untuk ini? saya juga
melewati ini...bahkan di 1.0, dan menggunakan hal-hal seperti mengulang dengan raf to
periksa apakah ada di dom, dll.
Pada 10 Agustus 2016 18:26, "Thorsten Lünborg" [email protected]
menulis:

@GlurG https://github.com/GlurG Ya, itu akan berhasil. Dan ngomong-ngomong,
itu juga perlu dengan ready'() di 1.0 dalam banyak kasus.

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/vuejs/vue/issues/2873#issuecomment -238903012, atau bisukan
benang
https://github.com/notifications/unsubscribe-auth/AACounAoI8p65soUUrbdaiwteDXKgMGJks5qee25gaJpZM4IedHC
.

Saat menggunakan fungsi render, arahan inti diabaikan, yang masuk akal. Tetapi beberapa tidak begitu mudah untuk direproduksi menggunakan js biasa, seperti v-model yang memiliki solusi untuk IE9 dan mungkin memecahkan masalah kasus tepi lainnya.

Itu membuat Anda mempertimbangkan kembali untuk menggunakan templat, tetapi itu tidak mungkin atau opsi terbaik dalam beberapa situasi. Dokumen pasti dapat menawarkan lebih banyak panduan tentang topik ini dan selain itu mungkin ide yang baik untuk memiliki beberapa pembantu ketika bekerja dengan fungsi render yang akan membantu memecahkan situasi umum ini dan membuat tidak ada yang melewatkan template.

@miljan-aleksic maaf, saya menghapus komentar saya karena saya perhatikan itu hanya berfungsi untuk v-show atau arahan khusus, dan ya, seperti yang Anda katakan dalam kasus v-model, diperlukan untuk menambahkan input/mengubah pendengar dan memperbarui data kami secara manual

apakah pengait activated seharusnya dipanggil ketika rute diaktifkan yang mengaktifkan/memasang router-view ? Saya tidak melihat perilaku ini saat ini.

@wprater tidak, ini hanya terkait dengan <keep-alive> dan tidak ada yang lain.

@ yyx990803 Saya membungkus tampilan router saya dengan tetap hidup, tetapi sepertinya saya tidak dapat menemukan pengait ketika saya merutekan kembali ke tampilan sebelumnya. mounted atau activated dipanggil. Saya perlu memastikan dom diberikan.

@wprater tolong hindari menggunakan utas ini untuk pertanyaan yang tidak terkait. Jika ada bug, masalah file di repo yang sesuai dengan reproduksi.

Apakah Vue JSX mendukung operator penyebaran objek? Saya sudah mencobanya tetapi tidak berhasil.

Itu benar dan @yyx990803 berusaha keras untuk membuatnya berfungsi.

Saya melakukan ini <Component {...{ props } }></Component> dan berfungsi seperti yang didokumentasikan.

@blocka Terima kasih! Saya pikir nama properti props tidak diperlukan 😂

@yyx990803
Opsi components tidak mendukung tipe larik, tetapi berfungsi di 1.x.

misalnya

var Parent = Vue.extend({
  name: 'parent',
  template: '<div><slot></slot></div>'
})

var Child = Vue.extend({
  name: 'child',
  template: '<span>hello</span>'
})

new Vue({
  el: '#app',

  components: [
    Parent,
    Child
  ],

  replace: false,

  template: '<parent><child></child></parent>'
})

Ini bug?

@ QingWei-Li mereka tidak didukung lagi, karena itu tidak pernah menjadi fitur yang didokumentasikan secara resmi. Alasannya adalah dengan ES2015 Anda cukup menulis components: { Parent, Child } .

hanya saran kecil,
apakah ada peluang untuk iterasi array normal yang kami gunakan v-foreach dan untuk rentang kami gunakan v-for .

yang akan lebih masuk akal bagi pengguna yang berasal dari php dan bahkan konsisten dengan .each di JQ atau foreach di JS

@ctf0 Kami berada di tahap RC, API tidak akan berubah lagi. Dan kami juga tidak akan memperkenalkan sintaks alternatif untuk melakukan hal yang sama.

Saya tidak berpikir bahwa mental overhead v-for="item in items" cukup signifikan untuk menjamin itu.

Dengan versi baru ini, saya ingin Anda menangani kasus ini.

Saya memiliki komponen kalender (berasal dari semantik ui), yang menggunakan input teks klasik, dan menunjukkan tanggal dalam format manusia (seperti "10 Juli 2016" misalnya). Dengan v1.0, saya menggunakan filter dua arah untuk mengubah string itu menjadi tanggal yang tepat sehingga data objek saya langsung siap untuk dikirim. Tetapi karena filter tidak akan berfungsi lagi di v-model, bagaimana saya bisa melakukan hal yang sama sekarang di v2.0?

Terima kasih

@shadowRR apakah mungkin untuk melihat beberapa kode?

@p-adams Tentu. Ini dia.

Pertama, filter saya, yang digunakan pada model-v saya untuk input kalender saya. Satu-satunya tujuannya adalah untuk menulis, ketika nilainya berubah, tipe tanggal yang tepat untuk data saya (tanggal postgres).

Vue.filter( 'formatDate', {
        read( date ) {
            return date;
        },
        write( date ) {
            if( !date ) return null;
            return moment( date, 'D MMMM YYYY' ).format( 'YYYY-MM-DD' );
        }
    } );

Dan saya ingin Anda menggunakannya seperti ini di komponen saya (input memiliki sistem kalender yang mengembalikan tanggal saya dalam format yang dapat dibaca manusia)

<div class="required field">
        <label>Start date</label>
         <div class="ui calendar">
                 <div class="ui input left icon">
                      <i class="calendar icon"></i>
                      <input v-model="section.start | formatDate" type="text">
                 </div>
         </div>
</div>

Saya sarankan membaca posting @ yyx99803 di sini: https://github.com/vuejs/vue/issues/2756 di mana ia membahas filter dua arah pada v-model . Juga, mungkin lebih baik untuk mengajukan pertanyaan seperti ini di sini: http://forum.vuejs.org/

Saya melewatkan posting yang Anda bicarakan, akan melihatnya, terima kasih;)

Hai,
Saya memiliki beberapa keraguan dalam kait siklus hidup baru.
Jika saya ingin mendaftarkan event handler saat dipasang, dan membatalkan pendaftaran sebelum melepas, bagaimana cara membuatnya berfungsi? Tambahkan cek & logika di kait yang dibuat & sebelum Hancurkan?
Di Vue 1.x saya akan menggunakan kait yang terpasang & terlepas.
Tetapi di 2.0 ada kait yang dipasang tetapi tidak ada kait yang dilepas. Terasa agak tidak sesuai.
Apakah ada alasan mengapa tidak ada kait unmount yang disediakan?

@f15gdsy mounted sesuai dengan destroyed . Tidak ada bagian penghitung attached / detatched di 2.0 - Anda perlu melakukan pemeriksaan in-dom sendiri. Jika acara Anda tidak peduli dengan in-dom/off-dom maka mounted dan beforeDestroy adalah tempat yang tepat untuk melakukannya.

Saat digunakan pada komponen khusus, v-on sekarang hanya mendengarkan peristiwa khusus $ yang dipancarkan oleh komponen tersebut. (tidak lagi mendengarkan acara DOM)

Saya mungkin melewatkan beberapa posting di sini, tetapi apa keputusan desain di balik ini?
Itu akan membuat peristiwa klik sederhana yang mengikat pada komponen menjadi sangat verbose..

1.0:

<foo @click="bar"></foo>

2.0:

<div @click=bar>
  <foo></foo>
<div>

@fnlctrl , gunakan pengubah asli: @click.native="bar" .

@miljan-aleksic Terima kasih banyak! Saya pikir pengubah ini harus ditambahkan ke Directives -> v-on -> modifiers dalam masalah ini

Bisakah saya menggunakan Koa(1.x atau 2.x) sebagai server? Apakah ada masalah pada vue-server-renderer dengan Koa?

@yyx990803

import Vue from 'vue'

Vue.component('expanding', {
  functional: true,
  render (createElement, { children }) {
    const data = {
      props: {
        name: 'expanding',
      },
      on: {
        beforeEnter ($el) {
          $el.classList.add('collapse')
          console.log('beforeEnter')
        },
        enter ($el) {
          $el.classList.remove('collapse')
          $el.classList.add('collapsing')
          $el.style.height = `${$el.scrollHeight}px`
          console.log('enter')
        },
        afterEnter ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse', 'in')
          console.log('afterEnter')
        },
        beforeLeave ($el) {
          $el.classList.add('collapsing')
          $el.classList.remove('collapse', 'in')
          $el.style.height = 0
          console.log('beforeLeave')
        },
        leave ($el) {
          console.log('leave')
        },
        afterLeave ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse')
          $el.style.display = 'none'
          console.log('afterLeave')
        }
      }
    }
    return createElement('transition', data, children)
  }
})

        <a href="#" :aria-expanded="showItem ? 'true' : 'false'" @click="showItem = !showItem">
          <span class="icon is-small"><i class="fa fa-table"></i></span>
          Tables
          <span class="icon is-small is-angle"><i class="fa fa-angle-down"></i></span>
        </a>
        <expanding appear="true">
          <ul v-show="showItem">
            <li>
              <router-link to="/tables/basic">Basic</router-link>
            </li>
            <li>
              <router-link to="/tables/handsontable">Handsontable</router-link>
            </li>
          </ul>
        </expanding>

Mengapa tidak memanggil kait masuk?

@fundon Anda harus mengajukan pertanyaan di forum atau obrolan gitter

Mengunci utas ini karena:

1. Kami sekarang dalam pembekuan API di RC sehingga dokumen ini tidak akan diperbarui lagi.
2. Terlalu banyak orang yang menggunakan ini sebagai utas FAQ umum, yang bukan untuknya.

Jika Anda memiliki bug, silakan buka masalah terpisah mengikuti panduan pelaporan masalah, jika Anda memiliki pertanyaan, silakan gunakan forum atau gitter.

Pembaruan : Untuk daftar perubahan yang lebih pasti dan terperinci di 2.0, lihat panduan migrasi baru.