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>

个人评价

script setup语法糖提供了传统html函数使用方式的便利性+组件化开发的效率，组件导入即可使用无需扔到components,需要计算属性引入 watch即可