<script setup>
import { getCurrentInstance } from 'vue'

// proxy 就是當前組件實例，可以理解為組件級別的 this，沒有全局的、路由、狀態(tài)管理之類的
const { proxy, appContext } = getCurrentInstance()

// 這個 global 就是全局實例
const global = appContext.config.globalProperties
</script>

Vue.prototype.xxx = xxx

// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局屬性
app.config.globalProperties.name = '沐華'

<script setup>
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()

const global = appContext.config.globalProperties
console.log(global.name) // 沐華
</script>

<template>
    <el-form ref="formRef"></el-form>
    <child-component />
</template>
<script setup lang="ts">
import ChildComponent from './child.vue'
import { getCurrentInstance } from 'vue'
import { ElForm } from 'element-plus'

// 方法一，這個變量名和 DOM 上的 ref 屬性必須同名，會自動形成綁定
const formRef = ref(null)
console.log(formRef.value) // 這就獲取到 DOM 了

// 方法二
const { proxy } = getCurrentInstance()
proxy.$refs.formRef.validate((valid) => { ... })

// 方法三，比如在 ts 里，可以直接獲取到組件類型
// 可以這樣獲取子組件
const formRef = ref<InstanceType<typeof ChildComponent>>()
// 也可以這樣 獲取 element ui 的組件類型
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => { ... })
</script>

<script setup>
import { onMounted } from 'vue'

// 請求接口函數(shù)
const getData = () => {
    xxxApi.then(() => { ... })
}

onMounted(() => {
    getData()
})
</script>

<script setup>
import { onBeforeUnmount, onDeactivated } from 'vue'

// 組件卸載前，對應(yīng) Vue2 的 beforeDestroy
onBeforeUnmount(() => {
    clearTimeout(timer)
    window.removeAddEventListener('...')
})

// 退出緩存組件，對應(yīng) Vue2 的 deactivated
onDeactivated(() => {
    clearTimeout(timer)
    window.removeAddEventListener('...')
})
</script>

<template>
    <div>{{ count }}</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const count = ref(1)

// 有人這么用 
const arr = ref([])
console.log(arr.value) // []

// 也有人這么用，一個組件里所有的屬性全部定義在一個對象里，有點 Vue2 data 的味道
const data = reactive({
    name: '沐華',
    age: 18,
    ...
})
console.log(data.name) // 沐華

// 也有人一個組件里 ref 和 reactive 兩種都用，隨便你
</script>

<script setup>
import { reactive, toRef, toRefs } from 'vue'

const data = reactive({
    name: '沐華',
    age: 18
})

// 這樣雖然能拿到 name / age，但是會變成普通變量，沒有響應(yīng)式效果了
const { name, age } = data

// 取出來一個響應(yīng)式屬性
const name = toRef(data, 'name')

// 這樣解構(gòu)出來的所有屬性都是有響應(yīng)式的
const { name, age } = toRefs(data)

// 不管是 toRef 還是 toRefs，這樣修改是會把 data 里的 name 改掉的
// 就是會改變源對象屬性，這才是響應(yīng)式該有的樣子
name.value = '沐沐華華'
</script>

watch: {
    userId: 'getData',
    userName (newName, oldName) {
        this.getData()
    },
    userInfo: {
        handler (newVal, newVal) { this.getData() },
        immediate: true,
        deep: true
    }
}

<script setup>
import { watch, ref, reactive } from 'vue'

const name = ref('沐華')
const data = reactive({
    age: 18,
    money: 100000000000000000000,
    children: []
})

// 監(jiān)聽 ref 屬性
watch(name, (newName, oldName) => { ... })

// 監(jiān)聽其他屬性、路由或者狀態(tài)管理的都這樣
watch(
    () => data.age, 
    (newAge, oldAge) => { ... }
)

// 監(jiān)聽多個屬性，數(shù)組放多個值，返回的新值和老值也是數(shù)組形式
watch([data.age, data.money], ([newAge, oldAge], [newMoney, oldMoney]) => { ... })

// 第三個參數(shù)是一個對象，為可配置項，有5個可配置屬性
watch(data.children, (newList, oldList) => { ... }, {
    // 這兩個和 Vue2 一樣，沒啥說的
    immediate: true,
    deep: true,
    // 回調(diào)函數(shù)的執(zhí)行時機，默認在組件更新之前調(diào)用。更新后調(diào)用改成post
    flush: 'pre', // 默認值是 pre，可改成 post 或 sync
    // 下面兩個是調(diào)試用的
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})
</script>

