//main.js
//引入的不再是Vue構(gòu)造函數(shù)了，引入的是一個名為createApp的工廠函數(shù)
import {createApp} from 'vue
import App from './App.vue
//創(chuàng)建應用實例對象-app(類似于之前vue2中的vm實例，但是app比vm更輕)
createApp(APP).mount('#app')
//卸載就是unmount,卸載就沒了
//createApp(APP).unmount('#app')
//之前我們是這么寫的，在vue3里面這一塊就不支持了，會報錯的，引入不到 import vue from 'vue'; 
new Vue({
	render:(h) => h(App)
}).$mount('#app')
//多個應用實例
const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')
const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

import {h} from 'vue'
//向下兼容，可以寫入vue2中的data配置項
module default {
	name: 'App',
	setup(){
		//數(shù)據(jù)
		let name = '張三',
		let age = 18,
		//方法
		function sayHello(){
			console.log(name)
		},
		//f返回一個對象（常用）
		return {
			name,
			age,
			sayHello
		}
		//返回一個函數(shù)（渲染函數(shù)）
		//return () => {return h('h1','學習')} 
		return () => h('h1','學習')
	}
}

/* 里面的代碼會被編譯成組件 setup() 函數(shù)的內(nèi)容。
  這意味著與普通的 `<script>` 只在組件被首次引入的時候執(zhí)行一次不同，
  `<script setup>` 中的代碼會在每次組件實例被創(chuàng)建的時候執(zhí)行。*/
<script setup>
	console.log('hello script setup')
</script>

<script setup>
// 變量
const msg = '王二麻子'
// 函數(shù)
function log() {
  console.log(msg)
}
</script>
<template>
  <button @click="log">{{ msg }}</button>
</template>

<script setup>
import { say } from './action'
</script>
<template>
  <div>{{ say ('hello') }}</div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
  <button @click="count++">{{ count }}</button>
</template>

/**
*這里 MyComponent 應當被理解為像是在引用一個變量。
*如果你使用過 JSX，此處的心智模型是類似的。
*其 kebab-case 格式的 <my-component> 同樣能在模板中使用——不過，
*強烈建議使用 PascalCase 格式以保持一致性。同時這也有助于區(qū)分原生的自定義元素。
*/
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
  <MyComponent />
</template>

/**
*由于組件是通過變量引用而不是基于字符串組件名注冊的，
*在 <script setup> 中要使用動態(tài)組件的時候，應該使用*動態(tài)的 :is 來綁定：
*/
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

import { FooBar as FooBarChild } from './components'

<script setup>
import * as Form from './form-components'
</script>
<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
  }
}
</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>

<script setup>
import { myDirective as vMyDirective } from './MyDirective.js'
</script>

<script setup>
const props = defineProps({
  foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup 代碼
</script>

//可以通過 defineExpose 編譯器宏來顯式指定在 <script setup> 組件中要暴露出去的屬性：
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
  a,
  b
})
</script>
//當父組件通過模板引用的方式獲取到當前組件的實例，
//獲取到的實例會像這樣 { a: number, b: number } (ref 會和在普通實例中一樣被自動解包)

<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
//useSlots 和 useAttrs 是真實的運行時函數(shù)，它的返回與 setupContext.slots 和 setupContext.attrs 等價。
//它們同樣也能在普通的組合式 API 中使用。

<script>
// 普通 <script>, 在模塊作用域下執(zhí)行 (僅一次)
runSideEffectOnce()
// 聲明額外的選項
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中執(zhí)行 (對每個實例皆如此)
</script>

<script setup>
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
// 另外，await 的表達式會自動編譯成在 await 之后保留當前組件實例上下文的格式。

Object.defineProperty( data, 'count', {
	get(){},
	set(){}
})
//模擬實現(xiàn)一下
let person = {
	name: '張三',
	age: 15,
}
let p = {}
Object.defineProperty( p, 'name', {
	configurable: true, //配置這個屬性表示可刪除的，否則delete p.name 是刪除不了的 false
	get(){
		//有人讀取name屬性時調(diào)用
		return person.name
	},
	set(value){
		//有人修改時調(diào)用
		person.name = value
	}
})

//模擬vue3中實現(xiàn)響應式
let person = {
	name: '張三',
	age: 15,
}
//我們管p叫做代理數(shù)據(jù)，管person叫源數(shù)據(jù)
const p = new Proxy(person,{
	//target代表的是person這個源對象，propName代表讀取或者寫入的屬性名
	get(target,propName){
		console.log('有人讀取了p上面的propName屬性')
		return target[propName]
	},
	//不僅僅是修改調(diào)用，增加的時候也會調(diào)用
	set(target,propName,value){
		console.log(`有人修改了p身上的${propName}屬性，我要去更新界面了`)
		target[propName] = value
	},
	deleteProperty(target,propName){
		console.log(`有人刪除了p身上的${propName}屬性，我要去更新界面了`)
		return delete target[propName]
	}
})
//映射到person上了，捕捉到修改，那就是響應式啊

