文档：
Vue3 组合式 API 文档：介绍 | Vue.js (vuejs.org)
Vue3 单文件组件 <script setup> 文档：单文件组件 <script setup> | Vue.js (vuejs.org)
Vue3与Vue2的兼容（用于迁移的构建版本） ：
用于迁移的构建版本 | Vue.js
其他：
国内Vue爱好者共同搭建网站：Vue3
一.setup语法糖简介：
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势：
- 更少的样板内容，更简洁的代码。
- 能够使用纯 TypeScript 声明 props 和抛出事件。
- 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
- 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
基本语法：
<script setup>
console.log('hello script setup')
</script>
二.api介绍
2.1 ref 响应式变量
<template>
<span>{{ count }}</span>
</template>
<script setup>
const count = ref(0)
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
</script>
2.2 setup生命周期钩子 配合 方法使用
<script setup>
//变量name
let name = ref('jack');
//打印name变量方法
const getName = () =>{
console.log(name.value)
}
//写法一:
onMounted(getName)
//写法二：
onMounted(() => {
getName();
}
)
</script>
2.3 watch 响应式更改
<script lang="ts" setup>
let counter = ref(1)
//有多个属性监听可以写多个watch
watch(
counter ,
(newValue, oldValue)=> {
console.log('counter' , newValue)
},
//可选
{ deep: true, immediate: true },
);
</script>
2.4 computed 计算属性
<script lang="ts" setup>
let data= ref({
name : 'jack'
})
const name = computed(() => {
return data.value.name;
});
</script>
2.5 router与 route的使用
<script setup>
const route = useRoute();
const router = useRouter();
const jumpToDeatil= () =>{
let projectId = route.params.id
router.push({ name: 'projiectDetail', params: { projectId }})
}
</script>
2.6 组件的注册。
<template>
<RolesAssign><RolesAssign>
</template>
<script setup>
import RolesAssign from './RolesAssign.vue';
</script>
2.7 父子组件之间的通信
1.defineProps 用来接收父组件传来的 props。
2.defineEmits 子组件向父组件事件传递的emit。
2.7.1 父组件
<template>
<ItemPopover
name="指派成员"
:field-names="{ title: 'name', key: 'id' }"
:data-info="useList"
@on-select="selectMember"
><ItemPopover >
</template>
<script setup>
import ItemPopover from './detailConditionFilter/ItemPopover.vue';
let useList = ref([
{ name: '张三', id: '1' },
{ name: '李四', id: '2' },
]);
/*
* 选择指派成员
*/
const selectMember = (data: any) => {
console.log('selectMember', data);
};
</script>
2.7.2 子组件
<template>
<a-tree
v-model:selectedKeys="selectedKeys"
:field-names="fieldNames"
multiple
:tree-data="dataInfo"
@select="onSelect"
></a-tree>
</template>
<script setup>
//接受值
const props = defineProps({
dataInfo: {
type: Array as () => Array<any>,
default: () => {
return [];
},
},
fieldNames: {
type: Object as () => { children?: string; title?: string; key?: string },
default: () => {
return { children: 'children', title: 'title', key: 'key' };
},
},
name: { type: String, default: '' },
});
//自定义的方法
const emit = defineEmits(['onSelect']);
/*
* 选中
*/
const onSelect = (selectedKeys: string[], e: any) => {
//打印接受的值
console.log(props.name)
// 使用方法传值
emit('onSelect', { selectedKeys, selectedNodes: e.selectedNodes });
};
</script>
2.8 defineExpose
script setup默认是不对外界暴露组件实例的，所以在其他组件中通过诸如$refs和$parent都默认无法获取当前组件实例，所有就开始使用defineExpose
注： 如果子组件使用的是class模板 ，子组件就不用defineExpose ，正常写就行 ，但父组件还是要进行下面父组件中的步骤。
2.8.1 父组件
<template>
<ListItem ref="listItem"></ListItem >
<div @click="onClick">获取子元素上的属性</div>
</template>
<script setup>
import ListItem from './detailConditionFilter/ListItem.vue';
//此处定义的名字必须与组件上ref的名字相同
let listItem = ref();
const onClick = () =>{
console.log("子组件上的属性" ,listItem.value) //{name:"child",content:"112233"}
}
</script>
2.8.2 子组件
<script setup>
let name = ref("child")
let content = ref("112233")
defineExpose({
name ,
content ,
})
</script>
三.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仔细阅读
