15 分钟掌握vue-next函数式api(小结)

function inc() {
count.value++;
}

return { count, inc };
}
};

之所以要通过 ref，是因为 js 中的基础类型传值不是引用传值，因此 vue-next 内部会自动将它封装为一个 ref 对象，其值指向原始值。当然，ref 指向引用类型也是没有问题的，其 value 指向引用类型变量的引用。

引用类型

引用类型除了可以使用 ref 来声明，也可以直接使用 reactive，如下：

import { reactive } from "vue";
export default {
 setup() {
  const state = reactive({
    count: 0
  });
  function inc() {
   state.count++;
  }
  return { state, inc };
  // 或者通过 toRefs 方法
  // return { ...toRefs(state), inc };
 }
};

这里使用 toRefs 的原因主要是因为，如果是 reactive 产生的对象，由于我们要只是保存对于该 Proxy 对象的引用，我们无法使用解构来将它 flat，而 toRefs 会将每一个属性在内部包裹为一个 ref 对象。

props

对于 prop 可以通过如下代码声明及使用：

export default {
 props: {
  count: Number
 },
 setup(props) {
  watch(() => {
   console.log(`count is: ` + props.count)
  })
 }
}

这里可以发现其实和 vue2 中声明的方式基本一样，但值得注意的是，在 vue-next 中，props 的类型声明不是必须的，如果你使用 typescript，完全可以改写为如下的版本：

interface PropTypesI {
  count: number
}
export default {
 setup(props: PropTypesI) {
  watch(() => {
   console.log(`count is: ` + props.count)
  })
 }
}

除此之外，还可以直接通过 watch 方法来观察某个 prop 的变动，这是为什么呢？答案非常简单，就是 props 本身在源码中，也是一个被 reactive 包裹后的对象，因此它具有响应性，所以在 watch 方法中的回调函数会自动收集依赖，之后当 count 变动时，会自动调用这些回调逻辑。

context

在 setup 那一小节中，我们知道，setup 在调用时，组件实例还未创建，那意味着我们无法使用 this 访问当前实例，那我想通过 this 在 vue2 中访问一些内置属性，怎么办？比如 attrs 或者 emit。我们可以通过 setup 的第二个参数：

setup(props, context) {
 do anything...
}

这个 context 对象也是一个 Proxy 对象，当我们通过 context.attrs 访问其属性时，本质上代理对象会将访问指向组件的内部实例（即之间文章中提及的 componentInternalInstance）。