vite-plugin-vue-setup-extend插件使用
作用 合并组件name 和 setup 语法糖
引用之前的写法
代码语言：javascript复制<script lang="ts" />
export default {
name: 'User'
}
<script>
<script lang="ts" setup>
let name = 'iwhao'
</script>项目下载 vite-plugin-vue-setup-extend
代码语言：javascript复制npm i vite-plugin-vue-setup-extendvite.config.ts中引入
代码语言：javascript复制import vueSetupExtend from 'vite-plugin-vue-setup-extend'
plugins: [
vueSetupExtend()
]引入之后的写法,看起来是不是很简洁
代码语言：javascript复制<script lang="ts" setup name="User">
let name = 'iwhao'
</script>补充： 新版本的vue3 已经支持宏定义了
defineOptions
代码语言：javascript复制<script setup>
defineOptions({
name:'User'
inheritAttrs: false,
customOptions: {
/* ... */
}
})
</script>defineOptions是一个宏定义，选项将会被提升到模块作用域中，无法访问 <script setup> 中不是字面常数的局部变量。
- 字面常数：在编程中，字面常数指的是直接在代码中用字面值（如整数、字符串、布尔值等）表示的值，这些值在程序运行过程中不会改变。
ref和reactive的使用技巧
特点
ref 也能定义对象，但写起来麻烦 更改值还得写 .value，不敢想象 如果深层次结构将会是 .value噩梦 所以建议 浅层推荐ref，深层次使用reactive；
但reactive有一定的使用局限性，例如reactive 重新分配一个新对象会失去响应式（应用场景 数据从接口获取，拿到后重新赋值）
有解决方案
错误的尝试 以为重新套一层reactive就可以，但实际不会生效
代码语言：javascript复制<template>
<div>
<h1>{{ man.name }}</h1>
<h1>{{ man.age }}</h1>
<button @click="change">改变</button>
</div>
</template>
<script setup>
import { reactive, toRef, toRefs } from 'vue'
let man = reactive({
age: 18,
name: 'iwhao'
})
function change(){
man = reactive({
age: 20,
name: 'iwhao2'
})
}
</script>其实可以利用Object.assign(a,b)去整体替换 b中的值替换掉a中的值 a是个 reactive对象
而且注意 reactive 解构后的变量 也会失去响应式
代码语言：javascript复制let man = reactive({
age: 18,
name: 'iwhao'
})
// 这样写此age则是普通变量，非响应式
let {age} = man可以利用 toRefs 进行解构多个变量且每个变量都是响应式，但这个变量和reactive中变量其实是一体的，看下面这个例子，改变man.name的值 name值也会跟着变
然后 toRef
代码语言：javascript复制<template>
<div>
<h1>{{ man.name }}</h1>
<h1>{{ man.age }}</h1>
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
<button @click="change1">改变1</button>
<button @click="change2">改变2</button>
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
let man = reactive({
age: 18,
name: 'iwhao'
})
let {age, name} = toRefs(man)
function change1(){
age.value = 30
name.value = 'iwhao tai shuai'
}
function change2(){
man.age = 20
man.name = 'iwhao shuai'
}
</script>
