Kata pengantar
Atribut yang dihitung digunakan untuk menggambarkan ekspresi deklaratif bahwa nilai tergantung pada nilai lain. Saat Anda mengikat data ke properti yang dihitung dalam templat, Vue memperbarui DOM ketika nilai apa pun tergantung pada penyebab properti yang dihitung berubah. Fitur ini sangat kuat, dapat membuat kode Anda lebih deklaratif, digerakkan data, dan mudah dipelihara.
Ekspresi dalam template sangat nyaman, tetapi sebenarnya hanya digunakan untuk operasi sederhana.
Template adalah untuk menggambarkan struktur tampilan. Menempatkan terlalu banyak logika ke dalam templat akan membuat template terlalu berat dan sulit dipelihara.
Inilah sebabnya mengapa vue.js membatasi ekspresi yang mengikat pada satu ekspresi,
Jika diperlukan lebih dari satu ekspresi, sifat yang dihitung harus digunakan.
Mari kita lihat contoh sederhana ini
<Div id = "example"> a = {{a}}, b = {{b}} </div> var vm = new vue ({// Alasan penamaan vm adalah bahwa ini sebenarnya vm dalam mvvm el: '#example', data: {a: 1}, dihitung: {// getter: '#example', data: {a: 1}, computed: {//for for (function) {function ({function (a), function {function {function ({a), computed: {{{{{{a) kembalikan this.a + 1}}})Hasil output:
a = 1, b = 2
Di sini kami mendeklarasikan properti yang dihitung b. Fungsi yang kami sediakan akan digunakan sebagai pengambil untuk properti VM.B.
console.log (vm.b) // -> 2vm.a = 3console.log (vm.b) // -> 3
Anda dapat mengikat properti yang dihitung dalam templat seperti Anda akan mengikat properti normal. Vue tahu bahwa VM.B tergantung pada VM.A, jadi ketika VM.A berubah, binding yang bergantung pada VM.B juga akan diperbarui. Dan yang terbaik adalah kami membuat ketergantungan ini secara deklaratif: getters dari properti yang dihitung bersih dan tidak memiliki efek samping, sehingga mereka juga mudah diuji dan dipahami.
Jika Anda ingin mengamati perubahan data pada instance VUE, Anda dapat menggunakan metode yang disediakan oleh vue.js $watch .
<Div id = "Demo"> {{fullName}} </div> var vm = new vue ({data: {firstName: 'foo', lastname: 'bar', fullname: 'foo bar'}}) vm. $ watch ('firstName', function (val) {this.fullname = val = $ $ $ $ ('firstName', function (val) {this.fullname = val = $ $ $ $ ('firstName', function (val) {this.fullname = = $ this.LastName}) vm. $ watch ('lastName', function (val) {this.fullname = this.firstName + '' + val}) Namun, metode di atas juga dapat diimplementasikan menggunakan computed :
var vm = vue baru ({data: {firstName: 'foo', lastName: 'bar'}, dihitung: {fullName: function () {return this.firstName + '' + this.lastName}}}) Apakah lebih mudah untuk menulis dengan cara ini? Tidak ada kode duplikat yang tidak perlu? Pejabat itu juga mendorong penggunaan metode computed .
Ketika saya berbicara tentang computed di atas, disebutkan bahwa metode ini memberikan metode get default. Jadi apakah ada metode set ?
// ... komputasi: {fullname: {// getter get: function () {return this.firstname + '' + this.lastname}, // setter set: function (newValue) {var name = newValue.split ('') this.firstname = name [0] oDValue.Split ('') this.firstname = name [0] this.lastname. Jika kita menelepon vm.fullName = 'John Doe' , setter akan dipanggil. vm.firstName dan vm.lastName juga akan memiliki pembaruan yang sesuai. Metode ini terkadang berguna.
Meringkaskan
Di atas adalah semua tentang atribut komputasi vue.js. Saya harap artikel ini akan membantu semua orang. Editor juga akan memperbarui konten tentang vue.js satu demi satu. Teman yang tertarik dapat terus mengikuti wulin.com.