Vue3学习总结

一：Vue3简介：

1.vue3带来了什么？

(1):性能的提升。

(2):新的特性。

(3):Composition API （组合api）

(4):新的内置组件

(5):更加接近原生js

二：使用Composition Api

1.使用setup：

方法一:

1.setup是vue3中的一个新的配置，值为一个函数

2.组件中的所要用到的数据，方法等，均要配置在setup中

3.在setup内部需要.value来访问设置值

4.在生命周期中：setup中的生命周期，没有beforeCreate与created

5.setup的生命周期需要加on前缀

2.ref函数：

1)：定义一个响应式数据

2)：创建值类型响应式数据方法

3):在setup内部需要.value来访问设置值

三：Vue3与vue2的不同：

1.启动方法不同：

vue3：

v3

import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

vue2：

import Vue from 'vue'
new Vue({
   store,
   router,
  render:h=>h(App)
}).$mount("#app")

2.全局方法挂载不同：

vue3：

app.config.globalProperties.$say = function(msg){alert(msg)}

vue2：

v2
Vue.prototype.$say = function(msg){alert(msg)}

3.根节点不同

vue3:可以有多个根节点。

vue2：只有一个根节点

四：vue3的生命周期：

Vue3中的生命周期

（1）：vue3中可以继续使用vue2中的生命周期钩子，但有两个被更名：

         beforeDestroy改名为beforeUnmount；

         destroyed改名为unmounted；

（2）卸载：

 vue3：

beforeUnmount（） 组件将要卸载。

unmounted：组件已经被卸载

vue2：

beforeDestory（）

 destoyed()