关于前端:保姆级-Vue3-开发文档不会的再不看要遭老罪咯

大家好，我是沐华。最近一个粉丝公司我的项目由 Vue2 降级到 Vue3 了，他一下子不适应，有好多不会用的，所以我就写了这篇开发文档，蕴含了 Vue3 开发中应用的所有语法，心愿所有像他一样还不熟的搭档疾速上手 Vue3

本文所有语法为 Vue 3.2.41 版本，如果是 3.0 到 3.2 以内的版本个别中央可能会有些许不一样

Vue2 中每个组件里应用 this 都指向以后组件实例，this 上还蕴含了全局挂载的货色，都晓得 this.xxx 啥都有

而 Vue3 中没有 this，如果想要相似的用法有两种，一是获取以后组件实例，二是获取全局实例，如下本人能够去打印进去看看

<script setup>
import {getCurrentInstance} from 'vue'

// proxy 就是以后组件实例，能够了解为组件级别的 this，没有全局的、路由、状态治理之类的
const {proxy, appContext} = getCurrentInstance()

// 这个 global 就是全局实例
const global = appContext.config.globalProperties
</script>

Vue2 中咱们要往全局上挂载货色通常就是如下，而后在所有组件里都能够通过 this.xxx 获取到了

Vue.prototype.xxx = xxx

而 Vue3 中不能这么写了，换成了一个能被所有组件拜访到的全局对象，就是下面说的全局实例的那个对象，比方在 main.js 中做全局注册

// main.js
import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
// 增加全局属性
app.config.globalProperties.name = '沐华'

在其余组件中调用

<script setup>
import {getCurrentInstance} from 'vue'
const {appContext} = getCurrentInstance()

const global = appContext.config.globalProperties
console.log(global.name) // 沐华
</script>

<template>
    <el-form ref="formRef"></el-form>
    <child-component />
</template>
<script setup lang="ts">
import ChildComponent from './child.vue'
import {getCurrentInstance} from 'vue'
import {ElForm} from 'element-plus'

// 办法一，这个变量名和 DOM 上的 ref 属性必须同名，会主动造成绑定
const formRef = ref(null)
console.log(formRef.value) // 这就获取到 DOM 了

// 办法二
const {proxy} = getCurrentInstance()
proxy.$refs.formRef.validate((valid) => {...})

// 办法三，比方在 ts 里，能够间接获取到组件类型
// 能够这样获取子组件
const formRef = ref<InstanceType<typeof ChildComponent>>()
// 也能够这样 获取 element ui 的组件类型
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => {...})
</script>

Vue2 中进入页面就申请接口，或者其余一些初始化的操作，个别放在 created 或 mounted，而 Vue3 中 beforeCreated 和 created 这俩钩子就不必了，因为 setup 在这俩之前执行，还要这俩的话就多此一举了

所以但但凡以前你用在 beforeCreated / created / beforeMounted / mounted 这几个钩子里的内容，在 Vue3 中要么放在 setup 里，要么放在 onMounted 里

<script setup>
import {onMounted} from 'vue'

// 申请接口函数
const getData = () => {xxxApi.then(() => {...})
}

onMounted(() => {getData()
})
</script>

Vue2 中个别革除定时器、监听之类的操作有两种办法：

一是用 $once 搭配 hook: BeforeDestroy 应用，这个 Vue3 不反对了
二是用 beforeDestroy / deactivated 这俩钩子，Vue3 中只是把钩子函数重命名了一下

<script setup>
import {onBeforeUnmount, onDeactivated} from 'vue'

// 组件卸载前，对应 Vue2 的 beforeDestroy
onBeforeUnmount(() => {clearTimeout(timer)
    window.removeAddEventListener('...')
})

// 退出缓存组件，对应 Vue2 的 deactivated
onDeactivated(() => {clearTimeout(timer)
    window.removeAddEventListener('...')
})
</script>

这两都是用于创立响应式对象，ref 通常用于创立根底类型，reactive 通常用于创立响应式，这是官网举荐的，事实中也不尽然，有人也用 ref 来定义数组，也有人一个组件只定义一个 reactive，所有数据都放外面，就像 Vue2 的 data 一样，也有人都用

