跳至主要內容

Vue3的配置项

Guitar大约 5 分钟

props 配置项

Vue3 对props 配置项进行了功能的拓展，允许setup函数接收并使用props配置项。

<User name="张三" age="30" :sex="sex"></User>

子组件配置并接收props：

<template>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>性别：{{sex}}</h2>
</template>

<script>
    export default {
        name : 'User',
        // 使用props配置项 接收父组件传递过来的数据。
        props : ['name', 'age', 'sex'],

        // setup函数中没有this这个关键字！！
        // 将来vue3调用setup函数之前，会给setup函数传递参数，第一个参数是：props
        setup(props){
            // props被包装成了一个代理对象，也是具有响应式的Proxy对象。
            console.log(props)
            // props不需要返回，直接使用即可（返回的是data）
        }
    }
</script>

生命周期钩子

image-20230709145516920
image-20230709145516920

Vue3 支持 Vue2 的选项式API（但是不建议），推荐使用组合式 API。

Vue3 的生命周期钩子有：

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeUnmount（即Vue2中的 beforeDestory）
  8. unmounted（即Vue2中的 destoryed）

使用选项式API，则和 Vue2 一样，在配置项中提供钩子的实现即可。

推荐使用组合式API完成Vue3的初始化，组件式API需要引入对应的API，如：

import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

// 介于 setup、beforeCreate、created 执行过于接近，组合式API没有提供 onBeforeCreate、onCreated 这样的API，直接在 setup中编写即可
setup(){
    console.log('setup...') // beforeCreate、created 都在这里实现
    
    // 组合式 API 生命周期钩子，接收一个callback作为参数，完成API的调用即绑定了生命周期钩子
    onBeforeMount(() => {
        console.log('onBeforeMount')
    })
    onMounted(() => {
        console.log('onMounted')
    })
    onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
    })
    onUpdated(() => {
        console.log('onUpdated')
    })
    onBeforeUnmount(() => {
        console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
        console.log('onUnmounted')
    })
    
    // ...
}

如果一定要使用 beforeCreate、created 这两个钩子，可以以配置项的形式提供。

Vue3 计算属性

Vue3 提供了计算属性的组合式API。

import { computed, reactive } from 'vue'

setup(){

    // data
    let data = reactive({
        name : ''
    })

    
    // 计算属性中用到的必须是响应式数据，computed(...) 返回的数据也是响应式的。  
    // computed简写
    /* let reversedName = computed(() => {
        // 这种写法是一种简写形式，如果你只需要使用计算属性的get方法的话。
        return data.name.split('').reverse().join('')
    }) */

    // computed完整写法
    let reversedName = computed({
        get(){
            // 读取计算属性的值的时候执行。
            return data.name.split('').reverse().join('')
        },
        set(val){
            // 当修改计算属性的值的时候执行。
            data.name = val.split('').reverse().join('')
        }
    })

    // data和计算属性都需要返回
    return {data, reversedName}
}

Vue3 监听器

Vue3 为监听器 watch 也提供了组合式API。

import {watch, ref} from 'vue'

setup(){
    // 执行一次 API，则注册了一个监视器，函数没有返回值
    watch(监视目标, handler, options对象)
}

监视目标

监视目标必须是响应式的，或者是一个关于响应式数据的 getter。

响应式的数据有：ref、reactive的返回值、prpos、计算属性、只读属性...等。这里以 ref、reactive 的返回值为例。

当监视目标 是 ref(基本数据类型) 时（refImpl对象）：

// 不能监视 ref(基本数据类型).value （.value获得的属性是一个基本数据类型）
setup(){
    // data
    let counter = ref(1)
    let counter2 = ref(100)

    // 逐个监视，能正常捕获 oldValue
    watch(counter, (newValue, oldValue) => {
        console.log('计数器', newValue, oldValue)
    })
    watch(counter2, (newValue, oldValue) => {
        console.log('计数器2', newValue, oldValue)
    })
    // 返回一个对象
    return {counter, counter2}
}

当监视目标是 proxy对象 时：

// 有两种情况：
// 1. proxy =  ref(对象).value 或其 子对象
// 2. proxy =  reactive(obj) 或其 子对象

// 当监视 proxy 时，oldValue 无法真正获取到（Vue还未找到合适的解决方案），最终会把 newValue 传给 oldValue
// 即两个实参都是 newValue
watch(proxy, (newValue, oldValue) => {
    console.log(newValue, oldValue) 
}, {deep : false})
// 监视 proxy 时，深度监视是强制性的，无法关闭

当监视目标是 getter函数 时：

// 监视目标可以是一个函数，最终函数的返回值作为触发handler的依据。一旦函数返回值变动了，就会触发handler
// 这种方式只关心返回值，不关心返回值是否响应式。

// 当只需要监视 proxy 中的某个属性值，而不需要深度监视时即可使用
watch( ()=>proxy.counter, (newValue, oldValue) => {
    console.log(newValue, oldValue) 
})

// 可以通过这种方式关闭对 proxy 的深度监视（getter只关心返回值或其一级属性）
watch( ()=>proxy, (newValue, oldValue) => {
    console.log(newValue, oldValue) 
}, {deep : false}) // 此种方式即可关闭深度监视

// 也可以开启对 ref(基本数据类型).value 的监视（getter只关系返回值）
watch( ()=>ref(基本数据类型).value, (newValue, oldValue) => {
    console.log(newValue, oldValue) 
}) // 同 watch( ref(基本数据类型), ...)

监视目标可以以数组的形式提供；

// 采用数组的方式，一次性监视多个属性。
// watch( [监视目标1, 监视目标2] ...)
// 只要其中一个监视目标更新了，就会执行handler
// newValue,、oldValue 都是数组，囊括了各个监视目标的新值和旧值
watch([counter, counter2], ( newValue, oldValue) => {
    console.log(newValue[0], oldValue[1]) // counter的新值，counter2的旧值
})

handler

是监视器的回调，当监视属性变动时，会传入两个参数并执行handler。

// 监视属性 变动时，执行这个回调
handler(newValue, oldValue);

options对象

watch函数中进行监听器额外配置的对象。如；

options = {
    immediate : true, // 开始的时候，立即执行一次handler
    deep : true // 启用深度监视
}

watchEffect

watchEffect 是 Vue3 提供的一个关于监视的组合式API，watchEffect 直接接收一个callback，当callback关联的响应式数据发送了变化，则执行这个 callback，初始化时，也会执行一次 callback。

import { reactive, watchEffect } from 'vue'

setup(){
    let data = reactive({
        counter1 : 1,
        counter2 : 100,
        counter3 : 1000
    })
    
    // watchEffect函数中直接跟一个回调函数即可。
    // 这个回调函数什么时候执行？一开始就先执行一次。然后函数体当中使用到了某个数据。
    // 这个使用到的数据只要发生变化，watchEffect中的回调函数一定会执行一次。
    watchEffect(() => {
        // 我这个回调函数当中使用到了data.counter1和data.counter3
        // 这个回调函数的执行实际是：只要counter1发生变化，或者counter3发生变化，这个回调函数都会执行。
        const a = data.counter1
        const b = data.counter3
        console.log(a, b)
    })
    // 返回一个对象
    return {data}
}
Copyright ©2024-present Guitar