首页 > web前端 > Vue.js > vue3中<script setup>和setup函数的区别是什么

vue3中<script setup>和setup函数的区别是什么

WBOY
发布: 2023-05-27 10:57:04
转载
1871 人浏览过

    <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法,它具有更多优势:

    • 更少的样板内容,更简洁的代码。

    • 能够使用纯 TypeScript 声明 props 和自定义事件。

    • 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。

    • 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

    以上是vue3官网对<script setup>的说明,其实<script setup> 就是 setup函数的一个语法糖。

    一、基本语法

    setup函数的写法

    <script>
    import { ref } from &#39;vue&#39;
    export default {
      setup () {
        const num = ref(1);
        return { num }
      }
    }
    </script>
    登录后复制

    setup函数的写法中定义的变量和函数都需要return出来,不然无法正常使用。

    在<script setup>语法糖的写法

    <script setup>
        import { ref } from &#39;vue&#39;
        const num = ref(1)
    </script>
    登录后复制

    在<script setup>语法糖中的定义的变量和函数无需return。里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同,<script setup> 中的代码会在每次组件实例被创建的时候执行。

    二、使用外部文件区别

    setup函数

    <template>
      <div>
        <h3> {{test(name)}}</h3>
      </div>
    </template>
    <script>
    import { ref } from &#39;vue&#39;
    import { test } from &#39;@/utils/test.js&#39;
    export default {
      setup () {
        const name = ref(&#39;huang&#39;)
        const testName = test 
        return { name, testName }
      }
    }
    </script>
    登录后复制

    setup函数使用外部文件时需要在setup函数中定义成一个方法才能正常使用。

    <script setup>语法糖

    <template>
      <div>
        <h3>{{ test(name) }}</h3>
      </div>
    </template>
    <script setup>
    import { test } from &#39;@/utils/test.js&#39;
    import { ref } from &#39;vue&#39;
    const name = ref(&#39;huang&#39;)
    </script>
    登录后复制

    在<script setup>语法糖中无需再定义成一个方法,可以直接使用 。

    三、注册组件

    setup函数

    <script>
    import Hello from &#39;@/components/HelloWorld&#39;
    export default {
      components: {
        Hello
      }
    }
    </script>
    登录后复制

    <script setup>语法糖

    <script setup>
    import Hello from &#39;@/components/HelloWorld&#39;
    </script>
    登录后复制

    不需要在component 中注册了,可以直接使用。

    四、使用自定义指令

    setup函数

    <template>
        <h2 v-onceClick>使用了setup函数</h2>
    </template>
    <script>
    export default {
      directives: {
        onceClick: {
          mounted (el, binding, vnode) {
            console.log(el)
          }
        }
      },
    }
    </script>
    登录后复制

    <script setup>语法糖

    <template>
        <h2 v-my-Directive>使用了script setup</h2>
    </template>
    <script setup>
    const vMyDirective = {
      beforeMount: (el) => {
        console.log(el)
      }
    }
    </script>
    登录后复制

    全局注册的自定义指令将正常工作。本地的自定义指令在 <script setup> 中不需要显式注册,但他们必须遵循 vNameOfDirective 这样的命名规范

    五、父传子数据通信

    <Com :num="100"></Com>
    登录后复制

    setup函数

    <script>
    export default {
      props: {
        num: {
          type: Number,
          default: 1
        }
      },
      setup (props) {
        console.log(props)
      }
    }
    </script>
    登录后复制

    <script setup>语法糖

    <script setup>
    import { defineProps } from &#39;vue&#39;
    const props = defineProps({
      num: {
        type: Number,
        default: 1
      }
    })
    </script>
    登录后复制

    六、子传父数据通信

    setup函数

    <script>
    export default {
      setup (props, context) {
        const sendNum = () => {
          context.emit(&#39;sendNum&#39;, 200)
        }
        return { sendNum }
      }
    }
    </script>
    登录后复制

    <script setup>语法糖

    <script setup>
    import { defineProps, defineEmits } from &#39;vue&#39;
    const emit = defineEmits([&#39;submit&#39;])
    const sendNum = () => {
      emit(&#39;submit&#39;, 1000)
    }
    </script>
    登录后复制

    defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要被导入,因为它们将会随着 <script setup> 处理过程被编译。

    defineProps 接收与 props 选项相同的值,defineEmits 接收与 emits 选项相同的值。

    defineProps 和 defineEmits 在选项传入后,会提供恰当的类型推导。

    传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此,在 setup 作用域中声明的局部变量不能被传入的选项引用。这样做会引起编译错误。但是,它可以引用导入的绑定,因为它们也在模块作用域内。

    七、defineExpose和expose

    使用setup函数定义的组件的expose是默认开启的,会将函数内定义的实例变量、方法全部暴露出去。而使用<script setup>的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。

    可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性,若不使用 defineExpose 则获取不到当前引用的组件实例变量、方法。

    使用了defineExpose

    <script setup>
    import { ref } from "vue";
    const type = ref("<script setup>语法糖");
    const msg = ref("使用了defineExpose");
    defineExpose({
      type,
      msg,
    });
    </script>
    登录后复制

    vue3中<script setup>和setup函数的区别是什么

    不使用defineExpose

    <script setup>
    import { ref } from "vue";
    const type = ref("<script setup>语法糖");
    const msg = ref("使用了defineExpose");
    </script>
    登录后复制

    vue3中<script setup>和setup函数的区别是什么

    八、与普通的<script> 一起使用

    可以同时使用常规的 <script> 标签和 <script setup> 标签。在特定需要的情况下,常规的<script>可能会被使用

    • 声明无法在 <script setup> 中声明的选项,例如 inheritAttrs 或插件的自定义选项。

    • 声明模块的具名导出 (named exports)。

    • 运行只需要在模块作用域执行一次的副作用,或是创建单例对象

    <script>
    // 普通 <script>, 在模块作用域下执行 (仅一次)
    runSideEffectOnce()
    // 声明额外的选项
    export default {
      name:&#39;header&#39;,
      inheritAttrs: false,
      customOptions: {}
    }
    </script>
    <script setup>
    // 在 setup() 作用域中执行 (对每个实例皆如此)
    </script>
    登录后复制

    九、顶层的 await

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

    <script setup>
    const post = await fetch(&#39;https://api.com&#39;).then((r) => r.json())
    </script>
    登录后复制

    另外,await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

    vue3中<script setup>和setup函数的区别是什么

     十、限制<script setup> 使用src属性

    由于模块执行语义的差异,<script setup> 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候,对于开发者和工具来说都会感到混乱。因此,<script setup> 不能和 src attribute 一起使用。

    以上是vue3中<script setup>和setup函数的区别是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

    相关标签:
    来源:yisu.com
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板