看项目的初步收获

？.：可选链

let a;
let b = a?.name;

只有当a存在,同时a具有name属性的时候,才会把值赋给b,否则就会将undefined赋值给b.重要的是,不管a存在与否,这么做都不会报错

setup中有onMounted，先执行setup后执行onMounted

javascript 赋值语句 a=b||c 是什么意思？

如果b的值大于0或为true，那么就把b的值赋给a，否在就把c的值赋给a

watchEffect的用法

是vue3的新特性。与watch不同的是：

• 第一点：watchEffect 不需要指定监听属性，会自动收集依赖，只用我们回调中引用到了响应式的属性，那么当这些属性变更时，这个回调都会执行，而watch只能监听指定的属性而做出监听（vue3开始可以同时指定多个）
• 第三点：watchEffect 如果存在，在组件初始化时就会被执行一次，用于收集依赖（与computed同理），而收集到的依赖发生变化，这个回调才会再次执行，而watch不需要，因为它一开始就指定了依赖。

// Vue3
import {
    ref, watchEffect } from "vue";

export default {
   
  setup() {
   
    const count = ref(0);
    const effect = () => console.log(count.value);
    watchEffect(effect);

    setTimeout(() => count.value++, 1000);

    return {
    count };
  },
};

//控制台输出0 1

0：watchEffect 在组件初始化时就会被执行一次。
1：watchEffect 在依赖发生改变时，回调就会被执行。
注意：在setup中，只有函数被直接执行，回调函数只有调用时才会被执行

 - watchEffect进阶
 	-停止监听：watchEffect会返回一个用于停止这个监听的函数，用法如下：

const stop = watchEffect(() => {
   
//......
})	 
stop();

如果watchEffect是在setup或者生命周期里面注册的话，在组件取消挂载的时候就会自动停止掉

vue内置组件componet

componet组件原理分析，关键词如下：
- 虚拟DOM
- render函数的使用
例子：

先随意的写三个组件，A，B，C。组件内容就是aaaa，bbbb，cccc，方便我们辨认当然渲染的是哪个组件。

<template>
  <div>
    <div>
      <button @click="changeComp('A')">显示A</button>
      <button @click="changeComp('B')">显示B</button>
      <button @click="changeComp('C')">显示C</button>
    </div>
    <component :is="compList"></component>
    <my-component :is="compList"></my-component>
  </div>
</template>

<script>
import Vue from "vue";
import A from "../components/A.vue";
import B from "../components/B.vue";
import C from "../components/C.vue";

Vue.component("myComponent", {
   
  props: ["is"],
  render(h) {
   
    return h(this.is);
  },
});
export default {
   
  components: