devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3.2单文件组件setup的语法糖总结_setup语法糖

作者：小桥流水78 | 2024-07-29 23:57:16

赞

踩

setup语法糖

目录

前言

setup语法糖

一、基本用法

二、data和methods

三、计算属性computed

四、监听器watch、watchEffect

五、自定义指令directive

六、import导入的内容可直接使用

七、声明props和emits 

八、父组件获取子组件的数据

 九、provide和inject传值

十、路由useRoute和useRouter

十一、对await异步的支持

十二、nextTick

十三、全局属性globalProperties

十四、生命周期

十五、与普通的script标签一起使用

十六、v-memo新指令

style新特性

一、局部样式

二、深度选择器

三、插槽选择器

四、全局选择器

五、混合使用局部与全局样式

六、支持CSS Modules

七、与setup一同使用

八、动态 CSS

前言

        满满的干货，建议收藏慢慢看，可以当作Vue3.0的学习资料。

        在vue2.0时期，组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed...选项里，这样编写的代码不便于后期的查阅（查找一个业务逻辑需要在各个选项来回切换）。setup函数的推出就是为了解决这个问题，让新手开发者更容易上手...

setup语法糖

        setup是Vue3.0后推出的语法糖，并且在Vue3.2版本进行了大更新，像写普通JS一样写vue组件，对于开发者更加友好了；按需引入computed、watch、directive等选项，一个业务逻辑可以集中编写在一起，让代码更加简洁便于浏览。

一、基本用法

只需在<script>里添加一个setup属性，编译时会把<script setup></script>里的代码编译成一个setup函数

  1. <script setup>
  2. console.log('hello script setup')
  3. </script>

普通的<script>只会在组件被首次引入的时候执行一次，<script setup>里的代码会在每次组件实例被创建的时候执行。

二、data和methods

<script setup>里声明的变量和函数，不需要return暴露出去，就可以直接在template使用

  1. <script setup>
  2. import { ref, reactive } from 'vue'    
  3. // 普通变量
  4. const msg = 'Hello!'
  5.  
  6. // 响应式变量
  7. let num = ref(1111)         // ref声明基本类型变量
  8. const obj = reactive({        // reactive声明对象类型变量，如Object、Array、Date...
  9.     key: 'this is a object'
  10. })
  11.  
  12. // 函数
  13. function log() {
  14.     console.log(msg)          // Hello
  15.     console.log(num.value)    // 1111（可根据input输入值而改变）
  16.     console.log(obj.key)      // this is a object
  17. }
  18. </script>
  19.  
  20. <template>
  21.     <h1>{{ msg }}</h1>
  22.     <p>{{obj.key}}</p>
  23.     <input v-model="num" type="text" />
  24.     <button @click="log">打印日志</button>
  25. </template>

三、计算属性computed

  1. <script setup>
  2. import { ref, computed } from 'vue'
  3.  
  4. let count = ref(0)
  5. const countPlus = computed(()=>{
  6.     return count.value+1
  7. })
  8. </script>
  9.  
  10. <template>
  11.     <h1>计数：{{ countPlus }}</h1>
  12. </template>

四、监听器watch、watchEffect

1、watch监听器除了使用方式有区别之外，其他的与vue2.0没啥变化

  1. <script setup>
  2. import { ref, reactive, watch } from 'vue'
  3.  
  4. // 监听ref
  5. let count = ref(0)
  6. watch(count, (newVal, oldVal)=> {
  7.     console.log('修改后', newVal)
  8.     console.log('修改前', oldVal)
  9. })
  10.  
  11. // 监听reactive属性
  12. const obj = reactive({
  13.     count: 0
  14. })
  15. watch(
  16.     ()=> obj.count,     // 一个函数，返回监听属性
  17.     (newVal, oldVal)=> {
  18.         console.log('修改后', newVal)
  19.         console.log('修改前', oldVal)
  20.     },
  21.     {
  22.         immediate: true,     // 立即执行，默认为false
  23.         deep: true     // 深度监听，默认为false
  24.     }
  25. )
  26.  
  27. const onChange = function(){
  28.     count.value++
  29.     obj.count++
  30. }
  31. </script>
  32.  
  33. <template>
  34.     <button @click="onChange">改变count</button>
  35. </template>

