uniapp vue3 版本 setup 基本使用

uniapp vue3版本的基本使用

话说前头，要学vue3中 setup语法 要知道本身还是vue 逻辑作用都时没有发生变化的，，唯一变的就只有写法不同而已 ；；一味复制代码是无用的，注释比代码更懂你~多看注释

前期准备

安装步骤
1. npm install -g @vue/cli （全局安装vue脚手架-----如已安装请忽略）
2. npx degit dcloudio/uni-preset-vue#vite my-vue3-project (下载vue脚手架项目 )
3. cd my-vue3-project
4. npx @dcloudio/uni-app (下载uniapp依赖 )npm install
5. npm install (下载依赖 )
6. npm i sass (下载sass )
7. npm i sass-loader -D (下载sass-loader )
请安装以上步骤执行即可运行起来

1. 生命周期的使用；以及监听事件、计算事件的使用（2022/7/26 +）

	// vue2 
	<script>
		export default{
			onLoad(options){
				console.log('页面初始化')
			},
			onShow(){
				console.log('页面出现时')	
			}
		}
	</script>
	
	// vue3
	<script setup>
		import {
			onLoad,
			onShow
		} from "@dcloudio/uni-app";
		// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
		import {
			watch,
			computed
		}
		from "vue";
		
		onLoad((options) => {
			console.log('页面初始化')
		});
		onShow(() => {
			console.log('页面出现时')
		});
		// 其他方法也是一样，监听页面滚动,上拉加载 下拉刷新 等等都是一样的使用方式
		// 监听事件与计算属性与生命周期略有不同 
		// 这里我们假设计算一个名为name的变量 这是vue3中的写法 如果有多个计算方法 ，那么我们只需要将这个方法复制一个即可
		const name = ref('默认值');
		const name2 = ref ('默认值2')
		const name = computed(() => {
			let style = ""
			// do something
			// 当这个方法内的所有用到的值发生改变时 都会重新执行并计算
			return style ;
		})
		const name2 = computed(() => {
			let style = ""
			// do something
			return style ;
		})
		// 相当于vue2 中写法是：
		//	computed: {
		//		name () {
		//		let style = ""
		//		// do something
		//		return style ;
		//	}
		//}
		//  假设监听 一个 name 变量
		watch(name, (newValue, oldValue) => {
			// do something 
			// 这里就是当 name 属性值发生变化时 ，就会执行此方法
		})
		// 如果需要监听多个变量，且要做的事情是一样的 那么我们只需要把第一个参数变为数组即可
		watch([name, name2], (newValue, oldValue) => {
			// do something 
			// 这里就是当 name或者name2 值发生变化时 ，就会执行此方法
		})


</script>

2. 定义变量

	// vue2 
	<script>
		export default{
			data() {
				return {
					name: '我是变量'
				}
			}
			// js内使用变量 this.name
		}
	</script>
	
	// vue3
	<script setup>
		import { ref } from "vue";
		const name = ref('我是变量')
		// 使用 console.log(name.value)
		// 重新赋值 name.value = '我是新的值'
	</script>

3. 定义方法

	// vue2 
	<script>
		export default{
			methods:{
				action(id) {
					console.log('我是一个方法')
				}
			}
			// js内使用变量 this.action()
		}
	</script>
	
	// vue3
	<script setup>
		const action = (id) => {
			console.log('我是一个方法')
		}
		// 使用 action()
	</script>

4. 组件通讯

// vue2 
	 // 父组件 index.vue
	<view>
		<card @action="action" :name="name" ref="card"></card>
	</view>
	<script>
		export default{
			data() {
				return {
					name: '我是变量'
				}
			},
			methods:{
				action(id) {
					console.log('我是一个方法')
				},
				action2(){
					this.$refs.card.demo() // 调用子组件方法
					this.$refs.card.shopName // 调用子组件属性
				}
			}
		}
	</script>
	// 子组件 card.vue
	<view @tap="handle()">
		{{ name }}
	</view>
	<script>
		export default{
			props: {
				name: {
					type: [Number, String],
					default: ''
				}
			},
			data() {
				shopName: "商品名称"
			},
			methods:{
				handle() {
					this.$emit('action') // 子组件回调
				},
				demo() {
					console.log('我被调用了！')
				}
			}
		}
	</script>
	
	// vue3
	// 父 index.vue 
	<view>
		<card @action="action" :name="name" ref="card"></card>
	</view>
	<script setup>
		import { ref } from "vue";
		const card = ref(null) // 需要定义
		card.value.demo() // 调用子组件方法
		card.value.shopName // 调用子组件变量
		
		const name = ref('我是变量');
		const action = (id) => {
			console.log('我是一个方法')
		}
	</script>
	// 子 card.vue
	<view @tap="handle()">
		{{ props.name }}
	</view>
	<script setup>
		import { ref } from "vue";
		const emit = defineEmits(['action']); 
		const props = defineProps({
			name: {
				type: [String, Number],
				default: ''
			}
		})
		const shopName = ref('商品名称');
		const handle = () => {
			emit('action') // 子组件回调
		};
		const demo = () => {
			console.log('被使用了')
		};
		// 将子组件内的某个方法暴露后方可被外部调用
		defineExpose({
			demo
		})
	</script>
	

4. 获取当前页面栈 （获取vue2 中的this）

	// vue2 
	this.$http()
	// vue3
	const self = getCurrentPages()?. [0]
	self.$http()

代码都是一个个手写的，不是复制粘贴的 如有什么问题可以私信或评论
后续我会慢慢的梳理更多的基本使用。有什么需要的也可以评论私聊