文中适用读过Vue2得人，都是给她做一个在线查询备份数据。
cmd创建项目
规定Node.js版本号16.0或以上。
运行命令：
npm init vue@latest
详尽文本文档
定义数组
<template>
<div>
{{state.myValue}}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
myValue: '回应数据信息'
})
</script>
数据传递 父向子传（props）
即Vue2里的父部件怎么向子组件中传值。
即日启程，看代码：
// 子组件Child.vue中
const props = defineProps({
myValue: {
type: Boolean,
default: false,
}
})
启用处：
import Child from './Child'
<child :my-value="true">
留意:
- 这儿的
defineProps可以直接用，而无需要附加导进。 - props里边界定是指骆驼峰文件格式，可是父部件使用时要写出下横线文件格式。
事情抛出去
根据事情抛出去，能够将于子组件里将数据信息或行为等传达给父部件。
看代码：
// 子组件Child中界定事件和抛出去事情
const emit = defineEmits([
'evetName' // 挑选id改动
])
const myMethod => () => {
emit('evetName', '事情主要参数')
}
父部件中应用事情
import Child from './Child'
<child @eventName="true">
留意：
- 事情使用时可以直接用骆驼峰文件格式
父部件中启用子组件的办法
子组件过程中需要抛出去方式：
<!-- child.vue -->
<script setup lang='ts'>
const childMehod = (value) => {
console.log('my method')
}
defineExpose({
childMehod
})
</script>
父部件中调用方法的二种书写：
<!-- parent.vue -->
<template>
<child ref="childRef"></child>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
// 方法1
const { proxy } = getCurrentInstance()
// 方法2
const childRef = ref()
// 调用方法
const parentMethod = (v) => {
// 方法1的调用方法
proxy.$refs['childRef'].childMethod(v);
// 方法2的调用方法
child.value.childMethod(v);
}
</script>
应用provide和inject跨等级数据传递
在顶层部件中提供数据：
<script setup>
import { provide } from 'vue'
provide('mykey', '我就是顶层元件的值!')
</script>
在子组件或是小孙子部件等下一层部件中使用这个值：
<script setup>
import { inject } from 'vue'
const value = inject('mykey')
</script>
怎么使用nextTick
<script setup>
import { nextTick } from 'vue'
async function myMethod() {
// 这里进行了数据下载
console.log('DOM未升级')
await nextTick()
console.log('DOM 此时已经升级')
}
</script>
有关组合型API
这儿想说一句，Vue3还支持选择项式API，也就是说，Vue2代码一般情况下可以在Vue3中正常运转的。
vue3居民扩展槽的使用方法
在vue2中可以按如下所示方法应用
<child>
<template slot="header"></template>
</child>
但在vue3中应该按照如下所示方法应用
<child>
<template #header></template>
</child>
或是
<child>
<template v-slot:header></template>
</child>
局部变量的控制方式
在vue2中，能通过如下所示方法界定：
Vue.prototype.$method = method
<!-- 应用 -->
this.$method...
在vue3中，根据如下所示方法：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$method = method
一个常见部件 el-date-picker中日期格式变化
根据vue2的element部件里的el-date-picker，value-formate表明选值格式，默认日期种类能够撰写成：yyyy-MM-dd
而根据vue3的element-plus，默认设置日期为非：YYYY-MM-DD，全部文件格式能从Day.js查询。