基础语法

CompositionAPI 风格

<template>
    <CustomCompontent/>
    <div>
        {{name}}                    // ref定义的数据可以直接使用
        <ul v-if="showTodo">
          <li
            v-for="each in data"    // 遍历 data
            :key="each.age"         // 通过 age 来排序
          >
            {{ each.name }}
          </li>
        </ul>
    </div>
</template>

<script>
import { onMounted, onCreated, onUpdate } from 'vue'
import { ref, defineComponent, reactive, refs, watch, computed } from 'vue'

import CustomCompontent from "@/*.vue"
export default defineComponent({
  name:"",
  components: { CustomCompontent },
  setup(props, context){
    /* context 内常用的实例 */
    const { emit,}
    
    // data 响应式数据定义
    const name = ref('ccvb')
    const data = reactive([
        { age:18, count:999, name:'ccvb1' },
        { age:19, count:999, name:'ccvb2' },
    ])
      
    // 声明周期
    onCreated(()=>{})
    onMounted(()=>{})
      
      
    // 属性监听
    let stopWatcher = watch('xxxx',()=>{})
    
    // 计算属性
    let t = computed( ()=>xxxx.value*3 )
    
    // methods
    const foo = ()=>{ ../ }
    
    // 要用到的属性均要进行暴露
    return { name, nameData }
  }
})
</script>

<style lang="stylus" module></style>

<script setup>风格

<script setup>主要特点：

• 无需return
• 子组件无需手动注册（defineComponent.components）

<template lang="pug">div {{name}}</template>

<srcipt setup lang="ts">
// 获取props
const props = defineProps(['name', 'userInfo', 'tags'])
    
// 配合自动导入api，这里可以省略一些vue内置的，让代码更加专注业务
import { ref } from 'vue'
import { onMounted, onCreated, onUpdate } from 'vue'    

// 生命周期
onCreated(()=>{})
onMounted(()=>{})
    
// 暴露变量
const name = "xxxxx"
    
// 其他使用基本与Composition API一致
</srcipt>

<style lang="stylus" module></style>

导出组合式函数API use*.js

以独立js文件存在的工具库写法

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

// 其他.vue文件中引入使用
<script setup>
import { useMouse } from './mouse.js'

const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>