2、watchEffect

watchEffect是Vue3.0新增的一个监听属性的方法，它与watch的区别在于watchEffect不需要指定监听对象，回调函数里可直接获取到修改后的属性的值

  1. <script setup>
  2. import { ref, reactive, watchEffect } from 'vue'
  3.  
  4. let count = ref(0)
  5. const obj = reactive({
  6.     count: 0
  7. })
  8. setTimeout(()=>{
  9.     count.value++
  10.     obj.count++
  11. }, 1000)
  12.  
  13. watchEffect(()=> {
  14.     console.log('修改后的count', count.value)
  15.     console.log('修改前的obj', obj.value)
  16. })
  17. </script>

五、自定义指令directive

以 vNameOfDirective 的形式来命名本地自定义指令，可以直接在模板中使用

  1. <script setup>
  2. // 导入指令可重命名
  3. // import { myDirective as vMyDirective } from './MyDirective.js'
  4.  
  5. // 自定义指令
  6. const vMyDirective = {
  7.   beforeMount: (el) => {
  8.     // 在元素上做些操作
  9.   }
  10. }
  11. </script>
  12. <template>
  13.   <h1 v-my-directive>This is a Heading</h1>
  14. </template>

六、import导入的内容可直接使用

 1、导入的模块内容，不需要通过 methods 来暴露它

  1. // utils.js 
  2. export const onShow = function(name) {
  3.     return 'my name is ' + name
  4. }
  1. // Show.vue
  2. <script setup>
  3.     import { onShow } from './utils.js'
  4. </script>
  5. <template>
  6.     <div>{{ onShow('jack') }}</div>
  7. </template>

 2、导入外部组件，不需要通过components注册使用

  1. // Child.vue
  2. <template>
  3.     <div>I am a child</div>
  4. </template>
  1. // Parent.vue
  2. <script setup>
  3.     import Child from './Child.vue'
  4. </script>
  5. <template>
  6.     <child></child>
  7. </template>

七、声明props和emits 

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的

  1. // Child.vue
  2. <script setup>
  3.  
  4. // 声明props
  5. const props = defineProps({
  6.     info: {
  7.         type: String,
  8.         default: ''
  9.     }
  10. })
  11.  
  12. // 声明emits
  13. const $emit = defineEmits(['change'])
  14.  
  15. const onChange = function() {
  16.     $emit('change', 'child返回值')
  17. }
  18. </script>
  19.  
  20. <template>
  21.     <h1>信息：{{ info }}</h1>
  22.     <button @click="onChange">点击我</button>
  23. </template>
  1. // Parent.vue
  2. <script setup>
  3. import { ref } from 'vue'
  4. import Child from './Child.vue'
  5.  
  6. const msg = ref('hello setup !')    // 响应式变量
  7.  
  8. const onAction = function(event) {
  9.     console.log(event)    // child返回值
  10. }
  11. </script>
  12.  
  13. <template>
  14.     <child :info="msg" @change="onAction"></child>
  15. </template>

如果使用了 Typescript，使用纯类型声明来声明 prop 和 emits 也是可以的。

八、父组件获取子组件的数据

父组件要想通过ref获取子组件的变量或函数，子组件须使用defineExpose暴露出去

  1. // Child.vue
  2. <script setup>
  3. import { ref, defineExpose } from 'vue'
  4.  
  5. const info = ref('I am child')
  6. const onChange = function() {
  7.     console.log('Function of child')
  8. }
  9.  
  10. // 暴露属性
  11. defineExpose({
  12.     info,
  13.     onChange
  14. })
  15. </script>
  16.  
  17. <template>
  18.     <h1>信息：{{ info }}</h1>
  19.     <button @click="onChange">点击我</button>
  20. </template>
  1. // Parent.vue
  2. <script setup>
  3. import { ref } from 'vue'
  4. import Child from './Child.vue'
  5.  
  6. const childRef = ref()
  7. const onAction = function() {
  8.     console.log(childRef.value.info)    // I am child
  9.     console.log(childRef.value.onChange())    // Function of child
  10. }
  11. </script>
  12.  
  13. <template>
  14.     <child ref="childRef"></child>
  15.     <button @click="onAction">获取子值</button>
  16. </template>

 九、provide和inject传值

