vue3尝鲜 关于sutup函数

vue3相较与vue2 在写法上有较大的出入，刚开始使用是会有诸多不适，

setup函数是组合API的核心入口函数

1.setup函数注意点

export default {
	setup() {    }
}

• setup函数的执行时机是在beforeCreate和created之间
• 由于setup执行时机是在created之间，所以组件才刚刚被创建，而data和methods还没初始化好，所以无法在setup中使用data和methods
• setup中this指向undefined
• setup只能是同步的，不能是异步的

2. setup（porps，context） 组件间传值

porps可以接受 组件参数
context 内是组件的内置api
当你需要向父组件暴露事件时 需要 使用到 $emit 需要在context中结构出来emit

//子组件
export default {
  setup(props, context) {
  	const { emit } = context; //结构出 emit 向外暴露接口
	//  向外暴露事件 submitha
    function submitHander() {
      emit("submitha", formData);
    }
  }
 }
 
 
 //父组件
 <component :is="isName" @submitha="subMitHander"></component>
 
 ....
 此处subMitHander写在methods内的
 subMitHander(form) {
	 console.log(
		 // form,
		 `>>>>>登录信息 name:${form.value.name}，pwd:${form.value.pwd}`
	 );
 },
 
 //setup函数中
 export default {
  setup(props, context) {
  	 function subMitHander(form) {
		 console.log(
			 // form,
			 `>>>>>登录信息 name:${form.value.name}，pwd:${form.value.pwd}`
		 );
	 },
	 return {
	 	subMitHander,
	 }
  }
}

3. setup 必须要有返回值 ，否则外部无法访问 内部变量、函数

template内使用变量时 直接使用，这个跟vue2没有多大变化
但是在 setup内使用修改变量时 需要 .value

 setup() {
    let isName = ref("login01");
	 function isChange(value) {
      isName.value = value;
    }
}

4. setup是组合api的入口,实现路由跳转

内部写法有点类似 原生js 彼此的访问无需this
使用外部api需要在相应的外部js 解构出来
也可自定义工具hook函数进行引入调用

//vue3
import { useRouter,onMounted } from "vue-router";
export default {
  setup() {
   	const router = useRouter();
	onMounted(() => {
      router.push({
        path: "/home",
      });
    });
  }
}
 
//vue2
export default {
   mounted() {
    	this.$router.push({
			path: "/home",
		});
  },
}

两种写法 实现的效果类似的