Ketahui cara menggunakan sifat yang dikira dalam Vue dalam satu artikel

Adakah anda tahu bila hendak menggunakan Vue untuk mengira hartanah? Bagaimana untuk menggunakan sifat yang dikira? Artikel berikut akan membawa anda memahami sifat pengiraan Vue dan memperkenalkan penggunaan asas sifat pengiraan Vue saya harap ia akan membantu anda.

Sifat yang dikira

Kadangkala, kami meletakkan terlalu banyak logik dalam templat, yang menjadikan templat berat berlebihan dan sukar untuk dikekalkan. Sebagai contoh:

<div id="app">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

Dalam situasi sedemikian, kita perlu melihatnya seketika untuk menyedari bahawa di sini adalah rentetan terbalik yang kita mahu memaparkan mesej berubah-ubah, dan sebaik sahaja kita mahu menggunakannya berbilang kali dalam templat Ia lebih menyusahkan apabila menyelak rentetan. Oleh itu, apabila kita berurusan dengan logik yang kompleks, kita harus menggunakan sifat yang dikira. [Cadangan berkaitan: "Tutorial vue.js"]

Penggunaan Asas

Sifat yang dikira ialah sifat dalam objek konfigurasi Vue dan digunakan sebagai berikut :

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值，就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})

Sebagai contoh, jika kita ingin mendapatkan rentetan terbalik rentetan, kita boleh menggunakan sifat yang dikira untuk melakukannya:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

Kita dapat melihat bahawa reversedMsg The nilai bergantung pada nilai msg, jadi apabila kita menukar nilai msg, nilai reversedMsg juga akan berubah dengan sewajarnya.

Sifat dikira vs kaedah

Malah, fungsi kami di atas juga boleh dicapai menggunakan kaedah, seperti:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

Walaupun dalam ungkapan Kesan yang sama boleh dicapai dengan memanggil kaedah dalam , tetapi terdapat perbezaan penting antara menggunakan sifat yang dikira dan menggunakan kaedah. Apabila menggunakan kaedah, setiap kali halaman dipaparkan semula, kaedah yang sepadan akan dilaksanakan semula, seperti:

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

Dalam contoh di atas kita dapat melihat bahawa apabila nilai nama ditukar, halaman akan dipaparkan semula Pada masa ini, rentetan pelaksanaan kaedah dicetak dalam konsol, yang bermaksud bahawa fungsi reversedMsg telah dilaksanakan, tetapi kami tidak memerlukan kaedah untuk dilaksanakan, kerana data yang diubah tidak mempunyai apa-apa untuk lakukan dengan fungsi ini Jika logik dalam fungsi ini sangat rumit, maka ia juga merupakan penggunaan dari segi prestasi.

Tetapi jika anda menggunakan atribut yang dikira, tidak akan ada fenomena sedemikian, seperti:

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('计算执行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

Anda boleh lihat pada masa ini bahawa apabila nama data ditetapkan semula, atribut yang dikira akan tidak melaksanakan. Oleh itu, perbezaan paling penting antara atribut dan kaedah yang dikira ialah: Atribut yang dikira dicache berdasarkan kebergantungan responsif Nilai atribut yang dikira sentiasa disimpan dalam cache, selagi data yang bergantung padanya tidak berubah. Setiap kali harta yang dikira diakses, hasil cache dikembalikan serta-merta dan bukannya melaksanakan fungsi itu semula. Kaedahnya adalah untuk mencetuskan pemaparan semula setiap kali, dan memanggil kaedah akan sentiasa melaksanakan fungsi itu semula.

Jadi, mengapa anda memerlukan caching?

Andaikan kita mempunyai atribut A yang dikira, yang memerlukan merentasi tatasusunan yang besar dan melakukan pengiraan yang besar. Kemudian kita perlu menggunakan atribut A yang dikira ini. Jika tiada cache, kita akan melaksanakan fungsi A sekali lagi, jadi overhed prestasi menjadi sangat besar.

Sifat yang dikira secara mendalam

Selain ditulis sebagai fungsi, sifat yang dikira juga boleh ditulis sebagai objek. Terdapat dua sifat dalam objek, getter&setter, kedua-duanya adalah fungsi, ditulis seperti berikut:

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})

getter membaca

Dalam langkah sebelumnya, kami terus menulis atribut yang dikira sebagai fungsi, iaitu fungsi getter. Dalam erti kata lain, sifat yang dikira hanya mempunyai pengambil secara lalai. Pengambil ini secara automatik terikat pada contoh Vue.

Bilakah ia akan dilaksanakan?

Apabila kita mendapat atribut yang dikira, fungsi get akan dilaksanakan.

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      }
    }
  }
})

tetapan penetap

adalah pilihan Fungsi set akan dilaksanakan apabila menetapkan semula nilai kepada atribut yang dikira. Parameter: nilai yang akan ditetapkan semula. Ini daripada penetap terikat secara automatik pada contoh Vue.

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

Perlu diingat bahawa walaupun nilai ditetapkan pada sifat yang dikira, sifat yang dikira tidak akan berubah untuk mengulangi, sifat yang dikira hanya akan dikira semula apabila sifat reaktif bergantungan berubah.

Amalan_Penapisan Nama

personArr: [
  { 
    name: '', 
    src: '.jpg', 
    des: '颈椎不好', 
    sex: 'm', 
    id: '056482' 
  },
  { 
    name: '', 
    src: '.jpg', 
    des: '我是谁', 
    sex: 'f', 
    id: '157894' 
  },
  { 
    name: '', 
    src: '.jpg', des: '我长得很好看', 
    sex: 'f', 
    id: '2849245' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '你没有见过陌生的脸', 
    sex: 'm', 
    id: '348515' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '瓜皮刘', 
    sex: 'm', 
    id: '478454'
  }
]

Amalan_Pilih semua produk

courseList: [
  {
    poster: '.jpg',
    title: '',
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: '.jpg',
    title: '',
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: '.jpg',
    title: '',
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan ! !

Atas ialah kandungan terperinci Ketahui cara menggunakan sifat yang dikira dalam Vue dalam satu artikel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!