vue3 setup语法糖 简单使用

文档:

Vue3 组合式 API 文档:介绍 | Vue.js (vuejs.org)

Vue3 单文件组件  文档:单文件组件

二.api介绍

2.1 ref 响应式变量


 2.2 setup生命周期钩子 配合 方法使用


 2.3 watch 响应式更改


2.4 computed 计算属性

2.5 router与 route的使用

2.6 组件的注册。



2.7 父子组件之间的通信

1.defineProps 用来接收父组件传来的 props。

2.defineEmits 子组件向父组件事件传递的emit。

2.7.1  父组件



2.7.2 子组件



2.8  defineExpose 

script setup默认是不对外界暴露组件实例的,所以在其他组件中通过诸如$refs$parent都默认无法获取当前组件实例,所有就开始使用defineExpose

注: 如果子组件使用的是class模板 ,子组件就不用defineExpose ,正常写就行 ,但父组件还是要进行下面父组件中的步骤。

2.8.1 父组件



2.8.2 子组件


三.vue3与vue2的兼容:

3.1 v-if 与 v-for 的优先级对比

2.x 语法

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用。

3.x 语法

3.x 版本中 v-if 总是优先于 v-for 生效。

官方api:v-if 与 v-for 的优先级对比 | Vue.js

注:vue3与vue2的兼容变化太多,可以去官方api仔细阅读

你可能感兴趣的:(typescript,vue.js,前端)