• home > webfront > ECMAS > vue3 >

    踩坑笔记:组合式 API之Setup(props,context)—Vue2.x到Vue3注意

    Author:zhoulujun Date:

    Vue3(其实从2 6开始)中引入了一个新的指令v-slot,用来表示具名插槽和默认插槽,可以在slot容器上使用v-slot来表示一个传入组件的插槽,通过指令参数来表示插槽的名称。

    vue3出来已经很长一段时间,项目已经用起来了。本篇是使用过程的中的一些零零散散的笔记的。

    vue3基础教程:https://www.runoob.com/vue3/vue3-intro.html



    在看:不要再用Vue 2的思维写Vue 3了 https://mp.weixin.qq.com/s/W_2Yb7QkcgOdewVqtaEQQQ

    vue3的Compostion API时,如果还是用Vue2的形式组织代码,这不但不会提升代码质量,反而因为缺乏约束而降低可读性。

    《架构整洁之道》书中提到:对于大多数应用,可维护性比可重用性更加重要

    vue3 借鉴了react hook实现了更自由的编程方式,提出了Composition API,Composition API不需要通过指定一长串选项来定义组件,而是允许用户像编写函数一样自由地表达、组合和重用有状态的组件逻辑,同时提供出色的TypeScript支持。


    特别注意事项列表:

    $children 实例 property 已从 Vue 3.0 中移除,不再支持。


    生命周期的变化

    Vue2.xVue3
    beforeCreate使用 setup()
    created使用 setup()
    beforeMountonBeforeMount
    mountedonMounted
    beforeUpdateonBeforeUpdate
    updatedonUpdated
    beforeDestroyonBeforeUnmount
    destroyedonUnmounted
    errorCapturedonErrorCaptured


    Setup(props,context)

    https://v3.cn.vuejs.org/guide/composition-api-setup.html

    setup替代了以前的 beforeCreate 和 created ,类似于初始化的功能

    import { toRefs } from 'vue'
    export default {
      props: {
        title: String  },
      setup(props,context) {
        console.log(props.title)
        const { title } = toRefs(props)
         // Attribute (非响应式对象,等同于 $attrs)
        console.log(context.attrs)
        // 插槽 (非响应式对象,等同于 $slots)
        console.log(context.slots)
        // 触发事件 (方法,等同于 $emit)
        console.log(context.emit)
        // 暴露公共 property (函数)
        console.log(context.expose)
      }}
      
    export default {
      setup(props, { attrs, slots, emit, expose }) {
        ...
    }}
    • setup 函数中只能使用 toRefs 函数来解构 prop,因为 props 是响应式的,你不能使用 ES6 解构,它会消除 prop 的响应性

    • context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构。

    • attrs 和 slots 是有状态的对象,它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构,并始终以 attrs.x 或 slots.x 的方式引用 property。请注意,与 props 不同,attrs 和 slots 的 property 是非响应式的。如果你打算根据 attrs 或 slots 的更改应用副作用,那么应该在 onBeforeUpdate 生命周期钩子中执行此操作。

    执行 setup 时,组件实例尚未被创建。因此,你只能访问以下 property:

    • props

    • attrs

    • slots

    • emit

    无法访问以下组件选项:

    • data

    • computed

    • methods

    getCurrentInstance

    getCurrentInstance 支持访问内部组件实例。

    getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。

    getCurrentInstance 只能在 setup 或生命周期钩子中调用

    如需在 setup 或生命周期钩子外使用,请先在 setup 中调用 getCurrentInstance() 获取该实例然后再使用。

    const MyComponent = {
      setup() {
        const internalInstance = getCurrentInstance() // 有效
    
        const id = useComponentId() // 有效
    
        const handleClick = () => {
          getCurrentInstance() // 无效
          useComponentId() // 无效
    
          internalInstance // 有效
        }
    
        onMounted(() => {
          getCurrentInstance() // 有效
        })
    
        return () =>
          h(
            'button',
            {
              onClick: handleClick
            },
            `uid: ${id}`
          )
      }
    }
    
    // 在组合式函数中调用也可以正常执行
    function useComponentId() {
      return getCurrentInstance().uid
    }



    指令相关

    Vue 3 把大多数全局 API 和 内部 helper 移到了 ES 模块中导出(譬如 v-model、transition、teleport),从而使得 Vue 3 在增加了很多新特性之后,基线的体积反而小了。

    具体查看:

    Vue3时jsx组件绑定自定义的事件、v-model、sync修饰符


    同行文章:

    vue3最全的jsx教学,保证业务上手无问题!手敲代码,有知识点,附带和temp https://www.dht.red/blog/blog_content?article_id=54



    转载本站文章《踩坑笔记:组合式 API之Setup(props,context)—Vue2.x到Vue3注意》,
    请注明出处:https://www.zhoulujun.cn/index.php?m=content&c=index&a=show&catid=330&id=8682