[Vue3.x]实际开发中遇到的问题

1. 线上不支持使用 const {ctx} = getCurrentInstance()

解决方案: const = getCurrentInstance() 但是不建议

2. 获取组件实例 类似于vue2.x ref="stage" 获取stage实例

解决方案:

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

// script

setup() {
	const refStage = ref(null)
	return {
		refStage
	}
}

3. 自定义指令 使用指令的组件实例时 失去响应性

// instance

<template>
	<div v-directive></div>
</template>

export default {

	setup() {
		const list = inject('list', [])
		return {
			list
		}
	}
}

// v-directive
const instance = null

const mousedownHandle = () => {
	console.log(instance.list.length)
}
export default {

	onmount(el, binding) {
		instace = binding.instance
		$(el).on('mousedown', mousedownHandle)
	}
}

// instance.list.length 一直等于0, 即使instance发生变化 依然是0

解决方案:

const mousedownHandle = () => {
	console.log(instance.list.length)
}
export default {
	
	onmount(el, binding) {
		const instace = binding.instance
		$(el).on('mousedown', {instace}, mousedownHandle)
	}
}