//vue3底層源碼不是我們上面寫的那么low，實現(xiàn)原理一樣，但是用了一個新的方式
window.Reflect
![Reflect的寫法](https://img-blog.csdnimg.cn/565f96b1be74435cacbc42e06706791d.png)
let obj = {
	a: 1,
	b:2,
}
//傳統(tǒng)的只能通過try catch去捕獲異常，如果使用這種那么底層源碼將會有一堆try catch
try{
	Object.defineProperty( obj, 'c', {
		get(){ return 3 },
	})
	Object.defineProperty( obj, 'c', {
		get(){ return 4 },
	})
} catch(error) {
	console.log(error)
}
//新的方式： 通過Reflect反射對象去操作，相對來說要舒服一點，不會要那么多的try catch
const x1 = Reflect.defineProperty( obj, 'c', {
		get(){ return 3 },
})
const x2 = Reflect.defineProperty( obj, 'c', {
		get(){ return 3 },
})
//x1,和x2是有返回布爾值的
if(x2){
	console.log('某某操作成功了')
}else {
	console.log('某某操作失敗了')
}

let person = {
	name: '張三',
	age: 15,
}
//我們管p叫做代理數(shù)據(jù)，管person叫源數(shù)據(jù)
const p = new Proxy(person,{
	//target代表的是person這個源對象，propName代表讀取或者寫入的屬性名
	get(target,propName){
		console.log('有人讀取了p上面的propName屬性')
		return Reflect.get(target, propName)
	},
	//不僅僅是修改調(diào)用，增加的時候也會調(diào)用
	set(target,propName,value){
		console.log(`有人修改了p身上的${propName}屬性，我要去更新界面了`)
		Reflect.set(target, propName, value)
	},
	deleteProperty(target,propName){
		console.log(`有人刪除了p身上的${propName}屬性，我要去更新界面了`)
		return Reflect.deleteProperty(target,propName) 
	}
})

//父組件
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/test3.vue';
const hello = (val) =>{
  console.log('傳遞的參數(shù)是：'+ val);
}
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="傳遞吧" @hello="hello">
    <template v-slot:cacao>
      <span>是插槽嗎</span>
    </template>
    <template v-slot:qwe>
      <span>meiyou</span>
    </template>
  </HelloWorld>
</template>

//子組件
export default {
    name: 'test3',
    props: ['msg'],
    emits:['hello'],
    //這里setup接收兩個參數(shù)，一個是props，一個是上下文context
    setup(props,context){
        /**
         * props就是父組件傳來的值，但是他是Porxy類型的對象
         * >Proxy:{msg:'傳遞吧'}
         * 可以當作我們自定義的reactive定義的數(shù)據(jù)
         */
        /**
         * context是一個對象 包含以下內(nèi)容：
         * 1.emit觸發(fā)自定義事件的 
         * 2.attrs 相當于vue2里面的 $attrs 包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性
         * 3.slots 相當于vue2里面的 $slots
         * 3.expose 是一個回調(diào)函數(shù)
         */
        console.log(context.slots);
        let person = reactive({
            name: '張三',
            age: 17,
        })
        function changeInfo(){
            context.emit('hello', 666)
        }
        //返回對象
        return {
            person,
            changeInfo
        }
        //返回渲染函數(shù)（了解） 這個h是個函數(shù)
        //return () => h('name','age')
    }
}
</script>

<template>
  <h1>一個人的信息</h1>
  <div>
      姓： <input type="text" v-model="person.firstName">
      名：<input type="text" v-model="person.lastName">
      <div>
          <span>簡名：{{person.smallName}}</span> <br>
          <span>全名：{{person.fullName}}</span>
      </div>
  </div>
</template>
<script>
import { computed,reactive } from 'vue'
    export default {
        name: 'test4',
        props: ['msg'],
        emits:['hello'],
        setup(){
            let person = reactive({
                firstName: '張',
                lastName: '三'
            })
            //簡寫形式
            person.smallName = computed(()=>{
                return person.firstName + '-' + person.lastName
            })
            //完全形態(tài)
            person.fullName = computed({
                get(){
                    console.log('調(diào)用get');
                    return person.firstName + '*' + person.lastName
                },
                set(value){
                    console.log('調(diào)用set');
                    const nameArr = value.split('*')
                    person.firstName = nameArr[0]
                    person.firstName = nameArr[1]
                },
            })
            return {
                person,
            }
        },
    }
 </script>

<template>
  <h1>當前求和為： {{sum}}</h1>
  <button @click="sum++">點我+1</button>
  <hr>
  <h1>當前信息為： {{msg}}</h1>
  <button @click="msg+='!' ">修改信息</button>
  <hr>
  <h2>姓名： {{person.name}}</h2>
  <h2>年齡： {{person.age}}</h2>
  <button @click="person.name += '~' ">修改姓名</button> <button @click="person.age++">增長年齡</button>
</template>
<script>
    //使用setup的注意事項
    import { watch,ref,reactive } from 'vue'
    export default {
        name: 'test5',
        props: ['msg'],
        emits:['hello'],
        setup(){
            let sum  = ref(0)
            let msg = ref('你好啊')
            let person = reactive({
                name: '張三',
                age: 18,
                job:{
                    salary: '15k'
                },
            })
            //由于這里的this是指的是undefined，所以使用箭頭函數(shù)
            //情況一：監(jiān)視ref所定義的一個響應式數(shù)據(jù)
            // watch(sum, (newValue,oldValue)=>{
            //     console.log('新的值',newValue);
            //     console.log('舊的值',oldValue);
            // })
            //情況二：監(jiān)視ref所定義的多個響應式數(shù)據(jù)
            watch([sum,msg], (newValue,oldValue)=>{
                console.log('新的值',newValue); //['sum的newValue', 'msg的newValue']
                console.log('舊的值',oldValue); //['sum的oldValue', 'msg的oldValue']
            },{immediate: true,deep:true}) //這里vue3的deep是有點小問題的，可以不用deep，（隱式強制deep）
            //情況三：監(jiān)視reactive定義的所有響應式數(shù)據(jù),
            //1.此處無法獲取正確的oldValue（newValue與oldValue是一致值）,且目前無法解決
            //2.強制開啟了深度監(jiān)視（deep配置無效）
            /**
            * 受到碼友熱心評論解釋： 此處附上碼友的解釋供大家參考：
            * 1. 當你監(jiān)聽一個響應式對象的時候，這里的newVal和oldVal是一樣的，因為他們是同一個對象【引用地址一樣】，
            *    即使里面的屬性值會發(fā)生變化，但主體對象引用地址不變。這不是一個bug。要想不一樣除非這里把對象都換了
            * 
            * 2. 當你監(jiān)聽一個響應式對象的時候，vue3會隱式的創(chuàng)建一個深層監(jiān)聽，即對象里只要有變化就會被調(diào)用。
            *    這也解釋了你說的deep配置無效，這里是強制的。
            */
            watch(person, (newValue,oldValue)=>{
                console.log('新的值',newValue); 
                console.log('舊的值',oldValue);
            })
            //情況四：監(jiān)視reactive對象中某一個屬性的值，
            //注意： 這里監(jiān)視某一個屬性的時候可以監(jiān)聽到oldValue
            watch(()=>person.name, (newValue,oldValue)=>{
                console.log('新的值',newValue);  
                console.log('舊的值',oldValue);
            })
            //情況五：監(jiān)視reactive對象中某一些屬性的值
            watch([()=>person.name,()=>person.age], (newValue,oldValue)=>{
                console.log('新的值',newValue);  
                console.log('舊的值',oldValue);
            })
            //特殊情況: 監(jiān)視reactive響應式數(shù)據(jù)中深層次的對象，此時deep的配置奏效了
            watch(()=>person.job, (newValue,oldValue)=>{
                console.log('新的值',newValue);  
                console.log('舊的值',oldValue);
            },{deep:true}) //此時deep有用
            return {
                sum,
                msg,
                person,
            }
        },
    }
</script>

<script>
    //使用setup的注意事項
    import { ref,reactive,watchEffect } from 'vue'
    export default {
        name: 'test5',
        props: ['msg'],
        emits:['hello'],
        setup(){
            let sum  = ref(0)
            let msg = ref('你好啊')
            let person = reactive({
                name: '張三',
                age: 18,
                job:{
                    salary: '15k'
                },
            })
            //用處： 如果是比較復雜的業(yè)務，發(fā)票報銷等，那就不許需要去監(jiān)聽其他依賴，只要發(fā)生變化，立馬重新回調(diào)
            //注重邏輯過程，你發(fā)生改變了我就重新執(zhí)行回調(diào)，不用就不執(zhí)行，只執(zhí)行一次
            watchEffect(()=>{
                //這里面你用到了誰就監(jiān)視誰，里面就發(fā)生回調(diào)
                const x1 = sum.value
                console.log('我調(diào)用了');
            })
            return {
                sum,
                msg,
                person,
            }
        },
    }
</script>

<template>
  <h1>生命周期</h1>
  <p>當前求和為： {{sum}}</p>
  <button @click="sum++">加一</button>
</template>
<script>
    //使用setup的注意事項
    import { ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
    export default {
        name: 'test7',
        setup(){
           let sum = ref(0)
           //通過組合式API的形式去使用生命周期鉤子
            /**
             * beforeCreate 和  created 這兩個生命周期鉤子就相當于 setup 所以，不需要這兩個
             * 
             * beforeMount   ===>  onBeforeMount
             * mounted       ===>  onMounted
             * beforeUpdate  ===>  onBeforeUpdate
             * updated       ===>  onUpdated
             * beforeUnmount ===>  onBeforeUnmount
             * unmounted     ===>  onUnmounted
             */
            console.log('---setup---');
            onBeforeMount(()=>{
                console.log('---onBeforeMount---');
            })
            onMounted(()=>{
                console.log('---onMounted---');
            })
            onBeforeUpdate(()=>{
                console.log('---onBeforeUpdate---');
            })
            onUpdated(()=>{
                console.log('---onUpdated---');
            })
            onBeforeUnmount(()=>{
                console.log('---onBeforeUnmount---');
            })
            onUnmounted(()=>{
                console.log('---onUnmounted---');
            })
            return {
                sum
            }
        },
        //這種是外層的寫法，如果想要使用組合式api的話需要放在setup中
        beforeCreate(){
            console.log('---beforeCreate---');
        },
        created(){
            console.log('---created---');
        },
        beforeMount(){
            console.log('---beforeMount---');
        },
        mounted(){
            console.log('---mounted---');
        },
        beforeUpdate(){
            console.log('---beforeUpdate---');
        },
        updated(){
            console.log('---updated---');
        },
        //卸載之前
        beforeUnmount(){
            console.log('---beforeUnmount---');
        },
        //卸載之后
        unmounted(){
            console.log('---unmounted---');
        }
    }
</script>

//usePoint.js
import {reactive,onMounted,onBeforeUnmount } from 'vue'
function savePoint(){
    //實現(xiàn)鼠標打點的數(shù)據(jù)
    let point = reactive({
        x: null,
        y: null
    })
    //實現(xiàn)鼠標點的方法
    const savePoint = (e)=>{
         point.x = e.pageX
         point.y = e.pageY
    } 
    //實現(xiàn)鼠標打點的生命周期鉤子
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })
    return point
}
export default savePoint