无论组件层次结构有多深，父组件都可以通过provide 选项来其所有子组件提供数据，子组件通过inject接收数据

  1. // Parent.vue
  2. <script setup>
  3. import { ref, provide } from 'vue'
  4. import Child from './Child.vue'
  5.  
  6. const msg = ref('Hello, my son')
  7. const onShow = function() {
  8.     console.log('I am your parent')
  9. }
  10.  
  11. provide('myProvide', {
  12.     msg,
  13.     onShow
  14. })
  15. </script>
  16.  
  17. <template>
  18.     <child></child>
  19. </template>
  1. // Child.vue
  2. <script setup>
  3. import { inject } from 'vue'
  4.  
  5. const provideState = inject('myProvide')    // 接收参数
  6.  
  7. const getData = function() {
  8.     console.log(provideState.msg)    // Hello, my son
  9.     console.log(provideState.onShow())    // I am your parent
  10. }
  11. </script>
  12.  
  13. <template>
  14.     <button @click="getData">获取父值</button>
  15. </template>

十、路由useRoute和useRouter

  1. <script setup>
  2. import { useRoute, useRouter } from 'vue-router'
  3.  
  4. const $route = useRoute()
  5. const $router = userRouter()
  6.  
  7. // 路由信息
  8. console.log($route.query)
  9.  
  10. // 路由跳转
  11. $router.push('/login')
  12. </script>

十一、对await异步的支持

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

  1. <script setup>
  2.     const post = await fetch(`/api/post/1`).then(r => r.json())
  3. </script>

十二、nextTick

  1. // 方式一
  2. <script setup>
  3. import { nextTick } from 'vue'
  4.  
  5. nextTick(()=>{
  6.     console.log('Dom已更新！')
  7. })
  8. </script>
  1. // 方式二
  2. <script setup>
  3. import { nextTick } from 'vue'
  4.  
  5. await nextTick()    // nextTick是一个异步函数，返回一个Promise实例
  6. // console.log('Dom已更新！')
  7. </script>

十三、全局属性globalProperties

  1. // main.js里定义
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. const app = createApp(App)
  5.  
  6. // 定义一个全局属性$global 
  7. app.config.globalProperties.$global = 'This is a global property.' 
  8.  
  9. app.mount('#app')
  1. // 组件内使用
  2. <script setup>
  3. import { getCurrentInstance } from 'vue'
  4.  
  5. // 获取vue实例
  6. const { proxy } = getCurrentInstance()
  7. // 输出
  8. console.log(proxy.$global)    // This is a global property.
  9. </script>

十四、生命周期

setup()里访问组件的生命周期需要在生命周期钩子前加上“on”，并且没有beforeCreate和created生命周期钩子

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

  1. // 使用方式
  2. <script setup>
  3. import { onMounted } from 'vue'
  4.  
  5. onMounted(()=> {
  6.     console.log('onMounted')
  7. })
  8. </script>

十五、与普通的script标签一起使用

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：

  • 无法在 <script setup> 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项；
  • 声明命名导出，<script setup>定义的组件默认以组件文件的名称作为组件名；
  • 运行副作用或者创建只需要执行一次的对象。
  1. <script>
  2. // 普通 <script>, 在模块范围下执行(只执行一次)
  3. runSideEffectOnce()
  4.  
  5. // 声明额外的选项
  6. export default {
  7.   name: 'ComponentName',    // 组件重命名
  8.   inheritAttrs: false,
  9.   customOptions: {}
  10. }
  11. </script>
  12.  
  13. <script setup>
  14. // 在 setup() 作用域中执行 (对每个实例皆如此)
  15. </script>

