<script setup lang="ts" name="UserInfo">
// 導(dǎo)入ref
import {ref} from "vue"
//  需要讓哪個數(shù)據(jù)是響應(yīng)式的，就給哪個數(shù)據(jù)使用ref
let age = ref(18)
let name = ref("vue3")
// 不需要響應(yīng)式
let address:string  = "Beijing"
// ref返回的是一個響應(yīng)式對象，里面的value是具體的值
// 在template模版中使用 例如age，不需要age.value,模版會自動.value解析
// 但是在ts、js代碼中使用，需要.value
function setAge(){
  age.value = 20  // 將value改成20,響應(yīng)式修改
}
</script>

<template>
  {{ age }}
  {{ name }}
  {{address}}
  <button @click="setAge">修改年齡</button>
</template>

<script setup lang="ts" name="UserInfo">
import {ref} from "vue"
//  響應(yīng)式對象數(shù)據(jù)
// ref處理對象的原理-底層調(diào)用了reactive
let info = ref({name: "vue3", age: 18})
// 修改age
function setAge() {
  info.value.age = 20
}
</script>

<template>
  {{ info.age }}
  {{ info.name }}
   <button @click="setAge">修改年齡</button>
</template>

<script setup lang="ts" name="UserInfo">
// 導(dǎo)入reactive
import {reactive} from "vue"
// 需要讓哪個對象是響應(yīng)式的，就給哪個對象使用ref
//  響應(yīng)式對象
let info = reactive({name:"vue3",age:18})
// 非響應(yīng)式對象
let ext = {address:"Beijing"}
// 修改age
function setAge(){
  info.age = 20
}
</script>

<template>
  {{ info.age }}
  {{ info.name }}
  {{ext.address}}
  <button @click="setAge">修改年齡</button>
</template>

let info = ref({name: "vue3", age: 18})
// 直接賦值替換，也是響應(yīng)式的,通過.value拿到替換，.value拿到的就是響應(yīng)式的
info.value = {name:"3",age:20}
// 響應(yīng)式基本數(shù)據(jù)類型不能直接這樣修改，需要通過.value
// 使用該方式相當(dāng)于創(chuàng)建了一個新的響應(yīng)式，而不是原先的響應(yīng)式，頁面是跟原先的響應(yīng)式關(guān)聯(lián)
let count = ref(10)
count = ref(20)

let info = reactive({name: "vue3", age: 18})
// 解構(gòu)賦值
let {name, age} = info
function setInfo() {
  //頁面沒有響應(yīng)式變化
  // 變化的數(shù)據(jù)是解構(gòu)出來的age，而不是info.age
  age += 1
}

// 解構(gòu)賦值
// 底層實現(xiàn)是將每一個屬性 使用ref進(jìn)行轉(zhuǎn)換，都是ref對象
// toRefs可以批量轉(zhuǎn)換
let {name, age} = toRefs(info)
function setInfo() {
	// 頁面數(shù)據(jù)可以響應(yīng)式變化
  age.value += 1
}

// toRef只能轉(zhuǎn)換單個
let age = toRef(info,age)

// 導(dǎo)入computed計算屬性，是一個函數(shù)
import {computed, ref} from "vue"
let name = ref("vue")
let age = ref(20)
// 計算屬性 
// 只讀取的計算屬性,不能通過info=xxx這種方式修改info
let info = computed(() => name.value + "-" + age.value)

// 導(dǎo)入computed計算屬性，是一個函數(shù)
import {computed, ref} from "vue"
let name = ref("vue")
let age = ref(20)
// 計算屬性
let info = computed({
  get() {
    return name + "-" + age
  },
  set(value) {
    // value需要是 xx-xxx的數(shù)據(jù)格式
    // 將數(shù)據(jù)用-切割
    const [str1,str2] = value.split("-")
    // 將數(shù)據(jù)賦值給name和age  觸發(fā)重新計算  然后生成新的info
    name.value = str1
    age.value = Number(str2)
  }
})

