1、在<script setup>之前，如果要定义props,emits可以轻而易举地添加一个与setup平级的属性，但是用了<script setup>后，就没法这么干了 setup属性已经没有了，自然无法添加与其平级的属性。为了解决这一问题，引入了defineProps和defineEmits这两个宏，但这只解决了props和emits这两个属性。所以在vue3.3中新引入了defineOptions宏，可以用defineOptions定义任意的选项，props,emits,expose,slots除外（因为这些可以使用defineXXX来做到），demo:

<script setup>
//默认这里会提示"should always be multi-word"
defineOptions({
    name:'LoginIndex'
})
</script>
<template>
    <div>login index</div>
</template>

2、defineModel让v-model双向绑定更加的方便，test-com.vue:

<script setup>
import {defineModel} from 'vue'
const inputValue = defineModel()
console.log(inputValue)
</script>
<template>
    <input v-model="inputValue" type="text" />
</template>

App.vue:

<script setup>
import { ref} from 'vue'
import TestCom from '@/components/test-com.vue'
const inputValue = ref('this is a demo')
</script>
<template>
<div>
  <TestCom v-model="inputValue"></TestCom>
  <p>{{ inputValue }}</p>
</div>
</template>

在vite.config.js中需要加入相关代码：

plugins: [
    vue({
      script:{
        defineModel:true
      }
    }),
]

3、pinia的使用，ref()就是state，computed()就是getters，function()就是actions，counter.js:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(8)
  const doubleCount = computed(() => count.value * 2)
  const subCount = () => count.value --
  function addCount() {
    count.value++
  }
  return { count, doubleCount, addCount,subCount }
})

App.vue:

<script setup>
import {useCounterStore} from '@/stores/counter.js'
import TestCom from '@/components/test-com.vue'
const counterStore = useCounterStore()
console.log(counterStore)
</script>
<template>
<div>
 count: {{ counterStore.count }}
 <button @click="counterStore.addCount">加</button>
 <button @click="counterStore.subCount">减</button>
 <TestCom></TestCom>
</div>
</template>

4、pinia demo，channel.js

import { defineStore } from 'pinia'
import axios from 'axios'
export const useChannelStore = defineStore('channel', () => {
  //声明操作数据的方法
  const getList = async () =>{
    const {data:{data}} = await axios.get('url')
    console.log(data);
  }
  return { getList }
})

App.vue：

<script setup>
import {useChannelStore} from '@/stores/channel.js'
import { onMounted } from 'vue';
const channelStore = useChannelStore()
console.log(channelStore)
onMounted(() => {channelStore.getList()})
</script>