1.创建项目

npm create vite

2.生命周期

（1）Vue3 中的生命周期常用的有 7 个，把 beforeCreate 和 created 换成了 setup
（2）Vue3 相同的生命周期可以写多次，不会覆盖，执行顺序和书写顺序一致（3）setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。

3.传值

父传子：父组件通过自定义属性提供数据，子组件通过prop进行接收，在模板中使用就i行了。或者在setup中也可以通过形参props来获取传递的数据

子传父：通过context.emit触发，相当于vue2的this.$emit

结构数据：

4.给后代传递数据

（1）祖先通过provide提供数据（2）后代通过inject接收数据修改数据：

（3）通过emits选项来明确标记handleMoney就是一个自定义事件

（4）attrs：等价于vue2中的this.attrs,他表示非props属性（不在props中，就在attrs中，“捡漏”）
slots:等价于vue2中的this.$slots 包含了插槽信息

5.defineProps的使用

// 接收父亲传过来的值（里面可以写一个数组或者对象）不需要引入 // 组件无需注册，只需要在父亲里面（import Child from './Child.vue'）导入 // 在defineProps里面不能直接访问count，但是可以用一个值接收他后访问

const props=defineProps({
   count:{
     type:Number,
     default:8
   }
})

// 如何在script标签中使用传过来的数据
console.log(props.count)

// 通过defineProps中定义的count 只能在模板中使用
// defineProps(['count'])

6.defineEmits 通过自定义事件绑定回调

(1) 子组件通过$emit触发父亲的自定义事件

(2) 子组件通过点击事件触发函数，在函数里面通过defineEmits绑定回调

(3) 直接在模板中使用emit('changeCount',2)

7.vue3中的v-model

（1）在Vue2中v-model指令语法糖简写

 <Son :value="msg" @input="msg=$event" />

在Vue3中v-model语法糖有所调整

<Son :modelValue="msg" @update:modelValue="msg=$event" />

（2）通过$event接收传递过来的参数

8.ref获取组件实例做到数据传递

9.在setup中导出用defineExpose暴露出去

10 Fragment

Vue2组件必须有一个根标签 Vue3中组件可以没有根标签，其内部会将多个标签包含在一个Fragment虚拟元素中好处：减少标签层级和内存占用

11.teleport传递

可以把里面的东西传到指定的位置

vue3-基础二