须要晓得的有两点：

ref 如果传入的是援用类型，外部源码也是调用 reactive 来实现的
ref 返回的属性在 template 中应用，间接用就是了，然而在 JS 中应用，须要通过 .value 获取，如下。因为 ref 返回的是一个包装对象

<template>
    <div>{{count}}</div>
</template>
<script setup>
import {ref, reactive} from 'vue'
const count = ref(1)

// 有人这么用 
const arr = ref([])
console.log(arr.value) // []

// 也有人这么用，一个组件里所有的属性全副定义在一个对象里，有点 Vue2 data 的滋味
const data = reactive({
    name: '沐华',
    age: 18,
    ...
})
console.log(data.name) // 沐华

// 也有人一个组件里 ref 和 reactive 两种都用，轻易你
</script>

为什么 ref 要返回一个包装对象？Vue2 中 data 都是返回一个对象这都晓得

因为对象援用类型，能够用来做代理或劫持，如果只返回根底类型的话，存储在栈中，执行栈里执行完就回收了，没有方法增加代理或劫持，天然就没方法追踪后续的变动，所以不得不返回一个对象，这样能力有响应式

这两共同点就是用来创立响应式的援用的，次要用来取出响应式对象里的属性，或者解构响应式对象，解构进去的属性值仍然是响应式属性，如果不必这两间接解构的话是会失落响应式成果的

次要就是不便咱们应用间接变量 xxx，而不须要 data.xxx。并且咱们批改 xxx 的时候也是间接批改源对象属性的

这两的区别：带 s 和不带 s，就是复数和复数嘛，意思就是取一个和取一堆咯

<script setup>
import {reactive, toRef, toRefs} from 'vue'

const data = reactive({
    name: '沐华',
    age: 18
})

// 这样尽管能拿到 name / age，然而会变成一般变量，没有响应式成果了
const {name, age} = data

// 取出来一个响应式属性
const name = toRef(data, 'name')

// 这样解构进去的所有属性都是有响应式的
const {name, age} = toRefs(data)

// 不论是 toRef 还是 toRefs，这样批改是会把 data 里的 name 改掉的
// 就是会扭转源对象属性，这才是响应式该有的样子
name.value = '沐沐华华'
</script>

watch 就是用来监听一个已有属性，发生变化的时候做某些操作，Vue2 中罕用有如下三种写法

watch: {
    userId: 'getData',
    userName (newName, oldName) {this.getData()
    },
    userInfo: {handler (newVal, newVal) {this.getData() },
        immediate: true,
        deep: true
    }
}

而 Vue3 中监听的写法就丰盛得多了

Vue3 的 watch 是一个函数，能接管三个参数，参数一是监听的属性，参数二是接管新值和老值的回调函数，参数三是配置项

<script setup>
import {watch, ref, reactive} from 'vue'

const name = ref('沐华')
const data = reactive({
    age: 18,
    money: 100000000000000000000,
    children: []})

// 监听 ref 属性
watch(name, (newName, oldName) => {...})

// 监听其余属性、路由或者状态治理的都这样
watch(() => data.age, 
    (newAge, oldAge) => {...}
)

// 监听多个属性，数组放多个值，返回的新值和老值也是数组模式
watch([data.age, data.money], ([newAge, oldAge], [newMoney, oldMoney]) => {...})

// 第三个参数是一个对象，为可配置项，有 5 个可配置属性
watch(data.children, (newList, oldList) => {...}, {
    // 这两个和 Vue2 一样，没啥说的
    immediate: true,
    deep: true,
    // 回调函数的执行机会，默认在组件更新之前调用。更新后调用改成 post
    flush: 'pre', // 默认值是 pre，可改成 post 或 sync
    // 上面两个是调试用的
    onTrack (e) {debugger}
    onTrigger (e) {debugger}
})
</script>

对于副作用，在 watch 回调函数中能接管第三个参数，为革除副作用的函数，它的执行机制默认在更新之前调用，比方如下代码，当 key 触发更新时会先打印 222 再打印 沐华 ，如果须要在更新之后调用，能够在 watch 第三个配置项中增加 flush: post，

