一、创建一个Vue 3项目
使用npm创建一个新的Vue 3项目:
npm create vue@latest
接下来就会出现各种选项,根据需要选择
运行vue3项目
cd <your-project-name>
npm install
npm run dev
访问地址就能看见vue3的log了
二、组合式API (Composition API)
Vue 3引入了组合式API,使得逻辑组织更灵活。以下是一个简单的示例:
// HelloWorld.vue
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
三、生命周期钩子
在组合式API中,生命周期钩子函数通过 onXXX
函数使用。
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
onMounted(() => {
console.log('Component is mounted');
});
onUnmounted(() => {
console.log('Component is unmounted');
});
return { message };
}
};
四、响应式系统
Vue 3对响应式系统进行了改进,使用 reactive
和 ref
可以更方便地管理状态。
1.reactive
reactive
用于创建响应式对象。它将一个普通的JavaScript对象转换为一个响应式对象。当对象中的属性发生变化时,视图将会自动更新。
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
user: {
name: 'Alice',
age: 25
}
});
const increment = () => {
state.count++;
};
return {
state,
increment
};
}
};
在这个示例中,state
是一个响应式对象,当你改变 state.count
的值时,绑定到这个属性的视图部分会自动更新。
2.ref
ref
用于创建一个包含单一值的响应式引用。它可以是基本类型的值(如字符串、数字)或对象。当引用的值发生变化时,视图也会自动更新。
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
在这个示例中,count
是一个包含数值的响应式引用。注意我们通过 count.value
访问和修改它的值。
在Vue 3中,reactive
和 ref
是两种用于创建响应式数据的API。它们在响应式系统中扮演了不同的角色,并且各自有其适用的场景。以下是它们的详细说明和使用示例。
3.区别和选择
-
数据类型和结构:
reactive
适用于处理复杂的对象和嵌套结构。如果你有一个包含多个属性的对象,并且这些属性之间可能有某种逻辑关联,使用reactive
更为自然。ref
适用于处理简单的单一值,尤其是基本类型的值。
-
嵌套和深层响应式:
reactive
自动处理嵌套对象的响应式,不需要额外的操作。例如,如果一个对象的嵌套属性发生变化,Vue会自动跟踪这些变化。ref
对象内的嵌套属性不会自动变成响应式。如果需要处理嵌套对象的响应式,需要显式地将嵌套对象也转换为reactive
或ref
。
-
组合使用:
- 在实际应用中,
reactive
和ref
常常一起使用。可以在一个reactive
对象中使用ref
引用单一值,或者在一个ref
对象中使用reactive
进行深层响应式处理。
- 在实际应用中,
示例:组合使用 reactive
和 ref
import { reactive, ref } from 'vue';
export default {
setup() {
const state = reactive({
count: ref(0),
user: {
name: 'Alice',
age: 25
}
});
const increment = () => {
state.count.value++;
};
return {
state,
increment
};
}
};
在这个示例中,state
是一个响应式对象,其中 count
是一个包含数值的响应式引用。
五、新的组件定义方式
Vue 3 提供了 defineComponent
方法,可以更好地支持类型推断。
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
});
六、Teleport
Vue 3 新增了 Teleport
组件,可以将子组件渲染到指定的DOM节点。
<template>
<div>
<h1>My App</h1>
<teleport to="body">
<div class="modal">
<p>This is a modal</p>
</div>
</teleport>
</div>
</template>
七、Fragments
Vue 3 支持组件返回多个根节点,这在Vue 2中是不能实现的。
<template>
<div>
<p>First element</p>
<p>Second element</p>
</div>
<div>
<p>three element</p>
</div>
</template>
八、单文件组件 (SFC) 的改进
Vue 3 对单文件组件进行了优化,包括 <script setup>
语法糖:
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
九、Vue 3 和 TypeScript
Vue 3 对 TypeScript 的支持更好,可以更方便地编写类型安全的代码。
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'MyComponent',
setup() {
const count = ref<number>(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
});
十、vue2和vue3区别
1. 性能提升:
- 更快的渲染速度: Vue 3 重写了虚拟 DOM,优化了编译和渲染过程,使得渲染速度比 Vue 2 快 1.3 ~ 2 倍。
- 更小的体积: 通过摇树优化(Tree-shaking),Vue 3 的打包体积比 Vue 2 小了 41%。
- 更低的内存占用: Vue 3 的内存使用量比 Vue 2 减少了 54%。
2. Composition API:
- Vue 3 引入了 Composition API,这是一种新的组件逻辑组织方式。它允许开发者更灵活地组合和复用组件逻辑,提高了代码的可读性和可维护性。
- Composition API 可以更好地支持 TypeScript,提供了更强大的类型推断和类型检查。
3. 响应式系统:
- Vue 3 使用 Proxy 代替 Object.defineProperty 来实现响应式系统。Proxy 提供了更强大的功能,可以监听数组的变化和动态添加的属性。
4. 其他变化:
- Fragments (碎片): Vue 3 支持 Fragments,允许组件返回多个根节点,无需额外的包装元素。
- Teleport: Teleport 组件可以将子组件渲染到父组件以外的 DOM 节点中。
- Suspense: Suspense 组件可以等待异步组件加载完成,并在加载过程中显示加载状态。
- 全局 API 的变化: Vue 3 对全局 API 进行了一些修改,例如创建应用实例的方式、全局组件和指令的注册方式等。
- 生命周期钩子的变化: Vue 3 对一些生命周期钩子进行了重命名和调整。
总结:
Vue 3 在性能、灵活性、可维护性等方面都比 Vue 2 有了显著的提升。如果您正在开始一个新项目,强烈建议使用 Vue 3。如果您有现有的 Vue 2 项目,可以考虑逐步迁移到 Vue 3。