<script lang="ts" setup>
	import { ref, onMounted } from 'vue'

	// 响应式状态
	const count = ref(0)

	// 更改状态、触发更新的函数
	function increment() {
		count.value++
	}

	// 生命周期钩子
	onMounted(() => {
		console.log(`计数器初始值为 ${count.value}。`)
	})
</script>

<template>
	<button class="btn" @click="increment">点击了：{{ count }} 次</button>
</template>

<style>
	.btn {
		background-color: #c7000b;
	}
</style>

npm create vite@latest

<script setup lang="ts">
	import { ref, watch } from 'vue'

	const a = ref('Hello');

	// 响应式变量 a 发生修改，关联事件(alert) 会被触发
	watch(a, () => {
		alert(a.value)
	})


	// 5 秒后，修改响应式变量 a
	setTimeout(() => {
		a.value = 'Hello World!'
	}, 5000)
</script>

<template>
	<div>
		<!-- 响应式变量 a 发生修改，模板渲染内容也会及时跟进 -->
		<p>{{ a }}</p>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'

	const refState = ref(0);
	console.log(refState) // Ref 对象
	console.log(refState.value) // 0

	const reactiveState = reactive({ state: 0 })
	console.log(reactiveState.state) // 0

	function clickHandler() {
		// ref 对象的设置也需要 .value
		refState.value++;
		reactiveState.state++;
	}
</script>

<template>
	<div>
		<!-- 注意在模板中访问 ref 变量不需要 value  -->
		<p>{{ refState }}</p>
		<p>{{ reactiveState.state }}</p>
		<button @click="clickHandler">+1</button>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive, computed } from 'vue'

	const a = ref(1);
	const b = reactive({ count: 2 })

	// 函数内部无论是 a 还是 b 发生变化，都会自动触发响应式变量 sum 的重新计算，永远保持 sum = a + b.count
	const sum = computed(() => a.value + b.count)

	setTimeout(() => {
		a.value = 2;
		b.count = 3;
		// 注意访问 computed 创建的响应式变量时也要加上 .value
		console.log(sum.value) // 5
	}, 5000)
</script>

<template>
	<div>
		<!-- 注意在模板中访问 ref 变量不需要 value  -->
		<p>a = {{ a }}</p>
		<p>b.count = {{ b.count }}</p>
		<p>sum = a + b.count = {{ sum }}</p>
	</div>
</template>

import {
	ref,
	reactive,
	watch
} from 'vue'

const count = ref(0)
const data = reactive({
	count: 0
})

watch(count, (newVal, oldVal) => {
	// count changed from 0 to 1
	console.log(`count changed from ${oldVal} to ${newVal}`)
})

watch(data, (newVal, oldVal) => {
	// { count: 2 }
	console.log(oldVal)

	// { count: 2 }
	console.log(newVal)
})

// 检测 reactive 对象内部属性时，需要写成函数返回的形式
watch(() => data.count, (newVal, oldVal) => {
	// data.count changed from 0 to 2
	console.log(`data.count changed from ${oldVal} to ${newVal}`)
})

// 观测多个 响应式对象/属性 的变化
watch([
	count,
	() => data.count
], ([newCount, newDataCount], [oldCount, oldDataCount]) => {
	// count changed from 0 to 1
	// data.count changed from 0 to 2
	console.log(`count changed from ${oldCount} to ${newCount}`)
	console.log(`data.count changed from ${oldDataCount} to ${newDataCount}`)
})

setTimeout(() => {
	count.value = 1
	data.count = 2
}, 5000)

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount } from 'vue'

	const el = ref<HTMLDivElement>()
	console.log(el.value) // undefined
	onMounted(() => {
		// 通常在 onMounted 中获取 DOM
		console.log(el.value) // HTMLDivElement
	})

	const timer = setTimeout(function () {
		// 定时器任务
	}, 5000)
	onBeforeUnmount(() => {
		// 在 onBeforeUnmount 中注销定时器、绑定事件等
		clearTimeout(timer)
	})
</script>

<template>
	<div ref="el"></div>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount } from 'vue'

	const a = ref<HTMLDivElement>()
	onMounted(() => {
		console.log(a.value) // HTMLDivElement
		console.log(a.value.innerText) // aaa
	})

	const b = ref<HTMLDivElement>()
	onMounted(() => {
		console.log(b.value) // HTMLDivElement
		console.log(b.value.innerText) // bbb
	})

	const c = ref<HTMLDivElement>()
	onMounted(() => {
		console.log(c.value) // HTMLDivElement
		console.log(c.value.innerText) // ccc
	})
</script>

