<div id="app">
  <!-- 計(jì)算屬性的使用和普通狀態(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">
  <!-- 計(jì)算屬性的使用和普通狀態(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: {
      // 計(jì)算屬性的完整寫法
      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)聽響應(yīng)式數(shù)據(jù)的改變
    // 對(duì)應(yīng)有兩個(gè)參數(shù)
    // 參數(shù)一 --- 新值
    // 參數(shù)二 --- 舊值
    info(newV, oldV) {
      // 如果監(jiān)聽的值是對(duì)象，獲取到的新值和舊值是對(duì)應(yīng)對(duì)象的代理對(duì)象
      console.log(newV, oldV)

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

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

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    info: {
      // 開啟了深度監(jiān)聽后，當(dāng)info的屬性發(fā)生改變的時(shí)候，就會(huì)觸發(fā)對(duì)應(yīng)的watch回調(diào)
      // 注意: 和直接修改info引用不同的是，如果直接修改的是對(duì)象的屬性
      // 那么此時(shí)newV和oldV是同一個(gè)對(duì)象的引用, 此時(shí)也就獲取不到對(duì)應(yīng)的舊值
      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的值如果是一個(gè)字符串的時(shí)候
    // 會(huì)自動(dòng)以該字符串作為函數(shù)名去methods中查找對(duì)應(yīng)的方法
    '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 參數(shù)列表
            參數(shù)一 --- 偵聽源
            參數(shù)二 --- 偵聽回調(diào)
            參數(shù)三 --- 配置對(duì)象
        */
    this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
      immediate: true
    })
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')