Vue3 综合知识点

Posted 2021-12-04 沿着路走到底

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3 综合知识点相关的知识，希望对你有一定的参考价值。

Vue3 比 Vue2 有什么优势？

性能更好

体积更小

更好的 TS 支持

更好的代码组织

更好的逻辑抽离

更多新功能

描述 Vue3 生命周期

Options API 生命周期

beforeDestroy 改为 beforeUnmount

destroyed 改为 unmounted

其他沿用 Vue2 的生命周期

Composition API 生命周期

// 等于 beforeCreate 和 created
    setup() {
        console.log('setup')

        onBeforeMount(() => {
            console.log('onBeforeMount')
        })
        onMounted(() => {
            console.log('onMounted')
        })
        onBeforeUpdate(() => {
            console.log('onBeforeUpdate')
        })
        onUpdated(() => {
            console.log('onUpdated')
        })
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount')
        })
        onUnmounted(() => {
            console.log('onUnmounted')
        })
    },

如何看待 Composition API 和 Options API？

composition API

更好的代码组织

更好的逻辑复用

更好的类型推导

如何理解 ref、toRef 和 toRefs?

ref

生成值类型的响应式数据

可用于模板和 reactive

通过 .value 修改值

ref 还可以用于获取 DOM元素

<template>
    <p>ref demo {{ageRef}} {{state.name}}</p>
</template>

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

export default {
    name: 'Ref',
    setup() {
        const ageRef = ref(20) // 值类型 响应式
        const nameRef = ref('双越')

        const state = reactive({
            name: nameRef
        })

        setTimeout(() => {
            console.log('ageRef', ageRef.value)

            ageRef.value = 25 // .value 修改值
            nameRef.value = '双越A'
        }, 1500);

        return {
            ageRef,
            state
        }
    }
}
</script>

获取DOM元素

<template>
    <p ref="elemRef">我是一行文字</p>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
    name: 'RefTemplate',
    setup() {
        const elemRef = ref(null)

        onMounted(() => {
            console.log('ref template', elemRef.value.innerhtml, elemRef.value)
        })

        return {
            elemRef
        }
    }
}
</script>

toRef

针对一个reactive 封装的响应式对象的属性，创建一个 ref，具有响应式

两者保持引用关系

<template>
    <p>toRef demo - {{ageRef}} - {{state.name}} {{state.age}}</p>
</template>

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

export default {
    name: 'ToRef',
    setup() {
        const state = reactive({
            age: 20,
            name: '双越'
        })

        const age1 = computed(() => {
            return state.age + 1
        })

        // // toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
        // const state = {
        //     age: 20,
        //     name: '双越'
        // }

        const ageRef = toRef(state, 'age')

        setTimeout(() => {
            state.age = 25
        }, 1500)

        setTimeout(() => {
            ageRef.value = 30 // .value 修改值
        }, 3000)

        return {
            state,
            ageRef
        }
    }
}
</script>

toRefs

将 reactive 封装的响应式对象转换为普通对象

对象的每个属性都是对应的 ref

两者保持引用关系

<template>
    <p>toRefs demo {{age}} {{name}}</p>
</template>

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

// toRefs 可以把一个响应式对象中的属性也转换成响应式的。
// toRefs 要求传入的参数必须是一个代理对象。
// toRefs 原理：内部会创建一个新的对象，遍历传入的代理对象的所有属性，
// 把所有属性的值都转换成响应式对象，
// 并且属性是一个对象，具有 value 属性，在模板中使用，可以将value省略，但是在代码中不能省略。

export default {
    name: 'ToRefs',
    setup() {
        const state = reactive({
            age: 20,
            name: '双越'
        })

        const stateAsRefs = toRefs(state) // 将响应式对象，变成普通对象

        // const { age: ageRef, name: nameRef } = stateAsRefs // 每个属性，都是 ref 对象
        // return {
        //     ageRef,
        //     nameRef
        // }

        setTimeout(() => {
            state.age = 25
        }, 1500)

        return stateAsRefs
    }
}
</script>