vue 3.0中一些基础的写法。

setup()用于定义变量和方法的

• setup()

1. setup在beforeCreate,create之前创建，因此没有this
2. 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
3. setup有两个参数，第一个是props，用于接收传递的属性对象，可以通过watchEffect监听，第二   个参数是context,其包含attrs,slots,emit属性

• props: 用来接收 props 数据, props 是响应式的，当传入新的 props 时，它将被更新。
• 返回值: return {}, 返回响应式数据, 模版中需要使用的函数

ref()，reactive() 的作用

- ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型返回一个基于该值的响应式Ref对象

<template>
  <h1>{{ name }}</h1>
</template>

<script>
//定义的vue的方法
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("daxiong");
    //返回值
    return {
      name,
    };
  },
};
</script>

reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了
所以需要用toRefs函数转化为响应式数据对象

<template>
  <div>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <button @click="sayName">测试</button>
  </div>
</template>

<script >
import { computed, reactive, toRefs } from "vue";

export default {
  setup() {
    //定义的复杂类型
    const data = reactive({
      name: "daxiong",
      birthYear: 2000,
      now: 2020,
      sayName: () => {
        console.log(data.name);

        data.name = "I am " + data.name;
        console.log(data.name);
      },
      age: computed(() => {
        return data.now - data.birthYear;
      }),
    });
    //转换
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

toRefs() 将一个响应式对象，转换为普通对象，并且将其中的属性转换为 Ref 对象

用法如下

<template>
  <div>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <button @click="sayName">测试</button>
  </div>
</template>

<script >
import { computed, reactive, toRefs } from "vue";

export default {
  setup() {
    //定义的复杂类型
    const data = reactive({
      name: "daxiong",
      birthYear: 2000,
      now: 2020,
      sayName: () => {
        console.log(data.name);

        data.name = "I am " + data.name;
        console.log(data.name);
      },
      age: computed(() => {
        return data.now - data.birthYear;
      }),
    });
    //转换
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

computed()用来定义计算属性的

<template>
  <div>
    <div>计算属性</div>
    <hr />
    <button @click="age = 25">点击</button>
    <button @click="nextAge = 28">点击修改</button>
    <div>今年：{{ age }}岁了</div>
    <div>明年：{{ nextAge }}岁了</div>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  name: "App",
  setup() {
    // 计算属性：简化模板
    // 应用场景：基于已有的数据，计算一种数据
    const age = ref(18);

    // // 计算属性基本使用
    // const nextAge = computed(() => {
    //   // 回调函数必须return，结果就是计算的结果
    //   // 如果计算属性依赖的数据发生变化，那么会重新计算
    //   return age.value + 1
    // })

    // 修改计算属性的值
    const nextAge = computed({
      get() {
        // 如果读取计算属性的值，默认调用get方法
        return age.value + 1;
      },
      set(v) {
        // v是计算属性下传递的实参
        // 如果要想修改计算属性的值，默认调用set方法
        age.value = v - 1;
      },
    });

    return { age, nextAge };
  },
};
</script>

<style lang="less">
</style>