setup语法糖体验

一、准备

1.1 简介

vue提案链接（注意详细链接每天都在变化，这是 vue 官方的在github维护的提案仓库，写在今天的提案索引是 40，自己进入链接寻找）
setup语法糖 一个减少重复代码的语法糖，之前setup语法糖的提案在修改阶段，现阶段已经定稿，详情看下面的语法

1.2 插件准备

如果你使用vscode编辑器，最好安装 Volar 插件，它和 Vetur 一样也会对.Vue格式的文件高亮显示，支持vue2、vue3，并且还多了在 template 中对 TypeScript 的支持，自定义组件标签高亮，以及本文要说的 setup语法糖 支持
注意来自Volar插件的提示：

Note: You need to disable Vetur to avoid conflicts.

Vetur 也是之前写 vue2 很常用的插件，但是它已经十分落后，不支持 vue3 的 setup 语法糖，会发生冲突，如果你想写 vue3 的 setup 语法糖请卸载或者禁用它，安装 Volar 足矣。

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";  //此处使用 Vetur 插件会报红
</script>

二、语法

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++;
}
const howCount=computed(()=>"现在count值为："+count.value);//定义计算属性，使用同上
watchEffect(()=>console.log(count.value)); //定义监听，使用同上
//...some code else
</script>

2.3 使用 await 异步

注意在vue3的源代码中，setup执行完毕，函数 getCurrentInstance 内部的有个值会释放对 currentInstance 的引用，await 语句会导致后续代码进入异步执行的情况。所以上述例子中最后一个 getCurrentInstance() 会返回 null，建议使用变量保存第一个 getCurrentInstance() 返回的引用.

三、其他

3.1 语法糖实现

vue文件代码

<template>
  <div>{{ msg }}</div>
</template>
<script setup>
  const msg = 'Hello!'
</script>

编译后的js代码：

export default {
  setup() {
    const msg = 'Hello!'

    return function render() {
      // has access to everything inside setup() scope
      // 在函数 setup 作用域，函数 render 能访问 setup 的一切，
      return h('div', msg)
    }
  }
}

注意到，即使普通变量也能作为模版被置入 template 中被编译，某些人认为这不合适，不够分离。我觉得还好，还ok