Vue: [2.0] Template untuk komponen fungsional

Kami sudah memiliki ini sebagai opsi di peta jalan kami. Namun, kami akan menunda ini hingga 2.0 keluar dari fase pasca-rilis saat ini dan semua pekerjaan yang tersisa di ekosistem untuk 2.0 telah selesai, karena ini akan melibatkan banyak pekerjaan untuk memperbaiki, menguji, dan sebagainya (juga , membuat vue-loader/vueify bekerja dengannya, dll. pp.)

Terima kasih untuk PoC, sepertinya membantu!

Ya silahkan.
Aku sedang melihat persis itu. Bagi saya, fungsi render terlalu berlebihan dan "terasa" terputus-putus dari keseluruhan komponen file tunggal.

Apa yang paling berguna bagi saya adalah memasukkan css ke komponen fungsional.

Bisakah kita mendapatkan pembaruan status pada komponen file tunggal fungsional ini? Saya berasal dari React dan agak merindukan ini.

Ini akan segera datang.

Adakah yang bisa menjelaskan untuk n00b apa yang baru dengan ini terhadap apa yang kita miliki sekarang?

Anda akan dapat membuat komponen fungsional dengan file .vue seperti ini:

<template functional>
  <div class="test">
    <h1>{{props.msg}}</h1>
    <h2>Static content</h2>
    <span v-for="n in 10">{{n}} </span>
    <button @click="console.log('click', props.msg)"><slot></slot></button>
  </div>
</template>

<script>
export default {
  props: ['msg'],
}
</script>

<style scoped>
.test {
  margin: 12;
}
</style>

Ahh oke terima kasih!!

Itu terlihat bagus. Adakah gagasan tentang jangka waktu kapan fitur ini akan dirilis?

Ini akan membuat komponen fungsional jadi lebih mudah digunakan!

ada update tentang topik ini? apakah itu akan menjadi bagian dari rilis 2.3?

@Akryum Apakah Anda tahu status masalah ini? Sepertinya sudah dalam limbo selama berbulan-bulan. Adakah yang bisa kita lakukan untuk membantu memindahkan ini?

/ping @blake-newman

Apakah ada berita tentang fitur ini?

Tampaknya pekerjaan ini dimulai pada bulan Februari: https://github.com/vuejs/vue/tree/feature/fn-templates

Apakah ada pembaruan tentang ini? Sudah dibuka beberapa saat sekarang - apakah ada yang bisa dilakukan untuk membantu memindahkan masalah ini?

@Akryum sejak penggoda Anda kembali pada bulan Februari, ini tampak mati di dalam air. @blake-newman Saya melihat Anda melakukan ping beberapa bulan yang lalu, apakah Anda memiliki informasi tentang masalah ini?

Maaf jika ini semakin mengganggu, saya hanya ingin tahu bagaimana kita bisa mewujudkannya :)

@scottbedard Saya sedang mengerjakannya, ada beberapa gotcha tersembunyi. Namun, ini hanya dapat didokumentasikan sebagai fitur yang tidak dapat digunakan. Pekerjaan telah dilakukan beberapa waktu yang lalu dan sayangnya tidak dipetakan ke status sistem rendering saat ini sehingga pekerjaan perlu dilakukan.

@vuejs/collaborators Apa pendapat Anda tentang fitur ini secara keseluruhan, apakah upaya pengembangan dan biaya tambahan untuk inti sepadan dengan fitur ini?

Saya pikir itu bagus untuk memiliki fitur, karena cara default untuk menulis komponen menggunakan template. Dan IMHO memisahkan semua fungsi rendering dari komponen (digunakan dalam kompiler template) akan bagus.

Masalahnya adalah cakupan penggunaan template secara fungsional terbatas, lebih dari menggunakan fungsi JSX/Render. A

Saya pikir pada titik membangun komponen fungsional, kendala dan pola desain tidak sesuai dengan model template. Fitur ini memerlukan sedikit waktu proses tambahan (https://github.com/vuejs/vue/commit/f63203310f01e9f0813e0316c308f9f21d0ee717#diff-4d479bb000ed54582de8e4cd8318ef64R157) dan tidak akan pernah memiliki kinerja yang sama dengan fungsi render murni.

Mengaktifkan fitur ini akan mengasumsikan kinerja yang lebih baik, dibandingkan dengan fungsi render murni, ini tidak benar. Sikap saya pada fitur saat ini, adalah bahwa itu hanya akan memberdayakan template untuk digunakan fungsionalitas tetapi tidak memberikan imbalan yang sebenarnya.

Juga, akan menyenangkan untuk memiliki dukungan gaya cakupan untuk komponen fungsional tetapi mungkin tidak terkait.

Itu tidak berhubungan, saya percaya itu berhasil. Saya pernah mengerjakan itu sebelumnya. Kecuali ada regresi?

Komponen fungsional Vue sedikit jelek dibandingkan dengan React. template jauh lebih fungsional daripada jsx . Mungkin Anda bisa meminjam vue-loader untuk proses konversi, semoga seperti ini :

<script functional>
const DumbCmp = props => (
  <Button>{props.label}</Button>
);

export default DumbCmp;
</script>

sebenarnya, beberapa orang telah melakukan serval ini beberapa bulan yang lalu https://github.com/nickmessing/babel-plugin-jsx-vue-functional

Inikah yang kita tunggu-tunggu? https://github.com/vuejs/vue/commit/ea0d227d2ddfa5fc5e1112acf9cd485b4eae62cb

Ya, Vue 2.5 + vue-loader 13.3 akan memiliki dukungan yang tepat untuk kompilasi template, CSS yang dicakup, dan hot-reload untuk komponen fungsional :)

