vue3【2.vue3的重大变化】

本文主要是介绍vue3【2.vue3的重大变化】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3的重大变化

入口文件main.js

main.js：

//vue3
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App);
app.mount('#app')app.use('插件')

//vue2
const app = new Vue(options);
Vue.use(插件);
app.$mount('#app');

解析:

vue3不提供构造函数vue,是通过具名导入一个createApp，然后将根组件app传入进去，得到一个实例app，app.mount()挂载到相应的部分。
使用插件的区别，vue3直接通过createApp得到的实例app，然后app.use使用插件。vue2是通过Vue构造函数去使用插件，Vue.use(插件)。

组件中的this的指向

vue2中this指向组件实例。
vue3中this指向一个代理（proxy），代理指向组件实例。

composition api

template中可以有多个根节点
vue2中是option API （配置），vue3新出composition api
vue3也支持原来vue2 option api 的编写。
- 配置api导致的问题：一个功能可能分配到不同的配置中，导致维护困难。适合功能少。
- composition api就可以解决这个问题，一个功能一段代码块。适合功能多。

setup函数

例子解析：

<template><h1>count:{{count}}</h1><p><button @click="increase">increase</button><button @click="decrease">decrease</button></p>
</template><script>
import { ref } from "vue";
function useCount() {// 使用ref将变量变成响应式的let count = ref(0);const increase = () => {count.value++;};const decrease = () => {count.value--;};return {count,increase,decrease};
}
export default {setup() {console.log("所有生命周期函数之前调用");// this -> undefined// 在setup中 ref定义的要 使用.value访问，而组件中直接使用，组件中通过代理访问，本质还是.value// 返回的对象会挂载到组件实例上return {...useCount()};}
};
</script>