// 回调函数接管一个参数，为革除副作用的函数
watch(key, (newKey, oldKey, onInvalidate) => {console.log('沐华')
    // 获取 DOM 默认获取到的是更新前的 dom，如果是 flush: post，能够获取到更新后的 dom
    console.log('DOM 节点：', dom.innterHTML)
    onInvalidate(() => {console.log(2222)
    })
})

监听还没完呢

尤大：嘿嘿~

Vue3 中除了 watch 还减少了一个 watchEffect。区别是：

watch 是对传入的一个或多个值进行监听，触发时会返回新值和老值，且默认第一次不会执行
watchEffect 是传入一个立刻执行函数，所以默认第一次就会执行，且不须要传入监听内容，会主动收集函数内的数据源作为依赖，当依赖发生变化时会从新执行函数 (有点像 computed 的滋味)，而且不会返回新值和老值
革除副作用和副作用的刷新机会是一样的，区别是 watch 中会作为回调的第三个参数传入，watchEffect 中是回调函数的第一个参数
失常状况下组件销毁 / 卸载后这两都会主动进行监听，但也有例，比方异步的形式在 setTimeout 里创立的监听就都须要手动进行监听，进行形式如下

// 进行监听
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 须要的时候手动进行监听
unwatch()
unwatchEffect()

watchEffect 应用：

<script setup>
import {watchEffect} from 'vue'

// 失常应用
watchEffect(() => {
    // 会主动收集这个函数应用到的属性作为依赖，进行监听
    // 监听的是 userInfo.name 属性，不会监听 userInfo
    console.log(userInfo.name)
})

// 有两个参数，参数一是触发监听回调函数，参数二是可选配置项
watchEffect(() => {...}, {
    // 这里是可配置项，意思和 watch 是一样的，不过这只有 3 个可配置的
    flush: 'pre',
    onTrack (e) {debugger}
    onTrigger (e) {debugger}
})

// 回调函数接管一个参数，为革除副作用的函数，和 watch 的同理
watchEffect(onInvalidate => {console.log('沐华')
    onInvalidate(() => {console.log(2222)
    })
})
</script>

watchEffect 如果须要批改配置项 flush 为 post 或 sync 时，能够间接应用别名，如下

watchEffect(() => {...}, {flush: 'post',})
// 和上面这个是一样的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {flush: 'sync',})
// 和上面这个是一样的
watchSyncEffect(() => {})

Vue2 中 computed 最见的应用场景个别有：mapGetters/mapState 获取状态治理的属性、获取 url 上的属性、条件判断、类型转换之类的，反对函数和对象两种写法

而 Vue3 中 computed 不再是一个对象，而是一个函数，用法其实根本差不多，函数第一个参数是侦听器源，用于返回计算的新值，也反对对象写法，第二个参数可用于调试

<script setup>
import {computed} from 'vue'

// 获取 url 上的 type 属性
const type = computed(() => Number(this.$route.query.type || '0'))

// 对象写法
const visible = computed({get () {return this.visible},
    set (val) {this.$emit('input', val) }
})

// computed 第二个参数也是一个对象，调试用的
const hehe = computed( 参数一下面两种都可，{onTrack (e) {debugger}
    onTrigger (e) {debugger}
})
</script>

nextTick 的应用办法，除了不能用 this 其余的和 Vue2 截然不同，还是三种形式

<script setup>
import {nextTick} from 'vue'

// 形式 一
const handleClick = async () => {await nextTick()
  console.log('沐华')
}

// 形式二
nextTick(() => {console.log('沐华')
})

// 形式三
nextTick().then(() => {console.log('沐华')
  })
</script>

Vue2 中逻辑的抽离复用个别用 mixins，毛病有三：

没有独立命名空间，mixins 会和组件外部产生命名抵触
不去翻代码不晓得引入的 mixins 外面有啥
引入多个 mixins 时不晓得本人应用的是来自哪一个 mixins 的

Vue3 中逻辑抽离复用的 hooks 语法，其实就是一个函数，能够传参，拿返回值来用。或者能够这样了解：平时要封装专用的办法是怎么写的？Vue3 里就能够怎么写