Apakah mungkin untuk mengeluarkan $ dari komponen fungsional?

Kecuali saya salah, jawaban singkatnya adalah tidak. Komponen fungsional bukan turunan, dan karena itu tidak memiliki metode.

Melalui beberapa peretasan, saya yakin Anda benar-benar dapat memancarkan. Objek konteks yang diterima render fn berisi parent yang harus selalu menjadi instance vue. Anda dapat memilih context.parent.$emit() atau context.parent.$root.$emit() untuk mengambil pendekatan yang lebih global. Seperti yang Anda lihat, ini bukan peristiwa yang dipancarkan dari komponen fungsional, jadi tergantung pada kasus penggunaan Anda, ini mungkin bukan solusi terbaik.

Hei, saya sedang meneliti untuk mengoptimalkan beberapa elemen Dasbor kami dan membuat fungsi komponen SFC terdengar luar biasa, tetapi saya tidak akan dapat memiliki metode atau alat peraga yang dihitung di sana, bukan?
Jika saya menggunakan fungsi render atau JSX, setidaknya saya bisa mendefinisikannya di dalam fungsi render itu sendiri, benar?

Apakah mungkin untuk mengeluarkan $ dari komponen fungsional?

Anda dapat mengakses objek listeners pada konteks fungsional . Sebagai contoh:

<my-functional-component @request-something="onRequestSomething" />

Panggil pendengar seperti metode di dalam my-functional-component :

listeners['request-something'](42)

Jika saya menggunakan fungsi render atau JSX, setidaknya saya bisa mendefinisikannya di dalam fungsi render itu sendiri, benar?

Ya.

@Akryum terima kasih. Komponen fungsi berat template yang lebih besar dan lebih banyak mungkin lebih baik dengan JSX karena fungsi render standar akan membuat segalanya sedikit lebih sulit untuk dibaca. Tutorial yang lebih maju tentang ini akan sangat manis :)

Anda tidak perlu lagi menggunakan fungsi render dengan komponen fungsional.
Anda dapat menggunakan template

Pada Jumat, 5 Januari 2018 pukul 4:53 pagi, Dobromir Hristov [email protected]
menulis:

@Akryum https://github.com/akryum terima kasih. Lebih besar, lebih berat template
komponen func mungkin lebih baik dengan JSX karena render standar
fungsi akan membuat segalanya sedikit lebih sulit untuk dibaca. Tutorial yang lebih canggih
pada ini akan sangat manis :)

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355514921 , atau bisukan
benang
https://github.com/notifications/unsubscribe-auth/AACouk0kTLUHRjQDnXj2vn2v4Rq7maXOks5tHfExgaJpZM4KaIfu
.

@blocka bagaimana Anda akan menggunakan fungsi untuk melakukan sesuatu? instantiate grafik misalnya?

kecuali jika Anda merender bagan sepenuhnya dengan vnodes, Anda akan memerlukan
komponen reguler dengan metode siklus hidup untuk melakukan itu

Pada Jumat, 5 Januari 2018 pukul 05:41, Dobromir Hristov [email protected]
menulis:

@blocka https://github.com/blocka bagaimana Anda akan menggunakan fungsi untuk melakukannya
sesuatu? instantiate grafik misalnya?

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/vuejs/vue/issues/3977#issuecomment-355524605 , atau bisu
benang
https://github.com/notifications/unsubscribe-auth/AACouvWQNer0XUjuzBDHgePpZQ-D2DAWks5tHfx2gaJpZM4KaIfu
.

@Akryum Solusi Anda berfungsi tetapi membuat saya merasa bahwa templat sfc fungsional dapat menggunakan sedikit lebih banyak cinta. Saya sedang dalam proses menulis ulang beberapa komponen yang bisa berfungsi sejak awal dan saya sedikit kecewa dengan pengalamannya. sfc sudah memiliki konteks yang dapat diakses dari template untuk props dan listeners . Tidak bisakah properti ini dipetakan ke 'root' untuk props dan '$emit' untuk listener yang memungkinkan setiap jenis sfc bekerja dengan api.

<template functional>
    <div @click="listeners['request-something'](42)">
        {{props.hello}}
        {{props.world}}
    </div>
</template>

<script>
export default {
    props: ["hello", "world"]
}
</script>

bisa menjadi

<template functional>
    <div @click="$emit('request-something', 42)">
        {{hello}}
        {{world}}
    </div>
</template>

<script>
export default {
    props: ["hello", "world"]
}
</script>