p19 组合式 API (Composition API)初体验

<template>
  <h1 @click="add">计数count: {{ count }}</h1>
  <h1 @click="increment">计数num: {{ num }}</h1>
</template>

<script>
import { ref } from "vue";
export default {
  data() {
    console.log("data");
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
  },

  setup() {
    console.log("setup");
    const num = ref(10);
    function increment() {
      num.value += 10;
    }
    return {
      num,
      increment,
    };
  },
  beforeCreate() {
    console.log("beforeCreate,初始化数据之前");
  },
  created() {
    console.log("created,数据初始化之后");
  },
  beforeMount() {
    console.log("beforeMount,挂载渲染之前");
  },
  mounted() {
    console.log("mounted,挂载渲染之后");
  },
};
</script>

p20 Vue3合成API详解

<template>
  <h1 @click="add">num: {{ num }}</h1>
  <p @click="change">
    reactive: {{ person.behavior }}-{{ person.name }}-{{ person.reverseName }}
  </p>
  <p>toRefs: {{ behavior }}-{{ name }}-{{ sex }}</p>
</template>

<script>
import { ref, reactive, toRefs, computed, watch, watchEffect } from "vue";
export default {
  setup() {
    const num = ref(0);
    const add = () => {
      num.value += 10;
    };
    const person = reactive({
      name: "zhangsan",
      behavior: "eat",
      sex: "man",
      reverseName: computed(() => {
        return person.name.split("").reverse().join("");
      }),
    });
    const change = () => {
      person.name = "lisi";
    };

    // watchEffect 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
    watchEffect(() => {
      console.log(person.name);
      console.log(
        "自动监听，这里面用到了person.name name变化了 就执行这里面内容"
      );
    });
    // 单个监听
    // watch(num, (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // });
    // 多个监听
    watch([num, person], (newValue, oldValue) => {
      console.log(newValue, oldValue);
    });
    return {
      num,
      add,
      person,
      ...toRefs(person),
      change,
    };
  },
};
</script>

p21 setup中使用生命周期函数

https://cn.vuejs.org/api/composition-api-setup.html

子组件User.vue

<template>
  <p>子接收到父组件的name:{{ name }}</p>
  <p>子接收到父组件的age:{{ age }}</p>
  <p>description {{ description }}</p>
</template>

<script>
import {
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default {
  props: {
    name: String,
    age: Number,
  },
  setup(props, content) {
    console.log(props);
    console.log("content", content);

    const description = computed(() => {
      return props.name + "的年龄是" + props.age;
    });
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    return { description };
  },
};
</script>

父组件App.vue

<template>
  <User :name="name" :age="age"></User>
  <button @click="changeName">点击修改名字</button>
</template>

<script>
import User from "./components/User.vue";
import { reactive, toRefs, toRef } from "vue";

export default {
  setup() {
    const obj = reactive({
      name: "张三",
      age: 22,
      sex: "man",
    });
    const name = toRef(obj, "name");
    const changeName = () => {
      name.value = "李四";
    };
    return {
      ...toRefs(obj),
      changeName,
    };
  },
  components: { User },
};
</script>

p22 Provide 和 inject

provide与inject主要用于从父组件向子组件传递数据。

在2.0我们通常用props接收来自父组件的参数，但是一个要从父子组件传递到孙子组件，这种情况就得从父组件到子组件，再从子组件传到孙子组件一级一级传递下去；引入 provide与inject就不需要一级一级向下传递。而是只需从父组件provide出去，再在需要用的组件里面inject即可。

父组件App.vue

<template>
  <Student></Student>
</template>

<script>
import { reactive, provide } from "vue";
import Student from "./components/Student.vue";
export default {
  setup() {
    const student = reactive({
      name: "zhangsan",
      className: "三年二班",
    });
    provide("student", student);
    return { student };
  },
  components: { Student },
};
</script>

子组件Student.vue

<template>
  <h1>学生姓名：{{ name }}</h1>
  <h1>所在班级：{{ className }}</h1>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    const student = inject("student");
    return { ...student };
  },
};
</script>