vue3中使用setup语法糖

最新推荐文章于 2024-10-15 19:51:44 发布

转载最新推荐文章于 2024-10-15 19:51:44 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://wenku.baidu.com/view/52feea6828160b4e767f5acfa1c7aa00b52a9d96.html

文章标签：

#vue.js #javascript #前端

本文介绍了Vue 3中引入的新特性，包括组件引入方式的变化、定义组件props的方法及响应式变量、函数等的声明方式。通过这些更新，开发者可以更高效地进行应用开发。

2.1 组件引⼊
之前的写法

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWord from '@/components/HelloWord.vue';
export default defineComponent({
  name: 'Home',
  components:{
    HelloWord
  }
});
</script>

现在的写法

<script setup lang="ts">
import HelloWord from '@/components/HelloWord.vue'; //不⽤注册，引⼊即注册
</script>

2.2 定义组件的 props

<script setup lang="ts">
import { ref,defineProps } from 'vue'
type Props={
  msg:string
}
defineProps<Props>();
</script>

2.3 定义响应变量、函数、监听、计算属性…

<script setup lang="ts">
import { ref,computed,watchEffect } from 'vue'
const count = ref(0); //不⽤ return ，直接在 templete 中使⽤
const addCount=()=>{  //定义函数，使⽤同上
  count.value++;
 }