uniapp项目vue2升级vue3的实践

uniapp升级vue3官方指南](https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html)

vue2的data和mehtod代码：

data() {
			return {
				dataA: {},
				dataB: [],
				...
			}
	},
methods: {
			methodA() {},
			methodB() {},
			...
}
		

[vue3的data和mehtod写法：

import {ref,reactive,toRefs} from 'vue'
setup() {
	#方式1(这是我刚开始的写法)
	#这个写法有个很大的弊端就是如果我定义了很多data和method后，return代码会出现很长
	#return{a,b,c,d,e,f,g........}
	const dataA = ref({})
	const dataB = ref([])
	const methodA = () => {
		#注意:必须加value
		console.log(dataA.value);
	}
	const methodB = () => {}
	#必须return出去才能在view中使用
	return {dataA,dataB,methodA,methodB}
	#方式2(创建一个对象包裹，最后只需要返回这个对象即可)
	#方式2的代码更简洁且不需要加value，跟以前使用vue2区别不大。
	const v3data = reactive({
		dataA:{},
		dataB:{},
		methodA:() => {
			#无需加value
			console.log(v3data.dataA);
		},
		methodB:() => {}
	})
	return {
				#只需这样返回即可，toRefs的作用自行搜索，这里不做解释。
				...toRefs(v3Data)
		}
	
}
		

vue2中父子组件的调用方式

#parent.vue

<template>
  <div>
      <child ref="childRef" @myClick="onChildClick"/>
      <Button type="primary" @click="parentClick">触发子组件方法</Button>
  </div>
</template>

<script>
export default {
  methods: {
    parentClick() {
    	#父组件调用子组件方法
     	this.$childRef.childMethod()
    },
    onChildClick(){
    	console.log('子组件调用')
    }
  }
}
</script>
 # child .vue
<template>
  <div>
    <h1>子组件</h1>
    <Button type="primary" @click="sonClick">触发父组件方法</Button>
  </div>
</template>

<script>
export default {
 methods: {
    sonClick () {
      #子组件调用父组件
      this.$emit('myClick');
    },
    childMethod(){
	}
  }
}
</script>

vue3中父子组件的调用方式

#parent.vue

<template>
  <div>
      <child ref="childRef" @myClick="onChildClick"/>
      <Button type="primary" @click="parentClick">触发子组件方法</Button>
  </div>
</template>

<script>
import {ref,reactive,toRefs} from 'vue'
export default {
	setup() {
		const v3data = reactive({
			#在这里定义一个和子组件ref名称相同的对象置为null,vue会自动给赋值
			childRef:null,
			parentClick:()=>{
		    	#父组件调用子组件方法
		     	v3data.childRef.childMethod()
		    },
		    onChildClick:()=>{
		    	console.log('子组件调用')
		    }
	    })
	    #这里一定要return出去，否则childRef一直为null
	    return {...toRefs(v3Data)}
}

}
</script>
 # child .vue
<template>
  <div>
    <h1>子组件</h1>
    <Button type="primary" @click="sonClick">触发父组件方法</Button>
  </div>
</template>

<script>
import {ref,reactive,toRefs} from 'vue'
export default {
	setup(props,context) {
		const v3data = reactive({
			sonClick () {
		      #子组件调用父组件
		      context.$emit('myClick');
		    },
		    childMethod(){
			}
	    })
	  return {...toRefs(v3Data)}
}

</script>

vue3中如何替代this(官方已不推荐，只作为知识点)

	import {ref,getCurrentInstance} from 'vue'
	export default {
			#proxy相当于vue2的this
			const {proxy} = getCurrentInstance()
	}