轻松学会Vue3的setup

组合api

通过创建vue组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。
setup()的执行时机相当于created,没有data 等

<script>
	export default {
		setup(){
		
			return {
			
			}
		}
	}
</script>

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。
ref 对象仅有一个 .value ，指向该内部值。
使用需要引入ref

<script>
	import {ref} from 'vue'
	export default {
		setup(){
			const count = ref(0)
			console.log(count.value)
			
			return {
				count
			}
		}
	}
</script>

reactive

返回对象的响应式副本
响应式转换是“深层”的——它影响所有嵌套 property。

<template>
    <p v-for="(item,index) in list" :key="index">{{item}}</p>
</template>

<script>
	// reactive 定义引用类型的数据
	import {reactive} from 'vue'
	export default {
		setup(){
			const list = reactive([
				'Vue', 'React', 'Angular'
			])
			return {
				list
			}
		}
		
	}
</script>

watch

监听对象的变化

<script>
	import {ref,watch} from 'vue'
	export default {
		setup(){
			const counter = ref(0)
			watch(counter, (newValue, oldValue) => {
			  console.log('最新值: ' + counter.value)
			})

			return {
				counter
			}
		}
	}
</script>

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

<script>
	import {ref,watchEffect} from 'vue'
	export default {
		setup(){
			const num = ref(0)
			const stop = watchEffect(()=>{
			    // 这个回调函数引用的值，都会被监听
			    console.log(num.value);
			    localStorage.setItem("num",num.value);
			})

			return {
				stop
			}
		}
	}
</script>

computed 属性

接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。

setup() {
			const counter = computed({
				// 当获取counter值调用函数
				get() {
					return num.value
				},
				// 设置counter值调用函数
				set(v) {
					num.value = v;
					if (v > 10) {
						num.value = 20；
					};
				}
			})
			return {
				counter
			}
		}

生命周期

选项式 API	setup
beforeCreate	不需要*
created	不需要*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

全局配置

添加一个可以在应用的任何组件实例中访问的全局 property

app.config.globalProperties.$mysay = function(msg){alert(msg+"你好")};

setup函数

使用 setup 函数时，它将接收两个参数：props，context
setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

setup(props,context){

}

context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值：

export default {
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

自定义组合api

定义一个监听窗口大小的api

import {ref,onMounted,onBeforeUnmount} from 'vue'
function useWin(){
	// 定义一个响应式数据size 是窗口的宽高
	const size = ref({
		w:window.innerWidth,
		h:window.innerHeight
	})
	// 定义方法 更新size
	function onReize(){
		// 更新size
		size.value = {
			w:window.innerWidth,
			h:window.innerHeight
		}
	}
	// 当挂载添加window的resize执行onResize方法
	onMounted(()=>{
		window.addEventListener("resize",onReize)
	})
	// 卸载前移除事件
	onBeforeUnmount(()=>{
		window.removeEventListener("resize",onReize)
	})
	// 监听变化更新宽高
	return size;
}
// 导出
export {useWin}

<template>
	<p>宽：{{winSize.w}}</p>
	<p>高：{{winSize.h}}</p>
</template>
<script>
	import {useWin} from '@/utils/utils.js'
	export default {
		setup() {

			return {
				winSize:useWin()
			}
		}
	}
</script>

setup语法糖

一般写法需要导出很不方便，解决这个问题可以使用<script setup></script>
不在需要导出，组件不需要注册非常方便

<script setup>
	import { ref } from "vue";
	import HelloWorld from "@/components/HelloWorld.vue"
	const count = ref(100);
	const setCount = function(v){
		count.value+=v;
	}
</script>