自学Vue3 day1

一、Vue3的优势

Vue 3相较于Vue 2在多个方面进行了改进和增强，以下是Vue 3的一些主要优势和两者的对比：

1. 性能提升：Vue 3在性能方面进行了优化，包括虚拟DOM的改进、响应式系统的重写等，使得其性能在某些情况下是Vue 2的1.2至2倍139。

2. 响应式系统：Vue 3使用Proxy代替了Vue 2中的Object.defineProperty，提供了更高效的数据响应式机制，并且能够更直接地监听对象和数组的变化39。

3. Composition API：Vue 3引入了组合式API，提供了一种新的编写组件逻辑的方式，它使得逻辑更加模块化，易于复用和维护921。

4. 更好的TypeScript支持：Vue 3的源码使用TypeScript重写，提供了更好的类型推断和类型检查支持329。

5. Tree-shaking优化：Vue 3通过按需编译和Tree-shaking技术减小了打包体积，使得最终的bundle更小，加载更快139。

6. 新组件和特性：Vue 3引入了Fragment、Teleport和Suspense等新组件，提供了更多的灵活性和更强的表现力139。

7. 编译优化：Vue 3对编译过程进行了优化，包括静态提升、事件侦听器缓存等，提高了编译效率和渲染速度39。

8. SSR优化：Vue 3对服务器端渲染(SSR)进行了优化，提升了渲染性能9。

9. 生命周期钩子的变化：Vue 3合并了一些生命周期钩子，并且引入了新的钩子，提供了更清晰的生命周期管理29。

10. API调整：Vue 3对全局API和内部实例API进行了调整，移除了一些不常用的API，同时引入了新的API，如createRenderer9。

11. Diff算法优化：Vue 3对Diff算法进行了优化，提高了虚拟DOM的更新效率9。

12. 构建和打包改进：Vue 3改进了编译和Tree-shaking，优化了构建速度和打包体积9。

Vue 3的这些改进和特性使其成为一个更加强大、灵活且高效的前端框架选择，特别适用于构建大型和复杂的单页应用。开发者可以根据项目需求和团队熟悉度来决定是否升级到Vue 3。

1.初始化 创建项目（变化）

二、组合式Api

1.setup语法糖

执行时机比create早，

2.reactive和ref(推荐)

底层还是对象

3.computed计算属性

在Vue 3中，计算属性通常指的是响应式系统中的computed属性，它们是只读的，并且具有缓存机制。然而，如果你需要一个既具有计算逻辑，又能被外部修改的属性，可以使用ref或reactive来创建一个具有getter和setter的响应式属性。

1. 创建计算属性

我们将使用computed来创建一个计算属性discountedPrice，它根据商品的originalPrice（原价）和discountRate（折扣率）动态计算价格。

2. 定义getter和setter

discountedPrice将具有一个getter来计算折扣价，以及一个setter来在更改折扣率时更新原价。

示例代码

import { computed, ref } from 'vue';

export default {
  setup() {
    // 创建响应式引用来存储原价和折扣率
    const originalPrice = ref(100);
    const discountRate = ref(0.2);

    // 创建一个计算属性，它具有getter和setter
    const discountedPrice = computed({
      // getter：计算折扣价
      get: () => originalPrice.value * (1 - discountRate.value),
      // setter：当折扣价改变时，更新折扣率
      set: (newValue) => {
        discountRate.value = 1 - (newValue / originalPrice.value);
      }
    });

    // 返回到模板中使用的响应式引用
    return {
      originalPrice,
      discountRate,
      discountedPrice
    };
  }
};

3.使用计算属性的模板

<template>
  <div class="product">
    <h2>Product Name</h2>
    <!-- 显示原价 -->
    <p>Original Price: {{ originalPrice }}</p>
    <!-- 显示折扣价 -->
    <p>Discounted Price: {{ discountedPrice }}</p>
    <!-- 输入折扣率 -->
    <input type="range" min="0" max="1" step="0.1" v-model="discountRate" />
    <!-- 通过setter更新折扣率 -->
  </div>
</template>

在这个例子中，我们使用了Vue的v-model指令来创建一个双向绑定，允许用户通过滑动条来设置折扣率。由于v-model在内部使用了getter和setter，所以当用户改变滑动条的值时，discountRate的值会更新，这会触发discountedPrice的setter，进而重新计算折扣价。

请注意，由于discountedPrice是通过计算得出的，所以它在模板中是只读的。如果你尝试直接修改discountedPrice的值，将不会影响originalPrice或discountRate。

4.wacth监听

在Vue 3中，watch是一个函数，它允许你观察并响应Vue响应式系统中的任意数据的变化。watch是Vue 3中Composition API的一部分，它可以用来观察ref、reactive或是其他由watch包装的响应式引用的变化。

以下是watch的基本用法：

1.基本语法

import { watch, ref } from 'vue';

const data = ref(0);

watch(data, (newValue, oldValue) => {
  console.log(`Data changed to ${newValue} from ${oldValue}`);
});

