因为 Vue 3 的 setup 并不是一个常规函数，而是含有一个闭包(闭包 = 自由变量 + 函数)的函数。代码如下：

　　export const Fang = defineComponent({

　　props: ...,

　　setup: ()=>{

　　const a = ref(0)

　　const b = ref(0)

　　return () => ( // 此箭头函数记为 fnReturn

　　)

　　}

　　})

　　此处使用 JSX 语法，以方便与 React 做对比。

　　当你用 b.value += 1 触发 re-render 时，并不会重新执行 setup 函数，只会重新执行fnReturn，因此 Vue 根本就不需要找 a 和 b(想找也找不到，原因跟 React 一样，Vue 只知道你拿走了 ref(0) 的返回值)，因为 a 和 b 都是 fnReturn 可以直接读到的自由变量啊!换句话说，a、b、fnReturn 三者组成了闭包，这个闭包会一直维持着 a 和 b 变量，提供给 fnReturn 访问。

　　Vue 3 只需要调用 fnReturn 即可。

　　理论上，你甚至可以把 a = ref(0) 写在 setup 外面!就像这样：

　　const a = ref(0)

　　const b = ref(0)

　　export const Fang = defineComponent({

　　props: ...,

　　setup: ()=>{

　　return () => ( // fnReturn

　　)

　　}

　　})

　　这样写完全没有问题，因为 fnReturn 依然可以访问 a 和 b。

　　所以你也完全可以把 a 放在 if 里，只要 a 能被 fnReturn 访问就行：

　　export const Fang = defineComponent({

　　props: ...,

　　setup: ()=>{

　　let a

　　if(window.name === 'Fang'){

　　a = ref(0)

　　}

　　const b = ref(0)

　　return () => (

　　)

　　}

　　})

　　此时你可能会想，Vue 3 这么方便肯定会有什么缺点吧?总不会完爆 React 吧?

　　其实缺点也有，那就是会让代码里出现很多 .value。还好 SFC 可以帮我们减少 template 里的 .value。

　　你说，Vue 3 如果能做到用 b += 1 来改变 b 的值不就不用写 .value 了?

　　但问题在于 JS 并没有提供这种「监听变量被重新赋值」的能力给开发者，所以 Vue 3 做不到这一点。JS 只提供了「监听对象的属性被重新赋值」的能力，所以 Vue 3 可以监听对象 b 的 value 是否被重新赋值。

上一篇

Vercel网站部署流程

下一篇

Vue3项目打包闭坑指南