// xxx.js
expport const getData = () => {}
export default function unInstance () {
    ...
    return {...}
}

// xxx.vue
import unInstance, {getData} from 'xx.js'
const {...} = unInstance()
onMounted(() => {getData()
})

对于 hooks 如何写出更优雅的代码，还个须要多写，多实际

Vue3 组件通信的形式，有如下几种

props + defineProps
defineEmits
defineExpose / ref
useAttrs
v-model(反对多个)
provide / inject
Vuex / Pinia

对于 Vue 组件通信的应用形式，去年我写过一篇文章，下面都列举的很具体了，就不搬过去了

Vue3 的 8 种和 Vue2 的 12 种组件通信

Vue2 中每个组件上只能写一个 v-model，子组件没有写 model 的话，默认在 props 接管 value 即可，批改就是用 this.$emit('input') 事件

Vue3 中每个组件每个组件上反对写多个 v-model，没有了 .sync 和 model 重命名的操作，也不须要了，写 v -model 的时候就须要把命名一起写上去了，如下：

// 父组件写法
<template>
    <child v-model:name="name" v-model:age="age" />
</template>
<script setup>
import {ref} from "vue"
const name = ref('沐华')
const age = ref(18)
</script>

// 子组件
<script setup>
const emit = defineEmits(['update:name', 'update:age'])

const handleClick = () => {console.log('点击了')
    emit('update:name', '这是新的名字')
}
</script>

Vuex 会的就不用说了，不会的就间接学 Pinia 吧

Pinia 的应用形式，我之前也写过一篇文章，也不搬过去了

上手 Vue 新的状态治理 Pinia，一篇文章就够了

Vue2 中的 $route 和 $router 如下，能够本人打印进去看一下

<script setup>
import {useRoute, useRouter} from "vue-router"

// route 对应 this.$route
const route = useRoute()

// router 对应 this.$router
const router = useRouter()
</script>

Vue2 中只能有一个根节点，而 Vue3 中反对多个根节点，这个大家都晓得

其实实质上 Vue3 每个组件还是一个根节点，因为 DOM 树只能是树状构造的，只是 Vue3 在编译阶段新增了判断，如果以后组件不只一个根元素，就增加一个 fragment 组件把这个多根组件的给包起来，相当于这个组件还是只有一个根节点

<template>
    <div>1</div>
    <div>2</div>
</template>

Vue2 中在 scoped 中批改子组件或者组件库中的组件款式，改不了的状况下，就能够用款式穿透，不论是 Less 还是 SASS 都是用 /dee/ .class {} 来做款式穿透，而 Vue3 中就不反对 /deep/ 的写法了，换成 :deep(.class)

<style scoped>
// 这样写不失效的话
.el-form {.el-form-item { ...}
}
// Vue2 中这样写
/deep/ .el-form {.el-form-item { ...}
}
// Vue3 中这样写
:deep(.el-form) {.el-form-item { ...}
}
</style>

// 别再这样加一个没有 scoped 的 style 标签了，全都加到全局下来了
// <style lang="scss">
//  .el-form {//     .el-form-item { ...}
//  }
// </style>

就是 CSS 中能够应用 JS 的变量来赋值，如下

<template>
    <div class="name"> 沐华 </div>
</template>
<script setup>
import {ref} from "vue"
const str = ref('#f00') // 红色
</script>
<style scoped lang="scss">
.name {background-color: v-bind(str); // JS 中的色值变量 #f00 就赋值到这来了
}
</style>

如果本文对你有一点点帮忙，点个赞反对一下吧，你的每一个【赞】都是我创作的最大能源 ^_^

更多前端文章，或者退出前端交换群，欢送关注公众号【前端高兴多】，大家一起独特交换和提高呀

关于前端:保姆级-Vue3-开发文档不会的再不看要遭老罪咯

开发文档

获取 this

全局注册 (属性 / 办法)

获取 DOM

初始化

解除绑定

ref 和 reactive

toRef 和 toRefs

watch

watchEffect

computed

nextTick

mixins 和 hooks

组件通信

多个 v-model

状态治理

路由

template

CSS 款式穿透

CSS 绑定 JS 变量

结语