<template>
  <div>ref與</div>
  <div>msg1:{{msg1}}</div>
  <div>msg2:{{msg2}}</div>
  <div>msg3:{{msg3}}</div>
  <button @click="updata">改變</button>
</template>

<script lang="ts">
import {reactive, ref} from "vue";
export default {
  setup(){
    const msg1=ref('hello')
    const msg2 = reactive({
      name: 'jack',
      wife: {
        name:'rose'
      }
    })
    const msg3 = ref({ // ref中如果是一個對象，那么經(jīng)過了reactive處理，形成了Proxy對象
      name: 'jack',
      wife: {
        name: 'rose'
      }
    })
    function updata(){
      msg1.value += '++'
      msg2.wife.name += '++'
      msg3.value.wife.name += '++'
    }
    return {
      msg1,
      msg2,
      msg3,
      updata
    }
  }
}
</script>

<template>
  <h1>計算屬性與監(jiān)視</h1>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏：<input type="text" placeholder="輸入姓氏" v-model="user.firstName"><br>
    名字：<input type="text" placeholder="輸入名字" v-model="user.lastName">
  </fieldset>
  <fieldset>
    <legend>計算屬性和監(jiān)視</legend>
    姓名：<input type="text" placeholder="顯示姓名" v-model="fullName1"><br>
    姓名：<input type="text" placeholder="顯示姓名" v-model="fullName2"><br>
    姓名：<input type="text" placeholder="顯示姓名" v-model="fullName3"><br>
  </fieldset>
</template>

<script lang="ts">
import {reactive, ref, computed, watch, watchEffect} from "vue";
export default {
  setup() {
    const user=reactive({
      firstName:'東方',
      lastName: '不敗'
    })
    /*
    * Vue3中的計算屬性
    * 計算屬性如果只傳入一個回調(diào)函數(shù)，那么表示get
    * 返回的是一個ref對象
    * */
    const fullName1=computed(()=>{
      return user.firstName + '-' + user.lastName
    })
    const fullName2=computed({
      get(){
        return user.firstName + '-' + user.lastName
      },
      set(val){
        const name=val.split('-')
        user.firstName=name[0]
        user.lastName=name[1]
      }
    })
    // 監(jiān)視屬性
    let fullName3=ref('')
    watch(user,({firstName,lastName})=>{ // user里面對象解構(gòu)賦值
      fullName3.value=firstName + '-' +lastName
    },{immediate:true}) // immediate 開始時執(zhí)行一次 還可以加deep 深度監(jiān)視
    // watchEffect(()=>{
    //   fullName3.value=user.firstName + '-' +user.lastName
    // }) // 更智能，開始就自動執(zhí)行一次

    /*
    * wathc可以監(jiān)視多個屬性，監(jiān)聽非響應式數(shù)據(jù)時，需要()=>
    * */
    watch([()=>user.firstName,()=>user.lastName],()=>{
      console.log("watch執(zhí)行了")
    })
    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
}
</script>