//組件test.vue
<template>
  <p>當前求和為： {{sum}} </p>
  <button @click="sum++">加一</button>
  <hr>
  <h2>當前點擊時候的坐標： x: {{point.x}}  y:{{point.y}}</h2>
</template>
<script>
import { ref } from 'vue'
import usePoint from '../hooks/usePoint'
export default {
    name: 'test8',
    setup(props,context){
        let sum = ref(0)
        let point = usePoint()
        return {
            sum,
            point
        }
    }
}
</script>

<template>
  <h2>姓名： {{name2}}</h2>
  <h2>年齡： {{person.age}}</h2>
  <button @click="person.name += '~' ">修改姓名</button> 
  <button @click="person.age++">增長年齡</button>
</template>
<script>
    //使用setup的注意事項
    import { reactive, toRef, toRefs } from 'vue'
    export default {
        name: 'test9',
        setup(){
            let person = reactive({
                name: '張三',
                age: 18,
                job:{
                    salary: '15k'
                },
            })
            //toRef
            const name2 = toRef(person,'name') //第一個參數(shù)是對象，第二個參數(shù)是鍵名
            console.log('toRef轉(zhuǎn)變的是',name2); //ref定義的對象
            //toRefs,批量處理對象的所有屬性
            //const x  = toRefs(person)
            //console.log('toRefs轉(zhuǎn)變的是',x); //是一個對象
            return {
                person,
                name2,
                ...toRefs(person)
            }
        },
    }
