Vue Composition API

2020.5.1 vue3 已经进入 beta 阶段了，有些 api 发生了改变，建议直接看之后的文档

vueconf 尤雨溪的演讲视频及资料

setup

setup是一个显得 options，它是在 vue 组件中使用 Composition API 的入口

• 调用时机

  在创建组件实例时，setup比 props 初始化要早。在生命周期方面，它在beforecreate钩子之后和created钩子之前被调用。

//同样的也支持返回render function

setup 函数可以接收 props 作为第一个参数,并且这个props是响应式的，当传入新的 props 时，props 会更新

这个更新可以被 watch 监听到。和以前一样，子组件是不能直接修改 props 的，如果用户代码试图改变它，它将发出警告

第二个参数提供了一个上下文对象，它包含了在 2 .x API 中公开的属性列表：

const MyComponent = { setup(props, context) { context.attrs context.slots
context.parent context.root context.emit } }

当需要获得对 setup 参数的类型推断的能力，需要使用createComponent

reactive

返回一个响应式的代理对象（proxy）

ref

获取一个内部值并返回一个响应式的可变的 ref 对象。ref 对象有一个指向内部值的属性.value。

在模板中访问它的值不需要refName.value,直接

在响应式对象中访问或者修改它时，他的值会自动改变

const count = ref(0) const state = reactive({ count }) console.log(state.count)
// 0 state.count = 1 console.log(count.value) // 1

当然了 ref 也可以去绑定对应的 dom 元素

isRef

检查一个对象是否是 ref 对象,灰常方便

const unwrapped = isRef(foo) ? foo.value : foo

toRefs

把一个普通的响应式对象转换为 ref 对象，toRefs 会返回一个对象，key 和原来的一样，value 都变成了 ref 对象,

并且此时的 ref 和原来的对象属性绑定了，当修改一个，另一个也会相应的改变

const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) /*
Type of stateAsRefs: { foo: Ref<1>, bar: Ref<2> } */ // The ref and the original
property is "linked" state.foo++ console.log(stateAsRefs.foo) // 2
stateAsRefs.foo.value++ console.log(state.foo) // 3

当你声明的复合函数要返回一个响应式对象时，可以使用toRefs进行转换，让这个对象在不失去响应式的情况下方便的对对象解构、扩展

function useFeatureX() { const state = reactive({ foo: 1, bar: 2 }) // logic
operating on state // convert to refs when returning return toRefs(state) }
export default { setup() { // can destructure without losing reactivity const {
foo, bar } = useFeatureX() return { foo, bar } } }

computed

他接收一个回调函数，这个函数返回一个不可变（只读）的响应式数据，同样的他也可以接收有 get,set 函数的对象，此时他就是可写的了

watch 这里还有一些知识，比如异步，清理副作用，等等之类的东西，这些等正式发布再研究吧

生命周期

import { onMounted, onUpdated, onUnmounted } from '@vue/composition-api' const
MyComponent = { setup() { onMounted(() => { console.log('mounted!') })
onUpdated(() => { console.log('updated!') }) onUnmounted(() => {
console.log('unmounted!') }) } }

和 vue2.6.x 的生命周期的对比

• beforeCreate -> use setup()
  created -> use setup()
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeDestroy -> onBeforeUnmount
  destroyed -> onUnmounted
  errorCaptured -> onErrorCaptured

新增

• onRenderTracked
• onRenderTriggered

provide&inject

v-for

基本用法和以前差不多的，文档现在不全 ，更具体的等正式发布