Vue学习笔记---Vue3组合式API(对比Vue2)

1.生命周期函数：

• 在vue2.0的生命周期函数的命名中加入前缀on，并且生命周期函数的操作写在setup中
• setup在beforecreate与created前面执行，setup代替执行这两个函数
• 生命周期函数需要通过import形式引入

2.提供/注入：

• 父组件：setup内通过ref/reactive为变量增加响应性，再通过provide(‘a’,a)提供
• 子组件：setup内通过inject(‘a’,默认值)注入，子组件内可直接修改provide的值
• 不可修改只读：provide(‘a’,readonly(a))

3.模板引用

• setup内定义：root = ref(null) , return { root }
• 组件上绑定：ref=“root”
• setup内调用：root.value即可访问对应元素

4.teleport

• 定义：逻辑存在与父组件中，渲染在指定页面位置
• < teleport to=“位置” >位置书写格式遵循选择器格式，决定渲染的页面位置
• teleport中包含子组件，即使子组件在其他页面位置渲染，依旧采用teleport中的逻辑

5.触发组件选项emits

• 定义：emits:[‘event’]自定义事件，若定义原生事件则对原生事件侦听器覆盖
• 绑定：@event=“method”
• 验证：emits:{ click:null//无验证 , submit:({参数})=>{}
• 触发：this.$emit(‘submit’,{参数})
• 变化：不会从组件的根元素继承，也将从$attrs属性中移除

6.全局API

• createApp({})创建全局的应用实例
• 挂载vue根实例：app.mount(’#app’)
• 插件使用：app.use(VueRouter)
• 应用之间共享配置：创建工厂功能