</script>

//場景一： 使用<script setup>
<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})
props.foo // string
props.bar // number | undefined
</script>
//也可以將 props 的類型移入一個單獨的接口中
<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}
const props = defineProps<Props>()
</script>
//場景二： 不使用<script setup>
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    props.message // <-- 類型：string
  }
})

//1.一個類型字面量：
defineProps<{ /*... */ }>()
//2.對同一個文件中的一個接口或?qū)ο箢愋妥置媪康囊?
interface Props {/* ... */}
defineProps<Props>()
//3.接口或?qū)ο笞置骖愋涂梢园瑥钠渌募氲念愋鸵?，但是，傳遞給 defineProps 的泛型參數(shù)本身不能是一個導入的類型：
import { Props } from './other-file'
// 不支持！
defineProps<Props>()

//當使用基于類型的聲明時，失去了對 props 定義默認值的能力。通過目前實驗性的響應性語法糖來解決：
<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}
// 對 defineProps() 的響應性解構(gòu)
// 默認值會被編譯為等價的運行時選項
const { foo, bar = 100 } = defineProps<Props>()
</script>

//場景一： 使用<script setup>
<script setup lang="ts">
const emit = defineEmits(['change', 'update'])
// 基于類型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>
//場景二： 不使用<script setup>
import { defineComponent } from 'vue'
export default defineComponent({
  emits: ['change'],
  setup(props, { emit }) {
    emit('change') // <-- 類型檢查 / 自動補全
  }
})

