composition-api

• setup:对外暴露数据,等同于vue2的data
• ref:生成响应式基本类型数据(字符串.布尔值,数字等)
• reactive:生成引用类型数据(对象,数组等)
• toRefs:结构响应式对象中的属性
• computed:计算属性,是一个方法,和以前用法差不多
• watch:只能监听响应式对象,可以拿到变化前后的值,初始化也会监听一次,可以通过参数lazy改为懒监听
• watchEffect:能监听对象的某个具体属性,初始化不会监听,拿不到变化前后的值,只执行回调的逻辑
• ref(null):传入null就是获取ref,返回的变量名就是ref的key
• defineAsyncComponent:使用异步组件,按需懒加载

  import { defineAsyncComponent } from 'vue'
  components: {
    MyButton: defineAsyncComponent(()=>import('@/components/myButton')),
  },

• provide/inject:跨级传值

// 父组件:
    let name = ref("Suk");
    let job = ref("webEnginner");
    provide("name", name);
    provide("job", job);
// 修改provide值
    const changeProvide = () => {
      name.value = 'Susuk';
      job.value = 'UI';
    }
// 子组件:
    const name = inject("name");
    const job = inject("job");
// provide和inject是从vue中导出的属性

• emit:触发父组件自定义事件

// 子组件:
  emits: {
    customHandler: (str) => {
      if (typeof str === "string") {
        console.log(str);
        return true;
      }
      console.warn("customHandler must be a string!");
      return false;
    },
  },
  setup(props, ctx) {
    ctx.emit("customHandler", "我是参数");
    ctx.emit("customHandler", 123);
    return {
      over,
      name,
      job,
    };
  },
// 父组件:
<button @customHandler="customHandler"></button>