// 回調(diào)函數(shù)接收一個參數(shù)，為清除副作用的函數(shù)
watch(key, (newKey, oldKey, onInvalidate) => {
    console.log('沐華')
    // 獲取DOM默認獲取到的是更新前的dom，如果是flush: post，可以獲取到更新后的dom
    console.log('DOM節(jié)點：', dom.innterHTML)
    onInvalidate(() => {
        console.log(2222)
    })
})

// 停止監(jiān)聽
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要的時候手動停止監(jiān)聽
unwatch()
unwatchEffect()

<script setup>
import { watchEffect } from 'vue'

// 正常使用
watchEffect(() => {
    // 會自動收集這個函數(shù)使用到的屬性作為依賴，進行監(jiān)聽
    // 監(jiān)聽的是 userInfo.name 屬性，不會監(jiān)聽 userInfo
    console.log(userInfo.name)
})

// 有兩個參數(shù)，參數(shù)一是觸發(fā)監(jiān)聽回調(diào)函數(shù)，參數(shù)二是可選配置項
watchEffect(() => {...}, {
    // 這里是可配置項，意思和 watch 是一樣的，不過這只有3個可配置的
    flush: 'pre',
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})

// 回調(diào)函數(shù)接收一個參數(shù)，為清除副作用的函數(shù)，和 watch 的同理
watchEffect(onInvalidate => {
    console.log('沐華')
    onInvalidate(() => {
        console.log(2222)
    })
})
</script>

watchEffect(() => {...}, {
    flush: 'post',
})
// 和下面這個是一樣的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {
    flush: 'sync',
})
// 和下面這個是一樣的
watchSyncEffect(() => {})

<script setup>
import { computed } from 'vue'

// 獲取 url 上的 type 屬性
const type = computed(() => Number(this.$route.query.type || '0'))

// 對象寫法
const visible = computed({
    get () { return this.visible },
    set (val) { this.$emit('input', val) }
})

// computed 第二個參數(shù)也是一個對象，調(diào)試用的
const hehe = computed(參數(shù)一上面兩種都可， {
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})
</script>

<script setup>
import { nextTick} from 'vue'

// 方式 一
const handleClick = async () => {
  await nextTick()
  console.log('沐華')
}

// 方式二
nextTick(() => {
    console.log('沐華')
})

// 方式三
nextTick().then(() => {
    console.log('沐華')
  })
</script>

// xxx.js
expport const getData = () => {}
export default function unInstance () {
    ...
    return {...}
}

// xxx.vue
import unInstance, { getData } from 'xx.js'
const { ... } = unInstance()
onMounted(() => {
    getData()
})

// 父組件寫法
<template>
    <child v-model:name="name" v-model:age="age" />
</template>
<script setup>
import { ref } from "vue"
const name = ref('沐華')
const age = ref(18)
</script>

// 子組件
<script setup>
const emit = defineEmits(['update:name', 'update:age'])

const handleClick = () => {
    console.log('點擊了')
    emit('update:name', '這是新的名字')
}
</script>

<script setup>
import { useRoute, useRouter } from "vue-router"

// route 對應(yīng) this.$route
const route = useRoute()

// router 對應(yīng) this.$router
const router = useRouter()
</script>

<template>
    <div>1</div>
    <div>2</div>
</template>

<style scoped>
// 這樣寫不生效的話
.el-form {
    .el-form-item { ... }
}
// Vue2 中這樣寫
/deep/ .el-form {
    .el-form-item { ... }
}
// Vue3 中這樣寫
:deep(.el-form) {
    .el-form-item { ... }
}
</style>

// 別再這樣加一個沒有 scoped 的 style 標簽了，全都加到全局上去了
// <style lang="scss">
//  .el-form {
//     .el-form-item { ... }
//  }
// </style>

<template>
    <div class="name">沐華</div>
</template>
<script setup>
import { ref } from "vue"
const str = ref('#f00') // 紅色
</script>
<style scoped lang="scss">
.name {
    background-color: v-bind(str); // JS 中的色值變量 #f00 就賦值到這來了
}
</style>