import { ref } from 'vue'
import type { Ref } from 'vue'
//1.ref 會根據(jù)初始化時的值推導其類型：
// 推導出的類型：Ref<number>
const year = ref(2020)
// => TS Error: Type 'string' is not assignable to type 'number'.
year.value = '2020'
//2.指定一個更復雜的類型，可以通過使用 Ref 這個類型：
const year: Ref<string | number> = ref('2020')
year.value = 2020 // 成功！
//3.在調(diào)用 ref() 時傳入一個泛型參數(shù)，來覆蓋默認的推導行為：
// 得到的類型：Ref<string | number>
const year = ref<string | number>('2020')
year.value = 2020 // 成功！
//4.如果你指定了一個泛型參數(shù)但沒有給出初始值，那么最后得到的就將是一個包含 undefined 的聯(lián)合類型：
// 推導得到的類型：Ref<number | undefined>
const n = ref<number>()

import { reactive } from 'vue'
//1.reactive() 也會隱式地從它的參數(shù)中推導類型：
// 推導得到的類型：{ title: string }
const book = reactive({ title: 'Vue 3 指引' })
//2.要顯式地標注一個 reactive 變量的類型，我們可以使用接口：
interface Book {
  title: string
  year?: number
}
const book: Book = reactive({ title: 'Vue 3 指引' })

import { ref, computed } from 'vue'
//1.computed() 會自動從其計算函數(shù)的返回值上推導出類型：
const count = ref(0)
// 推導得到的類型：ComputedRef<number>
const double = computed(() => count.value * 2)
// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')
//2.通過泛型參數(shù)顯式指定類型：
const double = computed<number>(() => {
  // 若返回值不是 number 類型則會報錯
})

//在處理原生 DOM 事件時，應該為我們傳遞給事件處理函數(shù)的參數(shù)正確地標注類型
<script setup lang="ts">
function handleChange(event) {
  // 沒有類型標注時 `event` 隱式地標注為 `any` 類型,
  // 這也會在 tsconfig.json 中配置了 "strict": true 或 "noImplicitAny": true 時報出一個 TS 錯誤。
  console.log(event.target.value)
}
</script>
<template>
  <input type="text" @change="handleChange" />
</template>
//因此，建議顯式地為事件處理函數(shù)的參數(shù)標注類型,需要顯式地強制轉(zhuǎn)換 event 上的屬性：
function handleChange(event: Event) {
  console.log((event.target as HTMLInputElement).value)
}

/*
provide 和 inject 通常會在不同的組件中運行。要正確地為注入的值標記類型，
Vue 提供了一個 InjectionKey 接口，它是一個繼承自 Symbol 的泛型類型，
可以用來在提供者和消費者之間同步注入值的類型：
*/
import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'
const key = Symbol() as InjectionKey<string>
provide(key, 'foo') // 若提供的是非字符串值會導致錯誤
const foo = inject(key) // foo 的類型：string | undefined
//建議將注入 key 的類型放在一個單獨的文件中，這樣它就可以被多個組件導入。
//當使用字符串注入 key 時，注入值的類型是 unknown，需要通過泛型參數(shù)顯式聲明：
const foo = inject<string>('foo') // 類型：string | undefined
//注意注入的值仍然可以是 undefined，因為無法保證提供者一定會在運行時 provide 這個值。
//當提供了一個默認值后，這個 undefined 類型就可以被移除：
const foo = inject<string>('foo', 'bar') // 類型：string
//如果你確定該值將始終被提供，則還可以強制轉(zhuǎn)換該值：
const foo = inject('foo') as string

