vue script setup语法糖

我不是女神ヾ 2022-10-14 15:48 213阅读 0赞

# 创建项目 #

**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即可