vue2升级vue3：组合式 API之Setup(props,context)—Vue2.x到Vue3注意

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 中移除，不再支持。

生命周期的变化

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/html/webfront/ECMAScript/vue3/8682.html