vue3直白教程（梳理）

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>

13、getCurrentInstance

方案一：

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)

方案二：

const { proxy } = getCurrentInstance()
//使用proxy线上也不会出现问题

例：
import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();
 
// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
const { ctx }  = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy }  = getCurrentInstance();  //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
proxy.$attrs
proxy.$data
proxy.$el
proxy.$emit
proxy.$forceUpdate
proxy.$nextTick
proxy.$options
proxy.$parent
proxy.$props
proxy.$refs
proxy.$root
proxy.$slots
proxy.$watch

//自用梳理