//模板引用需要通過一個顯式指定的泛型參數(shù)和一個初始值 null 來創(chuàng)建：
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const el = ref<HTMLInputElement | null>(null)
onMounted(() => {
  el.value?.focus()
})
</script>
/**
	注意為了嚴格的類型安全，有必要在訪問 el.value 時使用可選鏈或類型守衛(wèi)。這是因為直到組件被掛載前，
	這個 ref 的值都是初始的 null，并且在由于 v-if 的行為將引用的元素卸載時也可以被設置為 null。
*/
<template>
  <input ref="el" />
</template>

//有時，你可能需要為一個子組件添加一個模板引用，以便調(diào)用它公開的方法。舉例來說，我們有一個 MyModal 子組件，它有一個打開模態(tài)框的方法
<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const isContentShown = ref(false)
const open = () => (isContentShown.value = true)
defineExpose({
  open
})
</script>
//為了獲取 MyModal 的類型，我們首先需要通過 typeof 得到其類型，再使用 TypeScript 內(nèi)置的 InstanceType 工具類型來獲取其實例類型：
<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const modal = ref<InstanceType<typeof MyModal> | null>(null)
const openModal = () => {
  modal.value?.open()
}
</script>
//注意，如果你想在 TypeScript 文件而不是在 Vue SFC 中使用這種技巧，需要開啟 Volar 的Takeover 模式。

import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
  }
}

import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      // 在 computed 函數(shù)中訪問 state
      count: computed(() => store.state.count),
      // 在 computed 函數(shù)中訪問 getter
      double: computed(() => store.getters.double)
    }
  }
}

import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      // 使用 mutation
      increment: () => store.commit('increment'),
      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

<script>
    import { reactive,readonly,shallowReadonly } from 'vue'
    export default {
        name: 'test9',
        setup(){
            let person = reactive({
				name: '張三',
				job:{
					salary: '20k',
				}
			})
			person = readonly(person) //這個時候修改人的信息就不會改變了,所有的都不能改
			/**
			* 頁面不進行響應式的改變，一般存在兩種情況：
			* 1.setup里面定義的數(shù)據(jù)改變了，但是vue沒有檢測到，這個時候是不會改變的
			* 2.setup里面定義的數(shù)據(jù)壓根兒就不讓你改，這個時候也沒法響應式
			*/
			person = shallowReadonly(person) //只有最外層不能修改是只讀的，但是job還是可以改的
            return {
                person
            }
        },
    }
</script>

import {reactive,toRaw,markRaw} from 'vue'
setup(){
	let person = reactive({
		name: '張三',
	})
	function showRawPerson(){
		const p = toRaw(person)
		p.age++
		console.log(p)
	}
	function addCar(){
		let car = {name: '奔馳'}
		person.car = markRaw(car) //一旦這么做時候，他就永遠不能當成響應式數(shù)據(jù)去做了
	}
}

<template>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
</template>
<script>
    import { customRef, ref } from 'vue'
    export default {
        name: 'test10',
        setup(){
            let timer;
            //自定義一個ref——名為： myRef
            function myRef(value){
                return customRef((track,trigger)=>{
                    return {
                        get(){
                            console.log(`有人讀取我的值了，要把${value}給他`);  //兩次輸出： v-model讀取  h3里面的插值語法調(diào)了一次
                            track()  //追蹤一下改變的數(shù)據(jù)（提前跟get商量一下，讓他認為是有用的）
                            return value
                        },
                        set(newValue){
                            console.log(`有人把myRef這個容器中數(shù)據(jù)改了：${newValue}`);
                            clearTimeout(timer)
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() //通知vue去重新解析模板，重新再一次調(diào)用get()
                            },500)
                        }
                    }
                })
            }
            // let keyword = ref('hello')  //使用內(nèi)置提供的ref
            let keyword = myRef('hello')  //使用自定義的ref
            return {
                keyword,
            }
        },
    }
</script>

//父組件
<script setup>
import { ref,reactive,toRefs,provide } from 'vue';
import ChildVue from './components/Child.vue';
let car = reactive({
  name: '奔馳',
  price: '40w'
})
provide('car',car) //給自己的后代組件傳遞數(shù)據(jù)
const {name, price} = toRefs(car)
</script>
<template>
  <div>
    <h3>我是父組件, {{name}}--{{price}}</h3>
    <ChildVue></ChildVue>
  </div>
</template>
<style>
.app{
  background-color: gray;
  padding: 10px;
  box-sizing: border-box;
}
</style>

