更新 Vue setup 最终定稿了。
https://github.com/vuejs/rfcs/pull/227#issuecomment-870105222

本文尝试用最新的 vue@^3.2.0-beta.7 版本来讨论新时代的 setup和新的 refsugar。

setup

定稿内容，请看下面这个demo：

<script setup>
  import Foo from './foo.vue';
  import { ref } from 'vue';
  const count = ref(0);
  const props = defineProps({foo: String})
  const emits = defineEmits(['e1'])
  const inc = () => { count++ }
</script>

这种写法，消失了 defineComponent，完全变成扁平了。

请注意：

• 需要手动书写 setup 开启
• 引入 *.vue 时候，因为没有defineComponent 了，可以直接注册组件
• 声明了 count 不管你用不用，组件内可用，更符合直觉：作用域
• 一些内置的命令，可以不导入，比如 withDefaults defineProps defineEmits defineExpose 这几个api，可以不导入，直接使用
• 如果lint报错，按照下面的说明来修改
• 其他细节忽略。
• props/emits 不能从外部导入类型。

这样自定义name

<script>
  // 单独命令导入 import {named} from './x.vue'
  export const named = 1;
  export default{
    name:'',
      inheritAttrs: false
  }
</script>
<script setup>
</script>

eslint 配置修改如下，就是添加全局类型，让lint不报错。

var config = {
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
    $ref: 'readonly',
    $computed: 'readonly'
  }
}

ref sugar

别急着反驳，原来使用标签语法糖的提案label sugar已经被放弃了。如果你之前尝试过 ref: a=1 可以考虑迁移了。

现在有新的ref sugar https://github.com/vuejs/rfcs/discussions/369

<script setup>
  let count = $ref(1);
  function inc(){count++}
  // 注意，还是正常使用 computed
  const r = computed(()=> count*2)
</script>

注意：

• 我们启用了 setup
• 我们直接使用了 $ref ，因为它默认内置（宏），不需要显示引入
• 我们后续要修改值，使用let替代 const
• 用起来和普通变量一样
• 编译之后，还是编译成普通的 cosnt count = ref(1)，不要有压力。
• 为了更容易，引入了 $computed，这样让计算属性也可以减少 .value

限制：

• vue3.2+
• 手动开启
• 不适用嵌套函数作用域？？
• 在sfc之外用不了，只能在 setup 里，这可能会导致碎片化。这也是有争议的部分。