1. main.js
- 创建实例不再使用构造函数，而是使用createApp
- 使用插件时不再通过构造函数，而是通过实例
2. 组件
1. this指向不同
- vue2的this指向是组件
- 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’。文章来源：https://www.toymoban.com/news/detail-567020.html
通过这种方式，你可以在 Vue 3 中使用普通的函数来定义组件的声明周期逻辑，而不再需要配置式的声明周期选项。这种新的声明周期函数写法更加直观和灵活，使得组件的声明周期管理更加简洁和易于理解。文章来源地址https://www.toymoban.com/news/detail-567020.html
到了这里，关于vue3- 02vue3的变化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