//子組件
<script setup>
import { ref } from '@vue/reactivity';
import SonVue from './Son.vue';
</script>
<template>
  <div>
    <h3>我是子組件</h3>
    <SonVue></SonVue>
  </div>
</template>
<style>
.app2{
  background-color: rgb(82, 150, 214);
  padding: 10px;
  box-sizing: border-box;
}
</style>

//孫組件
<script setup>
import { ref,inject } from 'vue';
let car = inject('car') //拿到父組件的數(shù)據(jù)
const {name, price} = car
</script>
<template>
  <div>
    <h3>我是孫組件</h3>
    <p>{{name}}-{{price}}</p>
  </div>
</template>
<style>
.app3{
  background-color: rgb(231, 184, 56);
  padding: 10px;
  box-sizing: border-box;
}
</style>

<button @click="show = !show">切換</button>
<Transition>
  <p v-if="show">HelloWord</p>
</Transition>
//當一個 <Transition> 組件中的元素被插入或移除時，會發(fā)生下面這些事情
/**
1.Vue 會自動檢測目標元素是否應用了 CSS 過渡或動畫。如果是，則一些 CSS 過渡 class 會在適當?shù)臅r機被添加和移除
2.如果有作為監(jiān)聽器的 JavaScript 鉤子，這些鉤子函數(shù)會在適當時機被調(diào)用
3.如果沒有探測到 CSS 過渡或動畫、也沒有提供 JavaScript 鉤子，那么 DOM 的插入、刪除操作將在瀏覽器的下一個動畫幀后執(zhí)行
*/
//針對CSS 的過渡效果
/**
1.v-enter-from：進入動畫的起始狀態(tài)。在元素插入之前添加，在元素插入完成后的下一幀移除。
2.v-enter-active：進入動畫的生效狀態(tài)。應用于整個進入動畫階段。在元素被插入之前添加，在過渡或動畫完成之后移除。這個 class 可以被用來定義進入動畫的持續(xù)時間、延遲與速度曲線類型
3.v-enter-to：進入動畫的結(jié)束狀態(tài)。在元素插入完成后的下一幀被添加 (也就是 v-enter-from 被移除的同時)，在過渡或動畫完成之后移除。
4.v-leave-from：離開動畫的起始狀態(tài)。在離開過渡效果被觸發(fā)時立即添加，在一幀后被移除
5.v-leave-active：離開動畫的生效狀態(tài)。應用于整個離開動畫階段。在離開過渡效果被觸發(fā)時立即添加，在過渡或動畫完成之后移除。這個 class 可以被用來定義離開動畫的持續(xù)時間、延遲與速度曲線類型。
6.v-leave-to：離開動畫的結(jié)束狀態(tài)。在一個離開動畫被觸發(fā)后的下一幀被添加 (也就是 v-leave-from 被移除的同時)，在過渡或動畫完成之后移除。
*/

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

//彈窗實現(xiàn)
<script setup>
import { ref,inject } from 'vue';
let isShow = ref(false)
</script>
<template>
  <div>
      <button @click="isShow = true">點我彈窗</button>
      <teleport to="body"> //定位到body
        <div v-if="isShow">
            <div>
                <h4>我是一個彈窗</h4>
                <h5>內(nèi)容</h5>
                <h5>內(nèi)容</h5>
                <h5>內(nèi)容</h5>
                <button @click="isShow = false">關閉</button>
            </div>
        </div>
      </teleport>
  </div>