<template>
	<div>
		<div ref="a">aaa</div>
		<div ref="b">bbb</div>
		<div ref="c">ccc</div>
	</div>
</template>

<!-- 子组件 child.vue -->
<script setup lang="ts">
	import { reactive } from 'vue'

	const props = withDefaults(defineProps<{
		// props 的类型
		text ?: string;
		data ?: Record<string, any>;
		clickCallback ?: (data : Record<string, any>) => void
	}>(), {
		// props 的默认值
		text: 'Button',
		data: () => ({}),
		clickCallback: () => { }
	})

	const childData = reactive({
		...props.data,
		count: 0,
	})

	function clickHandler() {
		childData.count++
		props.clickCallback(childData)
	}
</script>

<template>
	<button @click="clickHandler">
		{{ text }}
	</button>
</template>

<!-- 父组件中使用子组件 child.vue -->
<script setup lang="ts">
	import Child from './child.vue'

	function clickHandler(data : Record<string, any>) {
		console.log('子组件的数据对象：', data); // 子组件的数据对象：{ message: 'parent', count: 1 }
	}
</script>

<template>
	<Child text="Hello World" :data="{ message: 'parent' }" :clickCallback="clickHandler" />
</template>

<!-- 子组件 child.vue -->
<script setup lang="ts">
	import { reactive } from 'vue'

	const emit = defineEmits<{
		(event : 'add', val : string, list : string[]) : void;
	}>();

	const list : string[] = reactive([])

	function clickHandler() {
		const value = `第${String(list.length + 1)}项`
		list.push(value)
		emit('add', value, list);
	}
</script>

<template>
	<div>
		<ul>
			<li v-for="(item, index) in list" :key="index">{{ item }}</li>
		</ul>
		<button @click="clickHandler">Add</button>
	</div>
</template>

<!-- 父组件中使用子组件 child.vue -->
<script setup lang="ts">
	import Child from './child.vue'

	function addHandler(value : string, list : string[]) {
		console.log('向子组件列表添加项：', value)
		console.log('子组件当前列表：', list)
	}
</script>

<template>
	<Child @add="addHandler" />
</template>

<!-- 子组件 child.vue -->
<script setup lang="ts">
	import { ref, watch } from 'vue'

	const props = withDefaults(defineProps<{
		value ?: string;
	}>(), {
		value: ''
	})

	const emit = defineEmits<{
		(event : 'update:value', val : string) : void;
	}>();

	const valueModel = ref(props.value);

	watch(() => props.value, (val) => {
		valueModel.value = val
	})

	watch(valueModel, (val) => {
		emit('update:value', val)
	})

	function inputHandler(event : Event) {
		const { value } = event.target as HTMLInputElement
		valueModel.value = value
	}

	function clickHandler() {
		valueModel.value += 'Hello World!'
	}
</script>

<template>
	<div>
		<input :value="valueModel" @input="inputHandler" />
		<button @click="clickHandler">子组件内部修改 value</button>
	</div>
</template>

<!-- 父组件中使用子组件 child.vue -->
<script setup lang="ts">
	import Child from './child.vue'
	import { ref, watch } from 'vue'

	const msg = ref('')
</script>

<template>
	<div>
		<Child v-model:value="msg" />
		<p>{{ msg }}</p>
	</div>
</template>

<!-- 子组件 child.vue -->
<script setup lang="ts">
	import { ref } from 'vue'

	const isVisible = ref(false);

	function open() {
		isVisible.value = true;
	}

	function close() {
		isVisible.value = false;
	}

	defineExpose({
		isVisible,
		open,
		close
	})
</script>

<template>
	<div v-if="isVisible">Child</div>
</template>

<!-- 父组件中使用子组件 child.vue -->
<script setup lang="ts">
	import Child from './child.vue'
	import { ref, computed } from 'vue'

	const childInstance = ref<InstanceType<typeof Child>>()

	const showState = computed(() => `${childInstance.value?.isVisible ? '显示' : '隐藏'}`)

	function showHandler() {
		childInstance.value?.open()
		console.log('当前组件的状态：', showState.value)
	}

	function hideHandler() {
		childInstance.value?.close();
		console.log('当前组件的状态：', showState.value)
	}
</script>

<template>
	<div>
		<button @click="showHandler">显示 Child</button>
		<button @click="hideHandler">隐藏 Child</button>
		<p>当前组件的状态：{{ showState }}</p>
		<Child ref="childInstance" />
	</div>
</template>

