Vue3 笔记文档

Posted 2021-08-27 一只难以捕捉且高冷的蝎子

setup 函数

对比Vue2.0 setup在beforeCreate之前调用，在created之后调用结束; 在setup中没有this; 返回对象中的属性刻在模板中使用；

setup(props,context)

• props参数用于接收组件传值
• context参数可以访问this中的方法 例如：attrs、slots、emit

setup中可以调用的钩子函数

onBeforeMount //组件挂载之前调用
onMounted  //组件挂载之后调用
onBeforeUpdate // 数据更新之前调用
onUpdated  //数据更新之后调用
onBeforeUnmount  // 组件卸载之前调用
onUnmounted  // 组件卸载之后调用
onActivated  // 组件激活时调用
onDeactivated  //组件切换 & 组件关闭调用
onErrorCaptured  //组件出现异常时调用

可用于在setup调试的函数

onRenderTracked //状态跟踪 页面出现属性、方法错误时使用
onRenderTriggered //属性新旧值更新是调用

Teleport 传送组件

可将组件传送挂载到指定DOM节点

栗子

//App.vue
<div id="App"></div>
<div id="Demo"></div>
//组件调用 将组件DOM挂载到App.vue中的DOM节点
<teleport to="#Demo"></teleport>

Suspense 特殊组件

可以分别渲染异步请求之前或者之后，使用时需在setup 返回一个promise对象

创建自定义组件 defineComponent

import { defineComponent   } from \'vue\'
export default defineComponent({})

Props 组件传值以及组件中使用 v-model 双向数据绑定

需在组件内部声明定义Props传入值的名称已经类型，存在setup中第一个参数

栗子

//定义传入的数据类型
props: {
  rules: String
},
//获取传入的值 
setup (props) {
  props.rules  
}

//使用 v-module
props: {
  modelValue: String, // v-model 传入的值
},
setup (props,context) {
  context.emit(\'onUpdate:modelValue\':Value) //触发更新数据的方法
}