vue3新特性及api介绍（二）

接上文的介绍。vue3新特性地址戳我  vue3api介绍地址戳我

二、vue3新特性

7.provide/inject

用法和之前类似，不过只能在setup函数内使用

    const proKey = Symbol("provide");
    provide(proKey, "aaa");
    inject(proKey, "123");

inject的第二个参数是默认值

我们可以传入一个ref值，这样的话注入的属性也是响应式的属性，可以被追踪（之前2.x版本的provide/inject是非响应式的）

    const proKey = Symbol("provide");
    provide(proKey, ref("aaa"));
    inject(proKey, ref("123"));

需要注意的是,provide的key默认是symbol类型，如果要传入其他类型，需要通过泛型显示指定

    const proKey = 1;
    provide<number>(proKey, ref("aaa"));
    inject<number>(proKey, ref("123"));

8.ref

在vue3中，我们声明一个ref的同名响应式属性并在setup中返回，这样我们就能这个响应式属性就是实际的dom或者组件.注意要取值时是myRef.value。

因为ref属性是响应式的，所以我们可以通过函数组合传递到其他函数

    const myRef = ref(null);
    return {
      myRef,
    };
    <span ref="myRef">aaa</span>

 

setup函数可以返回render方法或者用jsx形式来写,ref使用方式如下：

  setup() {
    const root = ref(null)

    return () =>
      h('div', {
        ref: root
      })

    // with JSX
    return () => <div ref={root} />
  }

如果是在v-for中使用ref，那么ref是作为函数形式被动态赋值给我们初始化的一个响应式数组里

  <div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
    {{ item }}
  </div>


    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // make sure to reset the refs before each update
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }

9。toRef

如果一个reactive属性的某个属性值要传递给其他组合函数，最好将这个属性转为ref属性

    const state = reactive({
      value: 0
    });
    const stateValue = toRef(state, "value");

转换之后的stateValue与原来的state.value还保持同步

10.unRef

如果参数是ref属性，则返回它的值，否则返回本身

const StateValue=ref('111')
const value=unRef(stateValue)

11.toRefs

把一个reactive对象一次性转换成ref属性，

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

转换前后的两个属性保持同步

12.props

vue3的props会作为setup的默认参数传递进来

  setup(props) {
    
  }

13.isRef/isProxy/isReactive.isReadonly

是否是ref创建的属性/是否是reactive或者readonly创建的属性/是否是reactive创建的属性/是否是readonly创建的属性

后续待补充