<!-- radio-group.vue -->
<script setup lang="ts">
	import { ref, watch, provide, Ref } from 'vue'

	const props = withDefaults(defineProps<{
		modelValue ?: any;
	}>(), {
		modelValue: ''
	})

	const emit = defineEmits<{
		(event : 'update:modelValue', val : any) : void;
	}>();

	// 实现选中项 v-model 双向绑定
	const model = ref(props.modelValue)
	watch(() => props.modelValue, (val) => { model.value = val })
	watch(model, (val) => { emit('update:modelValue', val) })

	// 将组件的上下文对象向下传递
	const context = {
		radioGroupSelected: model,
		selections: <Ref<boolean>[]>[]
	};

	export type RadioGroupContext = typeof context

	provide('radio-group', context)
</script>

<template>
	<ul class="radio-group">
		<slot />
	</ul>
</template>

<!-- radio.vue -->
<script setup lang="ts">
	import { ref, watch, inject, Ref } from 'vue'
	import type { RadioGroupContext } from './radio-group.vue'

	const props = withDefaults(defineProps<{
		/** 单个 radio 的选中状态 */
		modelValue ?: boolean;

		/** radio 的绑定值 */
		value ?: any;
	}>(), {
		modelValue: false,
		value: ''
	})

	const emit = defineEmits<{
		(event : 'update:modelValue', val : boolean) : void;
	}>();

	// 获取 radio-group 组件的上下文对象
	const radioGroupContext = inject<RadioGroupContext>('radio-group')

	// 实现选中状态 v-model 双向绑定
	const model = ref(props.modelValue)
	watch(() => props.modelValue, (val) => { model.value = val })
	watch(model, (val) => { emit('update:modelValue', val) })

	if (radioGroupContext) {
		// 若检测到父级 radio-group 组件，将自身状态推入上下文对象
		radioGroupContext.selections.push(model);
	}

	function changeHandler(event : Event) {
		const { checked } = event.target as HTMLInputElement
		model.value = checked

		if (checked && radioGroupContext) {
			// 子组件被选中时，根据子组件绑定的 value，控制父组件的 v-model 绑定值
			radioGroupContext.radioGroupSelected.value = props.value

			// 取消其他同级 radio 的选中状态
			radioGroupContext.selections.forEach((selection) => {
				if (selection !== model) {
					selection.value = false
				}
			})
		}
	}
</script>

<template>
	<li class="radio">
		<input type="radio" :checked="model" @change="changeHandler" />
		<slot />
	</li>
</template>

<!-- 父组件中使用子组件 radio-group.vue -->
<script setup lang="ts">
	import { ref } from 'vue'
	import RadioGroup from './radio-group.vue'
	import Radio from './radio.vue'

	const value = ref('')
</script>

<template>
	<div>
		<RadioGroup v-model="value">
			<Radio value="11111">选项 1</Radio>
			<Radio value="22222">选项 2</Radio>
			<Radio value="33333">选项 3</Radio>
		</RadioGroup>
		<p>当前选中的值：{{ value }}</p>
	</div>
</template>

<!-- 子组件 child.vue -->
<script setup lang="ts">
	import { reactive } from 'vue'

	const data = reactive({
		default: 0,
		special: 0
	})
</script>

<template>
	<div>
		<p>defaultCount：{{ data.default }}</p>
		<slot :data="data" />
		<p>specialCount：{{ data.special }}</p>
		<slot name="special" :data="data" />
	</div>
</template>

<!-- 父组件中使用子组件 child.vue -->
<script setup lang="ts">
	import Child from './child.vue'
</script>

<template>
	<Child>
		<template #default="{ data }">
			<button @click="data.default++">Click</button>
		</template>
		<template #special="{ data }">
			<button @click="data.special++">Click</button>
		</template>
	</Child>
</template>

// index.ts
import Comp from './comp.vue';

export { Comp }
export * from './composables';
export * from './props';

// props.ts
import { InferVueDefaults } from '@/utils';
import type Input from './Input.vue';

export interface InputProps {
	/** 原生 input 类型 */
	type ?: string;

	/** 绑定值 */
	modelValue ?: string;

	/** 输入框占位文本 */
	placeholder ?: string;

	/** 是否显示清楚按钮 */
	clearable ?: boolean;
}

export type RequiredInputProps = Required<InputProps>

export function defaultInputProps() : Required<InferVueDefaults<InputProps>> {
	return {
		type: 'text',
		modelValue: '',
		placeholder: '',
		clearable: false
	};
}

export interface InputEmits {
	(event : 'update:modelValue', val : string) : void;
	(event : 'input', val : string) : void;
	(event : 'clear') : void;
	(event : 'focus') : void;
	(event : 'blur') : void;
}

export type InputInstance = InstanceType<typeof Input>

type NativeType = null | number | string | boolean | symbol | Function;
type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never);