在这个例子中，我们首先从Vue库中导入了watch和ref。然后，我们创建了一个响应式的引用data，并使用watch来观察它。当data的值改变时，提供的回调函数会被调用，并且会接收到新的值和旧的值作为参数。

2.选项

watch函数也可以接受一个选项对象，这个对象可以包含像immediate（是否立即执行回调函数）和deep（是否深度监听对象内部属性的变化）等选项。

watch(data, (
  newValue,
  oldValue
) => {
  console.log(`Data changed to ${newValue} from ${oldValue}`);
}, {
  immediate: true, // 立即以当前值触发回调
  deep: true      // 深度监听
});

deep深度监听

精确监听

3.停止观察

watch返回一个停止观察的函数，你可以调用这个函数来停止观察响应式引用。

const unwatch = watch(data, (newValue, oldValue) => {
  // 观察逻辑
});

// 停止观察
unwatch();

4.观察多个源

watch也可以用来同时观察多个源。

const source1 = ref(0);
const source2 = ref(0);

watch([source1, source2], (newValues, oldValues) => {
  // newValues 和 oldValues 都是数组，分别包含每个源的新旧值
  console.log(`source1 changed to ${newValues[0]} from ${oldValues[0]}`);
  console.log(`source2 changed to ${newValues[1]} from ${oldValues[1]}`);
});

5.实际应用

watch在Vue 3中非常有用，特别是当你需要在数据变化时执行一些副作用（如API请求、DOM操作等）时。它提供了一种灵活的方式来响应应用状态的变化。

例如，当你需要在用户输入搜索关键词时从API获取数据并更新列表时，你可以这样使用watch：

import { watch, ref } from 'vue';

const searchQuery = ref('');
const searchResults = ref([]);

watch(searchQuery, (newValue) => {
  if (newValue) {
    // 当搜索词不为空时，执行搜索API请求
    fetchSearchResults(newValue).then(results => {
      searchResults.value = results;
    });
  } else {
    // 清空搜索结果
    searchResults.value = [];
  }
});

这个例子中，我们观察了searchQuery的变化，当用户输入搜索词时，我们执行了一个搜索API请求，并将结果更新到searchResults中。如果搜索词为空，则清空搜索结果列表。

三、生命周期钩子

8个钩子有所变化

Vue 3对生命周期钩子进行了一些调整，引入了Composition API，同时保留了Options API的兼容性。以下是Vue 2和Vue 3生命周期钩子的对比：

Vue 2 生命周期钩子：

1. beforeCreate: 实例被创建之后被调用，在这一步，实例已完成对选项的处理，但尚未挂载到DOM上。
2. created: 实例创建完成后被调用，此时实例已完成数据观测。
3. beforeMount: 在挂载开始之前被调用，相关的render函数首次被调用。
4. mounted: 实例被挂载后调用，此时组件已经在DOM中渲染完成。
5. beforeUpdate: 当数据更新时，发生在虚拟DOM重新渲染和打补丁之前。
6. updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁后调用该钩子。
7. beforeDestroy: 实例销毁前调用。
8. destroyed: 实例销毁后调用。

Vue 3 生命周期钩子：

1. setup(): 在Vue 3中，setup() 函数是Composition API的核心，它在组件实例创建之前执行，用于设置响应式状态和执行其他初始化操作。它相当于Vue 2中的beforeCreate和created钩子的结合2310。
2. onBeforeMount: 组件挂载到节点上之前执行的函数，相当于Vue 2中的beforeMount2310。
3. onMounted: 组件挂载完成后执行的函数，相当于Vue 2中的mounted1023。
4. onBeforeUpdate: 组件更新之前执行的函数，相当于Vue 2中的beforeUpdate2310。
5. onUpdated: 组件更新完成之后执行的函数，相当于Vue 2中的updated2310。
6. onBeforeUnmount: 组件卸载之前执行的函数，相当于Vue 2中的beforeDestroy3102。
7. onUnmounted: 组件卸载完成后执行的函数，相当于Vue 2中的destroyed2310。
8. onActivated: 被<keep-alive>缓存的组件激活时执行。
9. onDeactivated: 被<keep-alive>缓存的组件停用时执行。
10. onErrorCaptured: 当捕获一个来自子孙组件的异常时激活钩子函数。

主要变化：

• Vue 3引入了setup()函数，它是Composition API的一部分，用于替代Vue 2中的beforeCreate和created钩子3102。
• Vue 3中的生命周期钩子以函数的形式存在，需要从vue包中导入并在setup()中使用1023。
• Vue 3提供了两个额外的生命周期钩子onActivated和onDeactivated，用于处理<keep-alive>缓存的组件2310。

多项任务不冲突

使用示例：

Vue 2:

export default {
  beforeCreate() {
    // ...
  },
  created() {
    // ...
  },
  // ...
}

Vue 3:

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 相当于 Vue 2 的 mounted
    });
    onUpdated(() => {
      // 相当于 Vue 2 的 updated
    });
    onUnmounted(() => {
      // 相当于 Vue 2 的 destroyed
    });
  }
};