• 1.vue3的优点
• 2. ref函数和reactive函数、toRefs函数
• 3. templete使用 v-for的时候

1.vue3的优点

• Composition API + setup
• 更好的支持ts
• 更好的性能，更好的tree shaking
• 响应式系统升级

2. ref函数和reactive函数、toRefs函数

import {
    ref
} from 'vue';
let count = ref(0);
// ref函数用来创建一个响应式数据。在vue和js里都可以用这个方法.创建出来的数据也可以return出去在其他地方使用
// ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）

//reactive是用来创建响应式引用类型的数据
import {
    reactive
} from "vue";
const user = reactive({
    name: "Alice",
    age: 12
});

// 抛出一个对象传入toRefs，将toRefs返回出的值将其解构后仍具有响应特性，视图不再用.属性名来获取值
setup() {
    const data = reactive({
        list: ["坦克", "手枪", "奥特曼"],
        checkitem: '',
        handle: (item: string) => {
            data.checkitem = item
        }
    }) as dataobj
    return {
        ...toRefs(data) //抛出一个对象传入toRefs，将toRefs返回出的值将其解构后仍具有响应特性，视图不再用.属性名来获取值
    }
}

3. templete使用 v-for的时候

<!-- vue2中key是需要写在子元素上，直接写在template会报错 -->
<!-- 但是vue3中是直接写在template上的 -->
 <template v-for="(menu, index) in menuList" :key="index">
        <a-menu-item>
          <template #icon>
            <PieChartOutlined />
          </template>
          <span>Option 1</span>
        </a-menu-item>
</template>