/** 推断出 props 默认值的类型 */
export type InferVueDefaults<T> = {
	[K in keyof T]?: InferDefault<T, T[K]>;
};

<!-- Input.vue -->
<script setup lang="ts">
	import {
		defaultInputProps,
		InputProps,
		InputEmits
	} from './props';

	// 声明自定义选项，如组件名称 name
	defineOptions({
		// ...
	})

	// 定义属性 props
	const props = withDefaults(
		defineProps<InputProps>(),
		defaultInputProps(),
	);

	// 定义事件 emits
	const emit = defineEmits<InputEmits>();

	// 组件实现逻辑


	// 向外暴露属性与方法
	defineExpose({
		// ...
	})
</script>

<template>
	<!-- ... -->
</template>

<script setup lang="ts">
	import { InputInstance } from './input'
	import { ref } from 'vue'

	const input = ref<InputInstance>()
</script>

<template>
	<Input ref="input" />
</template>

<!-- MyInput.vue -->
<script setup lang="ts">
	import {
		defaultInputProps,
		InputProps,
		InputEmits
	} from './input';

	interface MyInputProps extends InputProps {
		// ...
	}

	const props = withDefaults(
		defineProps<MyInputProps>(),
		{
			...defaultInputProps(),
			// 更多属性的默认值
		},
	);

	interface MyInputEmits extends InputEmits {
		// ...
	}

	const emit = defineEmits<MyInputEmits>();
</script>

<script setup>
	import {
		useFeatureA
	} from './featureA.js'
	import {
		useFeatureB
	} from './featureB.js'
	import {
		useFeatureC
	} from './featureC.js'

	const {
		foo,
		bar
	} = useFeatureA()
	const {
		baz
	} = useFeatureB(foo)
	const {
		qux
	} = useFeatureC(baz)
</script>

// composables.ts
import {ref, watch, onMounted, onBeforeUnmount} from "vue";
import {RequiredInputProps, InputEmits} from "./props";

export function useInputModelValue(props: RequiredInputProps, emit: InputEmits) {
	const model = ref(props.modelValue);

	watch(
		() => props.modelValue,
		(val) => {
			model.value = val;
		}
	);

	watch(model, (val) => {
		emit("update:modelValue", val);
	});

	return {model};
}

export function useInputEvents(emit: InputEmits, modelValueContext: ReturnType<typeof useInputModelValue>) {
	const inputEl = ref<HTMLInputElement>();
	const {model} = modelValueContext;

	function focus() {
		inputEl.value?.focus();
	}

	function blur() {
		inputEl.value?.blur();
	}

	function focusHandler() {
		emit("focus");
	}

	function blurHandler() {
		emit("blur");
	}

	function inputHandler(e: Event) {
		const {value} = e.target as HTMLInputElement;
		model.value = value;
		emit("input", value);
	}

	// 组件挂载后获取 dom
	onMounted(() => {
		inputEl.value?.addEventListener("focus", focusHandler);
		inputEl.value?.addEventListener("blur", blurHandler);
		inputEl.value?.addEventListener("input", inputHandler);
	});

	// 组件注销前及时解绑事件
	onBeforeUnmount(() => {
		inputEl.value?.removeEventListener("focus", focusHandler);
		inputEl.value?.removeEventListener("blur", blurHandler);
		inputEl.value?.removeEventListener("input", inputHandler);
	});

	return {
		inputEl,
		focus,
		blur
	};
}

export function useInputClearable(emit: InputEmits, modelValueContext: ReturnType<typeof useInputModelValue>) {
	const {model} = modelValueContext;

	function clearHandler() {
		model.value = "";
		emit("clear");
	}

	return {clearHandler};
}

<!-- input.vue -->
<script setup lang="ts">
	import {
		defaultInputProps,
		InputProps,
		InputEmits
	} from './props';
	import {
		useInputModelValue,
		useInputClearable,
		useInputEvents
	} from './composables'

	defineOptions({
		// 自定义选项
	})

	const props = withDefaults(
		defineProps<InputProps>(),
		defaultInputProps(),
	)

	const emit = defineEmits<InputEmits>()

	// 组件实现逻辑
	const modelValueContext = useInputModelValue(props, emit)
	const { model } = modelValueContext

	const { inputEl, focus, blur } = useInputEvents(emit, modelValueContext)

	const { clearHandler } = useInputClearable(emit, modelValueContext)

	defineExpose({
		clear: clearHandler,
		focus,
		blur,
	})
</script>

<template>
	<div>
		<input ref="inputEl" :type="type" :value="model" :placeholder="placeholder" />
		<button v-if="clearable" @click="clearHandler">清除</button>
	</div>
</template>