十六、v-memo新指令

该指令与v-once类似，v-once是只渲染一次之后的更新不再渲染，而v-memo是根据条件来渲染。该指令接收一个固定长度的数组作为依赖值进行记忆比对，如果数组中的每个值都和上次渲染的时候相同，则该元素（含子元素）不刷新。

1、应用于普通元素或组件；

  1. <template>
  2. <-- 普通元素 -->
  3. <div v-memo="[valueA, valueB]">
  4.   ... 
  5. </div>
  6.  
  7. <-- 组件 -->
  8. <component v-memo="[valueA, valueB]"></component>
  9. </template>
  10.  
  11. <script setup>
  12. import component from "../compoents/component.vue"
  13. </script>

当组件重新渲染的时候，如果 valueA 与 valueB 都维持不变，那么对这个 <div> 以及它的所有子节点的更新都将被跳过。

2、结合v-for使用

v-memo 仅供性能敏感场景的针对性优化，会用到的场景应该很少。渲染 v-for 长列表 (长度大于 1000) 可能是它最有用的场景：

  1. <template>
  2. <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  3.   <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  4.   <p>...more child nodes</p>
  5. </div>
  6. </template>

当selected发生变化时，只有item.id===selected的该项重新渲染，其余不刷新。

style新特性

Vue3.2版本对单文件组件的style样式进行了很多升级，如局部样式、css变量以及样式暴露给模板使用等。

一、局部样式

当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会应用到当前组件的元素上：

  1. <template>
  2.   <div class="example">hi</div>
  3. </template>
  4.  
  5. <style scoped>
  6. .example {
  7.   color: red;
  8. }
  9. </style>

二、深度选择器

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

  1. <style scoped>
  2. .a :deep(.b) {
  3.   /* ... */
  4. }
  5. </style>

通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。

三、插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标：

  1. <style scoped>
  2. :slotted(div) {
  3.   color: red;
  4. }
  5. </style>

四、全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现：

  1. <style scoped>
  2. :global(.red) {
  3.   color: red;
  4. }
  5. </style>

五、混合使用局部与全局样式

你也可以在同一个组件中同时包含作用域样式和非作用域样式：

  1. <style>
  2. /* global styles */
  3. </style>
  4.  
  5. <style scoped>
  6. /* local styles */
  7. </style>

六、支持CSS Modules

<style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类键暴露给组件：

1、 默认以$style 对象暴露给组件；

  1. <template>
  2.   <p :class="$style.red">
  3.     This should be red
  4.   </p>
  5. </template>
  6.  
  7. <style module>
  8. .red {
  9.   color: red;
  10. }
  11. </style>

2、可以自定义注入module名称

  1. <template>
  2.   <p :class="classes.red">red</p>
  3. </template>
  4.  
  5. <style module="classes">
  6. .red {
  7.   color: red;
  8. }
  9. </style>

七、与setup一同使用

注入的类可以通过 useCssModule API 在 setup() 和 <script setup> 中使用：

  1. <script setup>
  2. import { useCssModule } from 'vue'
  3.  
  4. // 默认, 返回 <style module> 中的类
  5. const defaultStyle = useCssModule()
  6.  
  7. // 命名, 返回 <style module="classes"> 中的类
  8. const classesStyle = useCssModule('classes')
  9. </script>

八、动态 CSS

单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：

  1. <script setup>
  2. const theme = {
  3.   color: 'red'
  4. }
  5. </script>
  6.  
  7. <template>
  8.   <p>hello</p>
  9. </template>
  10.  
  11. <style scoped>
  12. p {
  13.   color: v-bind('theme.color');
  14. }
  15. </style>

（完） 

参考文献：

SFC 语法规范 | Vue.js

Vue3.2 setup语法糖、Composition API、状态库Pinia归纳总监

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/901118
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号