// // 校验 submit 事件
// submit: ({ email, password }) => {
// if (email && password) {
// return true
// } else {
// console.warn(‘Invalid submit event payload!’)
// return false
// }
// }
// })

// function submitForm(email, password) {
// emit(‘submit’, { email, password })
// }
// <input
// type=“text”
// :value=“lastName”
// @input=“$emit(‘update:lastName’, $event.target.value)”
// />
import { onMounted, watch, watchEffect, computed, nextTick, reactive, ref } from “vue”;
import { CacheToken } from “@/constants/cacheKey”;
import baseService from “@/service/baseService”;
import { setCache } from “@/utils/cache”;
import { ElMessage } from “element-plus”;
import { getUuid } from “@/utils/utils”;
import app from “@/constants/app”;
import { useAppStore } from “@/store”;
import { useRouter } from “vue-router”;
import { useI18n } from “vue-i18n”;

const store = useAppStore();

const router = useRouter();
const { t } = useI18n();

// 在一个特定的 DOM 元素或子组件实例被挂载后，
// 获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，
// 或在一个元素上初始化一个第三方库
const inputRef = ref<HTMLInputElement | null>(null)

// 定义响应式变量
const count = ref(0);
// 返回原始对象的代理对象（proxy)
const raw = { count: 0 };
// 定义响应式对象
const state = reactive(raw)

// 一个计算属性 ref
const computedValue = computed(() => {
return state.count > 3 ? ‘Yes’ : ‘No’
})

// 侦听状态后，执行异步操作； 不能直接侦听响应式对象的属性值
watch(state, async (newValue, oldValue) => {
console.log(newValue.count, oldValue.count);
})

// getter函数侦听
watch(() => state.count, (count)=>{
console.log(‘getter-count-watch’+count);
})
// 多属性侦听
watch([() => state.count, state], ([count, state])=>{
console.log(‘多-getter-count-watch’+count);
console.log(‘多-count-watch’, state.count);

// 立即执行；获取更新后的dom

},{ immediate: true, flush: ‘post’ })

// 副作用侦听
watchEffect(() => {
// 立即执行watch
console.log(‘watchEffect’ + state.count)

},{flush: ‘post’ })

const clickment = () => {
count.value++;
state.count++;
// raw.count++;
nextTick(() => {
// 访问更新后的 DOM

// ref
(inputRef.value as any).focus()

})
}
// 在组件完成初始渲染并创建 DOM 节点后运行
onMounted(() => {
console.log("count: " + count);
});

setTimeout(() => {
onMounted(() => {
// 异步注册时当前组件实例已丢失
// 这将不会正常工作
})
}, 100)