vue3笔记

1. 使用nextTick

import { nextTick } from "vue";
const fn = async () => {
  ...
  await nextTick()
  ...
}

2. computed使用方法

import { computed } from '@vue/reactivity'
// 简写
const val = computed(()=>{
  return 'xxxx'
})
// 完整写法
const val = computed({
  get() {
    return 'xxx'
  },
  set(value) {
   val.value = value
  }
})

3. 获取ref元素的方法

//情况一：
<template>
	<div ref="refs">xxx</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const refs = ref<HTMLElement>()
	console.log(refs.value)
	//<div>xxx</div>
</script>

//情况二：
<template>
	<div ref="ref1">xxx</div>
    <div ref="ref2">xxx</div>
</template>

<script lang="ts" setup>
	import { getCurrentInstance } from 'vue'
	const allRef = getCurrentInstance()
	console.log(allRef.refs)
	//ref1:div
	//ref2:div
</script>

4. watch监听

5. 子组件执行父组件的方法

// 父组件
<child @handle="handle"></child>
const handle = val => {
	console.log('xxx',val)
}
// 子组件
import { defineEmits } from "vue";
const emit = defineEmits(['handle'])
emit('handle','aaa') // xxx aaa