【Vue3】vue3的全面学习（一）

1、vue3和vue2相比有什么优势？

（1）性能更好

（2）体积更小

（3）更好的 ts 支持

（4）更好的代码组织

（5）更好的逻辑抽离

（6）更多新功能

2、vue3的生命周期

javascript 复制代码

//Options API 的生命周期
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  //beforeDestroy和destroyed已经被废弃改成了beforeUnmount和unmounted
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },

javascript 复制代码

//Composition API 的生命周期
//setup 相当于 beforeCreate 和 created
  setup() {
    console.log('setup');
    onBeforeMount(() => {
      console.log('onBeforeMount');
    });
    onMounted(() => {
      console.log('onMounted');
    });
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    });
    onUpdated(() => {
      console.log('onUpdated');
    });
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    });
    onUnmounted(() => {
      console.log('onUnmounted');
    });
  },

3、Composition API 和 Options API 的对比

（1）、Composition API 带来了什么？

更好的代码组织、更好的逻辑复用、更好的类型推导

（2）、Composition API 和 Option API 如何选择？

不建议共用，会引起混乱

小型项目、业务逻辑简单，用Options API

中大型项目、逻辑复杂，用 Composition API

4、如何理解 ref toRef 和 toRefs

（1）ref

生成值类型的响应式数据

可用于模板和reactive

通过 .value 修改值

命名最好以 ***Ref 方式，增加代码可读性

javascript 复制代码

//ref 用于模板、reactive 不需要写 .value，其余情况都需要
    <div>{{ msgRef }}{{ state.age }}</div>
//script
    const msgRef = ref('hello world');
    const state = reactive({
      name: msgRef,
      age: 18,
    });
    setTimeout(() => {
      state.age = 20;
      msgRef.value = 'hello world2';
    }, 1000);
//获取元素节点
<div ref="divRef">123</div>
const divRef = ref(null);

（2）toRef

针对一个响应式对象（reactive 封装）的属性

创建一个 ref，具有响应式

两者保持引用关系

javascript 复制代码

    const personObj = reactive({
      age: 18,
      name: '小美'
    })
//toRef 针对响应式对象的某个属性实现响应式
    const ageRef = toRef(personObj, 'age')
    setTimeout(() => {
      ageRef.value = 20
    }, 1500);

（3）toRefs

将响应式对象（reactive封装）转换为普通对象

对象的每一个属性都是对应的ref

两者保持引用关系

javascript 复制代码

const personObj = reactive({
      age: 18,
      name: '小美',
      state:{
        sex: 'male',
        address: '北京'
      }
    })
//toRefs将响应式的对象，拆成响应式的 ref，并相互作用
const {age, name, state} = toRefs(personObj)

5、进阶，深入理解 ref toRefs toRefs

1、为何需要 ref？

返回值类型，会丢失响应式，如在 setup、computed、合成函数、都有可能返回值类型。Vue如不定义 ref，用户将自造 ref，反而混乱
2、为何需要 .value ？

ref是一个对象（不丢失响应式），value存储值

通过 .value 属性的get 和 set 实现响应式

用于模板、reactive 时，不需要 .value，其他情况都需要
3、为什么需要toRef 和 toRefs ？

初衷：不丢失响应式的情况下，把对象数据分解/扩散

前提：针对的是响应式对象（reactive封装的），而非普通对象

注意：不创造响应式，而是延续响应式