Vue教程08:Computed計算属性、Watch監聴属性

サンプルコードは私のGitHubにアクセスしてください.githb.com/checl 1986/…
Computed計算属性
コード例:/lesson 08/01.Computed計算属性.html
データを出力するための計算結果は、データが変化するときに同期して更新されます.計算属性は、dataの属性と名前を変えてはいけません.方法に対して、依存が変化したときに計算を再開するという利点があります.つまりキャッシュを持っていますが、方法はレンダーのたびに計算されますので、より高い性能を持っています.
属性の計算はメソッドに設定されているほか、オブジェクトとしても使用され、get、set方法による読み書き操作が可能です.
属性の計算は、通常の属性としても使用でき、v-modelを通じてinputに結び付けられますが、方法はできません.
JavaScript:

let vm = new Vue({
  el: '#app',
  data: {
    a: 12,
    b: 33,
    familyName: ' ',
    name: ' '
  },
  computed: {
    sum() {
      return this.a + this.b
    },
    fullName: {
      get() {
        return this.familyName + this.name
      },
      set(value) {
        this.familyName = value[0]
        this.name = value.substring(1)
      },
    }
  },
})

HTML:

"app">
  

    {
     {a}} + {
     {b}} = {
     {sum}}
     ：type="text" v-model="familyName">
     ：type="text" v-model="name">
      ：type="text" v-model="fullName">
  

Watchモニタ属性
コード例:/lesson 08/02.Watchモニタ属性.html
Watchモニタ属性は、データの変化をモニターすることができ、ある変数だけでなく、オブジェクトの属性、配列の中のアイテムを傍受することができます.

let vm = new Vue({
  el: '#app',
  data: {
    name: 'lee',
    userInfo: {
      name: 'lee',
      age: 18
    },
    users: [
      'lee',
      'chen',
      'john'
    ]
  },
  watch: {
    name(value) {
      console.log(`name   ${value}`)
    },
    // userInfo            
    userInfo(value) {
      console.log('userInfo   ', value)
    },
    //            
    'userInfo.name': function(value) {
      console.log(`userInfo.name   ${value}`)
    },
    //            
    'users.1': function (value) {
      console.log(`users[1]   ${value}`)
    },
    //   users[1]              
    users(value) {
      console.log(`users   ${value}`)
    },
  }
})

HTML:

"app">
  

    type="text" v-model="name">
    type="text" v-model="userInfo.name">
    type="text" v-model="users[1]">