文档：

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仔细阅读