vue script setup语法糖

创建项目

yarn 安装的 vue3.0+vite+ts

yarn create @vitejs/app my-vue-ts-vite --template vue-ts

示例

这个时候你在App.vue发现这个 script setup语法糖

<template>
  <h1><a href="">{
   { count }}</a></h1>
  <h1>{
   {state.data.a}}</h1>
  <button @click="count++">count ++</button>
</template>
<script setup> import { ref,defineProps,reactive,watch } from 'vue'; import { helloLog} from '/@/hooks/hello' /* 基本数据类型 引用数据类型（复杂类型） 个人建议 ref初始化变量 ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value */ const count =ref(0); const state = reactive({ data:{ a:1} }) defineProps({ msg: { type: String, required: true } }) watch(count,(e)=>{ console.log('count变化了:>> ', e); }) function name(params) { console.log('原始html用法 ',helloLog()); } // </script>
<style scoped lang="scss" > h1{ a { color: #42b983; } } label { margin: 0 0.5em; font-weight: bold; } code { background-color: #eee; padding: 2px 4px; border-radius: 4px; color: #304455; } </style>

总结模板

组件

<template>
  <div></div>
</template>
<script setup> import { ref,defineProps,reactive,getCurrentInstance } from 'vue'; const internalInstance = getCurrentInstance();//获取当前实例 const route = internalInstance?.appContext.config.globalProperties.$route; /* 基本数据类型 引用数据类型（复杂类型） 个人建议 ref初始化变量 ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value */ const count =ref(0); const state = reactive({ data:{ a:1} }) defineProps({ msg: { type: String, required: true } }) </script>
<style scoped lang="scss" > </style>

普通页面

<template>
  <div>
      <HelloWorld/>
  </div>
</template>
<script setup> import { ref,defineProps,reactive,getCurrentInstance } from 'vue'; const internalInstance = getCurrentInstance();//获取当前实例 const route = internalInstance?.appContext.config.globalProperties.$route; import HelloWorld from '/@/components/HelloWorld.vue' /* 基本数据类型 引用数据类型（复杂类型） 个人建议 ref初始化变量 ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value */ const count =ref(0); const state = reactive({ data:{ a:1} }) </script>
<style scoped lang="scss" > </style>