// 導(dǎo)入watch
import {watch, ref} from "vue"
let name = ref("vue")
let age = ref(20)
// 監(jiān)視
// 要監(jiān)視的屬性不需要寫.value，回調(diào)函數(shù)(該屬性新值，該屬性舊值)
const wa = watch(name, (newValue, oldValue) => {
  console.log("新數(shù)據(jù)",newValue,"舊數(shù)據(jù)",oldValue)
  // 如果新數(shù)據(jù) 的長度大于等于10的時候，停止監(jiān)視
  if (newValue.length >=10){
    // 原理:watch函數(shù)會返回一個函數(shù)。這個返回的函數(shù)實際上是一個用于清理或停止監(jiān)視操作的句柄
    wa()
  }
})

// 導(dǎo)入watch
import {watch, ref} from "vue"
let info = ref({name: "vue", category: "js"})
// 監(jiān)視的是對象的內(nèi)存地址的值
// info.value = {}的時候會觸發(fā)，修改里面某個屬性不好觸發(fā)
watch(info, (newValue, oldValue) => {
  // 如果修改整個對象，newValue是新對象，oldValue是舊對象
  console.log(newValue, oldValue)
})

watch(info, (newValue, oldValue) => {
  // 如果修改某個屬性，newValue, oldValue兩個都是新值，因為他們是同一個對象
  // 如果修改整個對象才會是兩個對象
  console.log(newValue, oldValue)
  // deep開啟深度監(jiān)視，修改里面的某個屬性 、修改整個對象 都會觸發(fā)
  // immediate在watch函數(shù)創(chuàng)建的時候立即執(zhí)行一次回調(diào)函數(shù)
},{deep:true,immediate:true})

import {watch, ref, reactive} from "vue"
let info = reactive({name: "vue", category: "js"})
watch(info, (newValue, oldValue) => {
  // newValue, oldValue不管是修改整個對象還是某個屬性，都是新值
  // 因為修改某個屬性值 or Object.assign修改，地址值都沒變,都是從同一個對象拿數(shù)據(jù)，都是新值
  console.log(newValue, oldValue)
  // 默認(rèn)開啟了深度監(jiān)視
})

// reactive 和ref創(chuàng)建都可
let info = reactive({
  name: "vue", category: "js", address: {
    phone: 110,
    email: "123213"
  }
})
// 監(jiān)視info對象的name屬性，函數(shù)式
watch(() => info.name, (newValue, oldValue) => {
  // new是新值，old是舊值
  console.log(newValue, oldValue)
})

// reactive 和ref創(chuàng)建都可
let info = reactive({
  name: "vue", category: "js", address: {
    phone: 110,
    email: "123213"
  }
})
// 直接編寫
// address中的某個屬性發(fā)生變化，可以監(jiān)視，但是整個對象替換，不會觸發(fā)監(jiān)視，即便開啟深度監(jiān)視
watch(info.address, (newValue, oldValue) => {
  console.log(newValue,oldValue)
})

// 函數(shù)式
// address中的某個屬性發(fā)生變化，可以監(jiān)視，整個對象替換，也可以觸發(fā)監(jiān)視
// 若是對象監(jiān)視的是地址值，需要關(guān)注對象內(nèi)部，需要手動開啟深度監(jiān)視
watch(() => info.address, (newValue, oldValue) => {
  console.log(newValue, oldValue)
},{deep:true})

// 監(jiān)視多個數(shù)據(jù)，可以放在一個數(shù)組里面
watch([() => info.address,()=>info.name], (newValue, oldValue) => {
  // newValue和oldValue 是前后的整個info對象
  console.log(newValue, oldValue)
},{deep:true})

// 引入watchEffect
import {watchEffect, ref, reactive} from "vue"
let info = reactive({
  name: "vue", category: "js", address: {
    phone: 110,
    email: "123213"
  }
})
let count = ref(0)
// 初始化的時候會首先執(zhí)行一次，相當(dāng)于watch的immediate:true
const wa = watchEffect(()=>{
// 函數(shù)中用到哪些屬性，vue會分析監(jiān)視哪些屬性
  if (info.name.length >10){
    alert("長度大于10")
    // 停止監(jiān)視
    wa()
  }
  if (count.value === 10){
    alert("count")
    wa()
  }
})

