首先为什么要使用composition API?

• vue的官方文档写的很清楚,结合我的使用经验来看,旧的options写的代码经常非常长,同时代码逻辑分离,我经常在修改功能时在vue文件中上下翻滚寻找,体验极差.
• 使用composition API能使我们的代码简洁,易于维护,同时扩展性更强
• 官方composition API介绍

setup函数

setup函数的参数

第一个参数:props

export default {
name:'Home',
  props:{
    message:{
      type:String
    }
  },
  setup(props){
    console.log(props.message);
  }
}

第二个参数:context (上下文)

• 他包含三个属性
• attrs 所有非props的attr,比如class,id啥的
• slots 可以拿到插槽
• emit 相当于原本的this.$emit

setup(props,context){
    console.log(context.attrs.id,context.attrs.class);
    console.log(context.slots);
    console.log(context.emit);
  }

setup函数的返回值

setup是个函数,那么他return的是什么呢?

• setup的返回值可以在模板template中被使用
• setup的返回值可以替代data

setup(){
    return{
      count:1
    }

等于

data(){
    return{
       count:1
    }
  }

但是setup中定义并返回出的的常量不是响应的! ! !

那么如何把setup中的变量变成响应式的呢

• 使用官方ref函数包裹数据,然后使用返回的对象,这样引用这个对象的时候,对象变化,不管在哪里使用这个对象,引用地址不变,就会发生变化.(yyx真聪明)
• 下面的例子里,count是ref(0)的返回对象,count.value是我需要的值

setup() {
    let count = ref(0);
    const add = () => {
      count.value++;
      console.log(count);
    };
    return {
      count,
      add,
    };
  },

setup中是没有this的

 setup(){
    console.log(this);
  }