介绍

  setup是Composition API(组合API)的入口函数

  可以理解为是生命周期,原来的created,beforeCreate被setup替换,但可以继续同时使用;

  setup函数早于created,beforeCreate执行,故在setup中无法使用data和methods,但可以在里面创建data和methods

  setup中定义的变量,方法,计算属性等如果想在模板中使用,必须通过return返回出去,不然无法使用

  setup和JavaScript一样是同步的,由上而下执行

  setop中无法使用this,会返回undefined

声明变量的ref和reactive

ref

ref 函数传入一个值作为参数,返回基于该参数的响应式ref对象

ref 接受参数，并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值

将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number或 String等基本类型是通过值传递的，而不是通过引用传递的,在任何值周围都有一个封装对象，这样我们就可以在整个应用中安全地传递它，而不必担心在某个地方失去它的响应性。

用法:

<script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
    const event = () => { //修改事件
      count.value++;
    };
    return { count, event };
  }
};
</script>

reactive

用法:

<script>
import { reactive } from "vue";
export default {
  setup() {
    const count = reactive({
    	a:0
    }); //声明
    const event = () => { //修改事件
      count.a++;
    };
    return { count, event };
  }
};
</script>

区别

• ref主要用于基本类型的响应,比如String Number boolean,想要修改需要使用.value先获取value值进行修改
• reactive主要用于声明引用类型,修改时对应修改即可
• 但是,在模板区域中使用的时候,ref因为vue3的封装,直接使用就行,不用加.value,但在setup函数中使用的时候必须加
• 注意!使用这两个的时候一定要先引入,再return出去

setup中的方法(事件)

在setup声明函数跟js一样,只要最后return就行

<script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
    const event = () => {
      count.value++;
    };
    function name() {
      console.log("log");
    }
    return { count, event, name };
  },
};
</script>

在setup中声明计算属性

需要导入computed,最后再return出去

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const count = ref(0); //声明
    const computed = computed(() => {
      return count.value * 2;
    });
    return { count, computed };
  },
};
</script>

父子组件传值

基本的使用方法和2.0一样,接受依旧是在props中,因为setup中没有this,所以在setup中的用法不一样
setup函数有两个参数:props和context,context是个函数,有attrs slots emit
用法:
子组件:

<template>
  <div @click="onn">{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg:String
  },
  setup(props, { emit }) {
    const onn = () => {
      emit("hello", props);
    };
    return { props, onn };
  },
};
</script>

父组件:

<template>
  <div class="about">
      <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '../components/HelloWorld.vue'
export default {
  components:{
    HelloWorld
  },
};
</script>