vite-plugin-vue-setup-extend插件使用

作用合并组件name设置和 setup 语法糖

引用之前的设置name的写法

<script lang="ts" />
    export default {
        name: 'User'
    }
<script>
<script lang="ts" setup>
    let name = 'iwhao'
</script>

看起来是不是很麻烦，还要写两个script标签，那有没有办法利用一个script标签来同时声明setup和name名称呢，当然有，vite-plugin-vue-setup-extend这个插件就可以做到，帮你省去了多余的东西

项目下载 vite-plugin-vue-setup-extend插件

    npm i vite-plugin-vue-setup-extend

vite.config.ts 中引入 vite-plugin-vue-setup-extend

    import vueSetupExtend from 'vite-plugin-vue-setup-extend'

    plugins: [
        vueSetupExtend()
    ]

因为修改了配置文件，所以需要重新运行项目命令

    npm run dev

引入之后的写法,看起来简洁了很多，这才符合人体工程学写法

    <script lang="ts" setup name="User">
        let name = 'iwhao'
    </script>

补充： vue3 已经支持宏定义了defineOptions

defineOptions

<script setup>
defineOptions({
    name:'User'
    inheritAttrs: false,
    customOptions: {
    /* ... */
    }
})
</script>

defineOptions是一个宏定义，选项将会被提升到模块作用域中，无法访问 script setup 中不是字面常数的局部变量。

字面常数：在编程中，字面常数指的是直接在代码中用字面值（如整数、字符串、布尔值等）表示的值，这些值在程序运行过程中不会改变。

ref和reactive的使用技巧

特点

ref 可以虽然持有任何类型的值，但如果是深层次的结果后，写起来会很麻烦更改值还得写 .value，不敢想象如果深层次结构将会是 .value噩梦，所以建议浅层推荐ref，深层次使用reactive；

但reactive有一定的使用局限性，例如reactive 重新分配一个新对象会失去响应式（应用场景数据从接口获取，拿到后重新赋值）

错误的尝试：以为重新套一层reactive就可以，但实际不会生效，想想也对

<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 解构后的变量也会失去响应式

    let man = reactive({
      age: 18,
      name: 'iwhao'
    })
    // 这样写此age则是普通变量，非响应式 
    let {age} = man

可以利用 toRefs 进行解构多个变量且每个变量都是响应式，但这个变量和reactive中变量其实是一体的，看下面这个例子，改变man.name的值 name值也会跟着变


<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>

还有一个api toRef 从名称就可以看出来少了个s，可以创建一个对应的 ref，和toRefs有同样性质，当前值更新的化会与源属性同步。反之同理。

let man = reactive({
  age: 18,
  name: 'iwhao'
})

let age = toRef(man, 'age')

vue3 写法小技巧

vite-plugin-vue-setup-extend插件使用

defineOptions

ref和reactive的使用技巧