vue3组合式API小结

选项式API和组合式API

1、使用选项式 API,用包含多个选项的对象来描述组件的逻辑,例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。
2、组合式 API,我们可以使用导入的 API 函数来描述组件逻辑
vue3组合式API小结_第1张图片

创建 vue3 项目

node本版:node 16.x.x,
脚手架:create-vue 脚手架工具,底层vite
创建vue3项目:npm init vue@latest

vue3 单文件组件

1、vite.config.js配置文件基于vite的配置
2、template模板不再要求唯一根元素
3、script和template调整顺序(模板和样式在一起更容易维护)

vue3 根

1、以app作为参数生产一个应用实例对象
2、挂载到id为app的节点上

组合式API

setup函数
1、return 数据和方法

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const message='我在学习vue3!'
    return {
      message
    }
  },
})
script>
<template>
  <div>{{message}}div>
template>

os

<script setup>
    const message='我在学习vue3!'
script>
<template>
  <div>{{message}}div>
template>

2、setup选择在beforecreate函数之前 自动执行
3、

你可能感兴趣的:(javascript,前端,vue.js)