<template>
  <!--  與vue2一樣-->
  <!--  用在普通DOM標(biāo)簽上，獲取的是DOM節(jié)點 -->
  <h1 ref="t">title</h1>
  <!--  用在組件標(biāo)簽上，獲取的是組件實例對象-->
  <UserInfo ref="user"></UserInfo>
  <button @click="cli">按鈕</button>
</template>

<script setup lang="ts">
import {ref} from "vue";
let t = ref() // ref=t的DOM節(jié)點對象，可以直接操作該DOM
let user = ref() // ref=user的組件實例對象
</script>

// 在子組件引入defineExpose
import {ref,defineExpose} from "vue"
// 在子組件顯示指定的數(shù)據(jù)，在父組件通過ref拿到的組件實例對象才可以fang'w
defineExpose([name,age])

<script setup lang="ts" name="App">
import UserInfo from './components/UserInfo.vue'
// 引入自定義類型約束 前面要+ type
import { type UserList} from "@/types";
import { reactive} from "vue";
let users = reactive<UserList>([
      {id: "001", name: "1", age: 1},
      {id: "002", name: "2", age: 2},
      {id: "003", name: "3", age: 3},
    ]
)
</script>

<template>
  <!-- 傳遞users-->
  <UserInfo :list="users"></UserInfo>
</template>

<script setup lang="ts" name="UserInfo">
import { type UserList} from "@/types";
// import {defineProps} from "vue"
// 看視頻教程defineProps需要導(dǎo)入，但是導(dǎo)入后使用有報錯，然后看資料不需要導(dǎo)入，不確定是不是和版本有關(guān)系
// 不約束類型
defineProps(["list"])
// 如果使用變量接收defineProps，返回值是{傳遞的key:傳遞的value}
</script>

<template>
  <ul>
    <li v-for="user of list" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

// 接收list參數(shù)，類型是UserList
defineProps<{ list: UserList }>()

// 使用withDefaults設(shè)置默認(rèn)值 
withDefaults(
    // 第一個參數(shù)defineProps接收參數(shù)，?可行參數(shù)是ts語法
    defineProps<{ list?: UserList }>(),
    // 第二個參數(shù)是一個對象，給可選參數(shù)設(shè)置默認(rèn)值
    {
      list: () => [{id: "001", name: "1", age: 1}]
    }
)

<script setup lang="ts" name="UserInfo">
// setup函數(shù)是創(chuàng)建階段，在setup語法糖里相當(dāng)于進(jìn)入了創(chuàng)建階段
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated} from "vue";
// 掛載前
onBeforeMount(() => {
  console.log("掛載前")
})
// 掛載完畢
onMounted(() => {
  console.log("掛載完畢")
})
// 更新前
onBeforeUpdate(() => {
  console.log("更新前")
})
// 更新完畢
onUpdated(() => {
  console.log("更新完畢")
})
// 卸載前，等同于vue2的銷毀
onBeforeUnmount(() => {
  console.log("卸載前")
})
// 卸載后
onUnmounted(() => {
  console.log("卸載后")
})
</script>

import {ref, onMounted, computed} from "vue";
// 整體hooks邏輯寫在一個函數(shù)里
export default function () {
    // 定義響應(yīng)式數(shù)據(jù)
    let info = ref<number>(1)
    // 獲取數(shù)據(jù)
    function getDetail() {
        return info
    }
    // 修改數(shù)據(jù)
    function setDetail(value: number) {
        info.value = value
    }
    // 可以寫鉤子方法
    onMounted(() => {
        console.log("掛載完畢")
    })
    // 可以寫計算屬性
    let doubleInfo = computed<number>(() => {
        return info.value * 2
    })
    // 其他的監(jiān)視屬性等等vue方法屬性都可以在這里編寫
    // 將這些方法組合成一個hooks，然后提供給組件使用
    // 向外部提供東西
    return {getDetail, setDetail,doubleInfo}
}

import useDetail from "@/hooks/useDetail";
const {getDetail,setDetail,doubleInfo} = useDetail()
getDetail()
setDetail(6)