共计 5426 个字符，预计需要花费 14 分钟才能阅读完成。
1、setup script
用法：<script setup lang="ts">
// 在这里写 vue 的逻辑
</script>
<template>
<div> 哈哈 </div>
</template>2、ref & reactive & 事件
阐明：
1、ref：须要响应式的常量，赋值时须要 xxx.value
2、reactive：须要响应式的对象或者数组，可间接应用或赋值
3、事件：在 setup script 中，间接定义事件
用法：<script setup lang="ts">
import {ref, reactive} from 'vue'
// 常量
const name = ref('小明')
// 对象、数组
const user = reactive({
name: '小红',
gender: '女'
})
const handleAdd = () => {arr.push({ name: '哈哈哈'})
}
</script>
<template>
<button @click="switchName">
我叫 {{name}}，性别{{user.gender}}
</button>
<button @click="handleAdd"> 新增 </button>
</template>3、computed & watch & watchEffect
阐明：
1、computed：计算函数
2、watch：监听函数，可监听常量和援用变量，可传 immediate 和 deep。可监听对象也可只监听对象的某个属性
3、watchEffect：跟 watch 差不多，然而 watchEffect 不须要阐明监听谁，用到谁就监听谁
用法：<script setup lang="ts">
import {ref, reactive, computed,watch, watchEffect} from 'vue'
// 常量
const name = ref('小明')
// 对象、数组
const user = reactive({
name: '小红',
gender: '女'
})
// computed 计算出 userText
const userText = computed(() => {return ` 我叫 ${user.name}，我是 ${user.gender}的 `
})
// 监听 user 对象
watch(user, (next) => {console.log('user 被批改了', next)
}, {
immediate: false, // 首次执行
deep: true // 深度监听对象
})
// 可监听对象的某个属性，这里监听 user.gender
watch(() => user.gender, (next, pre) => {console.log('user.gender 被批改了', next, pre)
})
// 不须要阐明监听谁
// 用到 user.gender 就监听 user.gender
watchEffect(() => {
const gender = user.gender
console.log('user.gender 被批改了', gender)
})
</script>
<template>
<div>{{userText}}</div>
</template>4、生命周期
vue2 – vue3
beforeCreate -> 没了
created -> 没了
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
<script setup lang="ts">
import {onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onBeforeUnmount, onUnmounted,onActivated,onDeactivated,onErrorCaptured} from 'vue'
onBeforeMount(() => {console.log('挂载前')
})
onMounted(() => {console.log('挂载')
})
onBeforeUpdate(() => {console.log('更新前')
})
onUpdated(() => {console.log('更新')
})
onBeforeUnmount(() => {console.log('销毁前')
})
onUnmounted(() => {console.log('销毁')
})
onActivated(() => {console.log('kee-alive 激活本组件')
})
onDeactivated(() => {console.log('kee-alive 暗藏本组件')
})
onErrorCaptured(() => {console.log('谬误捕捉')
})
</script>5、defineProps & defineEmits
父组件：<script setup lang="ts">
import {ref} from 'vue'
import Dialog from './Dialog.vue'
const msg = ref('我是 msg')
const changeMsg = (val: string) => {msg.value = val}
</script>
<template>
// 传进子组件
<Dialog :msg="msg" @changeMsg="changeMsg" />
</template>子组件：<script setup lang="ts">
import {defineProps, defineEmits} from 'vue'
// 注册父传子的 props
const {msg} = defineProps({
msg: {
type: String,
required: true
}
})
// 注册父传子的事件
const emits = defineEmits(['changeMsg'])
const handleClick = () => {
// 批改父组件的值
emits('changeMsg', '批改 msg')
}
</script>
<template>
<div @click="handleClick">{{msg}}</div>
</template>6、defineExpose
阐明：这个 API 次要次要作用是：将子组件的货色裸露给父组件，好让父组件能够应用
<!-- 子组件 -->
<script setup>
import {ref} from 'vue'
const msg = ref('hello vue3!')
function change() {
msg.value = 'hi vue3!'
console.log(msg.value)
}
// 属性或办法必须裸露进来，父组件能力应用
defineExpose({msg, change})
</script><!-- 父组件 -->
<script setup>
import ChildView from './ChildView.vue'
import {ref, onMounted} from 'vue'
const child = ref(null)
onMounted(() => {console.log(child.value.msg) // hello vue3!
child.value.change() // hi vue3!})
</script>
<template>
<ChildView ref="child"></ChildView>
</template>7、全局 API
阐明：
1、vue3 曾经没有 filter 这个全局办法了
2、vue.component -> app.component
3、vue.directive -> app.directive
4、之前 Vue.xxx 当初都改成 app.xxx
// 全局自定义指令
app.directive('focus', {mounted(el) {el.focus()
}
})
// 全局自定义组件
import CustomComp from './components/CustomComp.vue'
app.component('CustomComp', CustomComp)8、自定义指令
vue2：Vue.directive('xxx', {
// 指令绑定到指定节点，只执行一次
bind() {},
// 指定节点插入 dom
inserted() {},
// 节点 VNode 更新时，可能刚更新，没齐全更新
update() {},
// VNode 齐全更新
componentUpdated() {},
// 指令从指定节点解绑，只执行一次
unbind() {}
})vue3：app.directive('xxx', {
// 在绑定元素的 attribute 或事件监听器被利用之前调用, 在指令须要附加须要在一般的 v-on 事件监听器前调用的事件监听器时，这很有用
created() {},
// 当指令第一次绑定到元素并且在挂载父组件之前调用
beforeMount() {},
// 在绑定元素的父组件被挂载后调用
mounted() {},
// 在更新蕴含组件的 VNode 之前调用
beforeUpdate() {},
// 在蕴含组件的 VNode 及其子组件的 VNode 更新后调用
updated() {},
// 在卸载绑定元素的父组件之前调用
beforeUnmount() {},
// 当指令与元素解除绑定且父组件已卸载时, 只调用一次
unmounted() {},
});9、defineAysncCompoment & Suspense
阐明：这个 API 用来加载异步组件，就是用不到他就不加载，用到了才会加载
注：defineAysncCompoment 需配合 vue3 的内置全局组件 Suspense 应用，须要用 Suspense 包住异步组件
const AsyncPopup = defineAsyncComponent({loader: () => import("./LoginPopup.vue"),
// 加载异步组件时要应用的组件
loadingComponent: LoadingComponent,
// 加载失败时要应用的组件
errorComponent: ErrorComponent,
// 在显示 loadingComponent 之前的提早 | 默认值：200（单位 ms）delay: 1000,
// 如果提供了 timeout，并且加载组件的工夫超过了设定值，将显示谬误组件
// 默认值：Infinity（即永不超时，单位 ms）timeout: 3000
})
// 应用时，可管制显隐
<Suspense v-if="show" >
<AsyncPopup />
</Suspense>10、自定义 hook——useUser
// useUser.ts
import {reactive, computed} from 'vue'
const useUser = () => {
const user = reactive({
name: '小红',
gender: '女'
})
const userText = computed(() => ` 我叫 ${user.name}，我是 ${user.gender}的 `)
const switchGender = () => {user.gender = '男'}
return {
switchGender,
userText,
}
}
export default useUser应用 hook
<script setup lang="ts">
import useUser from './useUser'
const {userText,switchGender} = useUser()
</script>
<template>
<div @click="switchGender">
{{userText}}
</div>
</template>11、useRouter & useRoute
阐明：
1、useRouter：用来执行路由跳转
2、useRoute：用来获取路由参数
<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
function onClick() {
// 跳转
router.push({
path: '/about',
query: {msg: 'hello vue3!'}
})
}
</script><script setup>
import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.query.msg)
// hello vue3!
</script>12、Teleport
阐明：Teleport 能够将你的组件，挂载到任意一个节点之下，只有你指定一个选择器，能够是 id、class
// Dialog.vue
<template>
<div>hello world</div>
</template><script setup lang="ts">
import Dialog from './Dialog.vue'
</script>
<template>
// 将 Dialog 组件挂载到 id 为 app 的节点下
<Teleport to="#app">
<Dialog />
</Teleport>
</template>// 自用梳理