uniapp项目vue2升级vue3简单记录

看到好多开源项目都升级了vue3，看文章说vue3性能升级很多，而且组合式api很香，遂把最近开发的自助洗车app升级下，在此记录下出现的问题。

uniapp升级vue3官方指南

1. 我是先去vue官网看了下vue3的组合式api，有个大概了解，方便升级使用。
2. 然后根据uniapp升级vue3官方指南把框架层面的先更改。
3. 测试访问没问题后再做代码上的更改。（vue3兼容vue2的代码风格）

把代码风格改为组合式api

简单总结组合式api就是把原有的data，methods等等这些以前分开的代码块，都可以放在一起了，其他的刚开始不要多想。因为我第一遍在看vue官网的时候，看的稀里糊涂。

1. 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)
		}

}

1. 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>

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

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

网上说提升30%性能，或许我这个项目太小，没感到明显差距，不过组合式api确实是简单方便很多。

另外vue3废弃了filter，可以改用方法调用或者computed。

先写到这里，码字不易，如有错误，请指正。