Vue3入门01

Vue3入门01

本文章通过简单案例来学习Vue3的组合API，了解Vue3的新特性以及使用方法，本文做个人学习用途，不参与商业用途。
参考链接：https://composition-api.vuejs.org/zh/

setup函数

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

1.函数调用时机

创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从Vue2.x的生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用

  beforeCreate() {
   
    console.log('beforecreated')
  },
  created() {
   
    console.log('created')
  },
  setup(props) {
   
    console.log('setup')
  }

代码执行结果:

2. 模板中使用

如果 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文：

先来看看vue组件的代码

<template>
  <div>{
   {
    count }} {
   {
    object.foo }}</div>
</template>

<script>
  import {
    ref, reactive