一.vue3特点

1. 新增组合式api
2. 更加接近原生js
3. 按需加载

二.与vue2的区别

1.启动方式不同

vue2

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

vue3

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

2.全局挂载方法不同

vue2

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

vue3

const app = createApp(App);
//定义vue3 的全局方法，config 配置，global 全局 Properties属性
app.config.globalProperties.$say = function (msg) {
alert(msg);
};

3.根节点不同

• vue3 可以有多个根节点
• vue2 只能有一个根节点

4.生命周期不同

• vue3

  • beforeUnmount() 组件将要卸载

  • unmounted 组件已经卸载

• vue2

  • beforeDestroy()
  • destroyed()

三. vue3新特性

setup函数的两种返回值:
若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
若返回一个渲染函数：则可以自定义渲染内容。

1. ref

• 创建值类型响应式数据方法 在seup内部需要 .value 来访问设置值 vue中新的配置项 ref(数值)

2. reactive

• 创建引用类型响应式数据方法

3. defineProps

• 类似于props但需要导入
• 定义 组传的传参props

4. defineEmits

• 定义组件发送的事件

5. defineExpost

• 定义哪些方法可以被引用

6. watch

• 监听一个数据的变化

7. watchEffect

• 监听多个数据