</template>
<style>
.dialog{
    width: 300px;
    height: 300px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: blueviolet;
    margin: 0 auto;
}
.mask{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
</style>

<script setup>
import { defineAsyncComponent } from 'vue'; //引入異步組件
const ChildVue = defineAsyncComponent(()=> import('./components/Child.vue')) //這叫做動態(tài)引入
//這種引入叫做異步引入，如果app不出來的話，那么Child組件也不會引入進來，有一個先后順序
// import ChildVue from './components/Child.vue'; //靜態(tài)引入
// 得等，等所有的組件加載完成之后app才會一起出現(xiàn)
/**
 * Suspense這個標簽，底層就內(nèi)置了插槽，就可以解決異步引入有時候刷新先后出來慢的問題
 * v-slot:default 表示默認的輸出組件
 * v-slot:fallback 表示如果頁面加載的慢了，會優(yōu)先展示這個內(nèi)容，有點像刷新頁面的時候數(shù)據(jù)回來的慢了，就加載一會兒
*/
</script>
<template>
  <div>
    <h3>我是父組件</h3>
    <Suspense>
      <template v-slot:default>
        <ChildVue></ChildVue>
      </template>
      <template v-slot:fallback>
        <h3>稍等，加載中....</h3>
      </template>
    </Suspense>
  </div>
</template>
<style>
.app{
  background-color: gray;
  padding: 10px;
  box-sizing: border-box;
}
</style>
/**還有一種方法就是在子組件中，setup返回一個promise對象，這里之所以可以使用setup返回promise的原因
是: 我們引入的是異步組件且使用了<Suspense></Suspense>
*/

onMounted()
onUpdated()
onUnmounted()
onBeforeMount()
onBeforeUpdate()
onBeforeUnmount()
onActivated()
onDeactivated()
onServerPrefetch()

//1.onErrorCaptured()：注冊一個鉤子，在捕獲了后代組件傳遞的錯誤時調(diào)用。
function onErrorCaptured(callback: ErrorCapturedHook): void
type ErrorCapturedHook = (
  err: unknown,
  instance: ComponentPublicInstance | null,
  info: string
) => boolean | void
//2.onRenderTracked()：注冊一個調(diào)試鉤子，當組件渲染過程中追蹤到響應式依賴時調(diào)用。 
function onRenderTracked(callback: DebuggerHook): void
type DebuggerHook = (e: DebuggerEvent) => void
type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}
//3.onRenderTriggered()：注冊一個調(diào)試鉤子，當響應式依賴的變更觸發(fā)了組件渲染時調(diào)用。
function onRenderTriggered(callback: DebuggerHook): void
type DebuggerHook = (e: DebuggerEvent) => void
type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}
//4.onServerPrefetch():注冊一個異步函數(shù)，在組件實例在服務器上被渲染之前調(diào)用。
function onServerPrefetch(callback: () => Promise<any>): void
/**
補充：1.如果這個鉤子返回了一個 Promise，服務端渲染會在渲染該組件前等待該 Promise 完成。
      2.這個鉤子僅會在服務端渲染中執(zhí)行，可以用于執(zhí)行一些僅存在于服務端的數(shù)據(jù)抓取過程
*/
//試例：
<script setup>
import { ref, onServerPrefetch, onMounted } from 'vue'
const data = ref(null)
onServerPrefetch(async () => {
  // 組件作為初始請求的一部分被渲染
  // 在服務器上預抓取數(shù)據(jù)，因為它比在客戶端上更快。
  data.value = await fetchOnServer(/* ... */)
})
onMounted(async () => {
  if (!data.value) {
    // 如果數(shù)據(jù)在掛載時為空值，這意味著該組件
    // 是在客戶端動態(tài)渲染的。將轉(zhuǎn)而執(zhí)行
    // 另一個客戶端側(cè)的抓取請求
    data.value = await fetchOnClient(/* ... */)
  }
})
</script>

// 在新的vue-router里面尤大加入了一些方法，比如這里代替this的useRouter，具體使用如下：
//引入路由函數(shù)
import { useRouter } from "vue-router";
//使用
setup() {
    //初始化路由
    const router = useRouter();
    router.push({
        path: "/"
    });
    return {};
}

<template>
  <h2 ref="root">姓名</h2>
</template>
<script>
    //使用setup的注意事項
    import { onMounted, ref } from 'vue'
    export default {
        name: 'test9',
        setup(){
            const root  = ref(null)
            onMounted(()=>{
                console.log(root.value);
            })
            return {
                root
            }
        },
    }
</script>
//第二種方法，也可以通過getCurrentInstance來獲取
<template>
  <h2 ref="root">姓名</h2>
</template>
<script>
    //使用setup的注意事項
    import { onMounted, ref, getCurrentInstance } from 'vue'
    export default {
        name: 'test9',
        setup(){)
            const {proxy} = getCurrentInstance()
            onMounted(()=>{
                console.log(proxy.$refs.root);
            })
            return {
            }
        },
    }
</script>

//關于element在vue3的使用方法，沒有this.$message等方法解決方案
<template>
  <!-- 測試組件 -->
  <button @click="doLogin">登錄</button>
</template>
<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'Test',
  setup () {
    const instance = getCurrentInstance() // vue3提供的方法，創(chuàng)建類似于this的實例
    const doLogin = () => {
      instance.proxy.$message({ type: 'error', text: '登錄失敗' }) // 類似于this.$message()
    }
    return { doLogin }
  },
   // 如果想試用this.$message，須在mounted鉤子函數(shù)中，setup中沒有this實例，
   //但vue3.0中還是建議在setup函數(shù)中進行邏輯操作
  mounted () {
    this.$message({ type: 'error', text: '登錄失敗' })
  }
}
</script>