<div id="app">
  <!-- 計算屬性的使用和普通狀態(tài)的使用方式是一致的 -->
  <h2>{{ fullname }}</h2>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        firstname: 'Klaus',
        lastname: 'Wang'
      }
    },
    computed: {
      fullname() {
        return this.firstname + ' ' + this.lastname
      }
    }
  }).mount('#app')

<div id="app">
  <!-- 計算屬性的使用和普通狀態(tài)的使用方式是一致的 -->
  <h2>{{ fullname }}</h2>
  <button @click="change">change</button>
</div>
<script>
  Vue.createApp({
    data() {
      return {
        firstname: 'Klaus',
        lastname: 'Wang'
      }
    },
    methods: {
      change() {
        this.fullname = 'Alex Li'
      }
    },
    computed: {
      // 計算屬性的完整寫法
      fullname: {
        get() {
          return this.firstname + ' ' + this.lastname
        },
        set(v) {
          this.firstname = v.split(' ')[0]
          this.lastname = v.split(' ')[1]
        }
      }
    }
  }).mount('#app')
</script>

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // 可以使用watch監(jiān)聽響應式數據的改變
    // 對應有兩個參數
    // 參數一 --- 新值
    // 參數二 --- 舊值
    info(newV, oldV) {
      // 如果監(jiān)聽的值是對象，獲取到的新值和舊值是對應對象的代理對象
      console.log(newV, oldV)

      // 代理對象 轉 原生對象
      // 1. 使用淺拷貝獲取一個新的對象，獲取的新的對象為原生對象
      console.log({...newV})

      // 2. 使用Vue.toRaw方法獲取原生對象
      console.log(Vue.toRaw(newV))
    }
  },
  methods: {
    change() {
      this.info = {
        name: 'Steven'
      }
    }
  }
}).mount('#app')

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    info: {
      // 開啟了深度監(jiān)聽后，當info的屬性發(fā)生改變的時候，就會觸發(fā)對應的watch回調
      // 注意: 和直接修改info引用不同的是，如果直接修改的是對象的屬性
      // 那么此時newV和oldV是同一個對象的引用, 此時也就獲取不到對應的舊值
      handler(newV, oldV) {
        console.log(newV, oldV)
        console.log(newV === oldV)  // => true
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

watch: {
  'info.name'(newV, oldV){
    console.log(newV, oldV)
  }
}

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // watch的值如果是一個字符串的時候
    // 會自動以該字符串作為函數名去methods中查找對應的方法
    'info.name': 'watchHandler'
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(newV, oldV){
      console.log(newV, oldV)
    }
  }
}).mount('#app')

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    'info.name': [
      'watchHandler',

      function handle() {
        console.log('handler2')
      },

      {
        handler() {
          console.log('handler3')
        }
      }
    ]
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(){
      console.log('handler1')
    }
  }
}).mount('#app')

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  created() {
    /*
          $watch 參數列表
            參數一 --- 偵聽源
            參數二 --- 偵聽回調
            參數三 --- 配置對象
        */
    this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
      immediate: true
    })
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')