vue3- 02vue3的变化

1. main.js

1. 创建实例不再使用构造函数，而是使用createApp
2. 使用插件时不再通过构造函数，而是通过实例
   

2. 组件

1. this指向不同

1. vue2的this指向是组件
2. vue3的this指向是proxy（代理，代理的是组件实例）

<template>
  <p>
    <button @click="handleIncrease">count: {{ count }}</button>
  </p>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods:{
    handleIncrease(){
      console.log(this);
      this.count++;
    }
  }
}
</script>

<style></style>

vue3：

vue2:

总结：组件实例代理：

2. composition api（组合api）

1. setup(): 设置组件的初始状态和行为

## 在学习组合api之前，先了解以下 setup。
 Vue 3 的 setup 函数用于设置组件的初始状态和行为。它是组件中的一个特殊函数，在组件实例创建之前执行，并且在其他选项（如 data、computed、methods 等）之前运行。

setup 函数接收两个参数：props 和 context。props 参数用于接收组件的属性，而 context 参数提供了一些与组件实例相关的上下文信息，如 attrs、slots、emit 等。

2. ref(): 用于创建响应式数据的函数

## 在学习组合api之前，先了解以下ref。
   ref 是一个用于创建响应式数据的函数。它的作用是将一个普通的 JavaScript 值转换为一个响应式对象。
## 下面的图是vue3对ref的处理（通过代理）。也是因为下方提到的 在setup中，count是一个对象，实际代理中count是一个count.value  的原因。

3. 配置式api和组合式api

vue2：配置式api。也叫option api（如data、methods、computed、prop）：比较零散，会分布在不同的配置中。
vue3：组合api。代码比较集中，可以把整个相关的数据、方法抽离到一个函数或组件，再return，如第二个例子。

<template>
  <p>
    <button @click="countRef++">count: {{ countRef }}</button>
    <button @click="handleIncrease">count: {{ countRef }}</button>
  </p>
</template>

<script>
// ref用于创建一个响应式数据
import { ref } from "vue";


export default {
  setup() {
    // 1. console.log('在所有的声明周期钩子函数之前调用')
    //2.  console.log(this); setup函数里面的this为undefined
    let countRef = ref(0); //会返回一个响应式的数字

    // 3. 在setup中，count是时一个对象
    //    实际代理中count是一个count.value
    const handleIncrease = () => {
      countRef.value++;
    }
    // 新增

    // 修改

    // 删除

    // 4. 需要将使用到的东西return给模板和其它的组件
    return {
      countRef,
      handleIncrease,
    }

  }
}
</script>

<style></style>

第二个例子：

<template>
    <h1>count:{{ countRef }}</h1>
    <p>
        <button @click="handleDecrease">count: {{ countRef }}</button>
        <button @click="handleIncrease">count: {{ countRef }}</button>
    </p>
</template>
  
<script>
// ref用于创建一个响应式数据
import { ref } from "vue";
// 5. 使用组合式api代码不会零散、杂乱
function useCount() {
    let countRef = ref(0);
    const handleIncrease = () => {
        countRef.value++;
    };
    const handleDecrease = () => {
        countRef.value--;
    }
    return {
        countRef,
        handleIncrease,
        handleDecrease
    }
}

export default {
    setup() {
        return {
            ...useCount(), // 解构赋值
        }

    }
}
</script>
  
<style></style>

3. watchEffect

watchEffect 函数：用于创建一个响应式的副作用函数。它的作用是在其依赖的响应式数据发生变化时自动运行副作用函数。

假设你正在开发一个待办事项应用，其中有一个任务计数器用于显示未完成的任务数量。你可以使用 watchEffect 来实时更新任务计数器的值，以便在任务列表发生变化时自动更新计数。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const todos = ref([
      { id: 1, title: '学习Vue', completed: false },
      { id: 2, title: '编写文档', completed: true },
      { id: 3, title: '提交代码', completed: false },
    ]);

    const unfinishedCount = ref(0);

    watchEffect(() => {
      unfinishedCount.value = todos.value.filter(todo => !todo.completed).length;
    });

    return {
      todos,
      unfinishedCount
    };
  }
};

总结：
在上面的代码中，我们首先定义了一个 todos 数组，其中包含了待办事项的列表。然后，我们创建了一个 unfinishedCount 变量，并初始化为 0，用于存储未完成的任务数量。

接下来，我们使用 watchEffect 函数创建了一个响应式的副作用函数。在这个副作用函数中，我们监听 todos 数组的变化。每当 todos 数组发生变化时，副作用函数会被触发，并计算未完成的任务数量，并将结果赋值给 unfinishedCount。

通过这样的设置，每当 todos 数组中的任务状态发生变化时，unfinishedCount 的值会自动更新，并保持与未完成的任务数量同步。

这是 watchEffect 的一个作用：监听响应式数据的变化，并在变化发生时执行相应的副作用逻辑。

4. 声明周期为普通函数

在 Vue 3 中，声明周期钩子函数已经从配置式的选项（如 beforeCreate、mounted 等）转变为普通的函数。这意味着你可以在组件中直接定义这些函数，而无需将它们作为选项进行配置。

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

export default {
  setup() {
    // mounted 钩子函数
    onMounted(() => {
      console.log('Component mounted');
    });

    // updated 钩子函数
    onUpdated(() => {
      console.log('Component updated');
    });

    // unmounted 钩子函数
    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {};
  },
};

总结：
在上面的代码中，我们使用 onMounted、onUpdated 和 onUnmounted 函数来定义组件的生命周期钩子函数。这些函数在组件的不同生命周期阶段被调用，并且可以直接在 setup 函数中定义。

当组件被挂载到 DOM 上时，onMounted 中的回调函数会被执行，输出 ‘Component mounted’。当组件发生更新时，onUpdated 中的回调函数会被执行，输出 ‘Component updated’。当组件从 DOM 上卸载时，onUnmounted 中的回调函数会被执行，输出 ‘Component unmounted’。

通过这种方式，你可以在 Vue 3 中使用普通的函数来定义组件的声明周期逻辑，而不再需要配置式的声明周期选项。这种新的声明周期函数写法更加直观和灵活，使得组件的声明周期管理更加简洁和易于理解。