前言

官网地址：https://staging-cn.vuejs.org/

vue最新版分为两个版本： Vue3.0（20年9月18日） Vue 3.2 （21年8月10日）

#Vue 3.2 +Vite+volar

Vue3 框架做了大量的性能优化，包括虚拟 DOM，编译模板、代理的新数据监听，体积更小的打包文件等。

新的组合式 API （composition-api），更适合大型项目的构建，去除繁琐的 this 操作；

由于是基于 TypeScript 编写，对 TypeScript 原生支持更好，更强大的智能类型推导功能；

生命周期的一些改变，vue2 中的 beforeCreate 和 created 被一个新增的 setup 生命周期函数代替；

一些常见 API 如 v-model 的变化，支持对一个组件同时进行多个 v-model 的数据绑定。

vscode 的插件 vetur 对vue3 的composition API语法支持度非常弱，所以开发vue3项目需要将vetur禁用 更换另一个插件

开发vue3安装并使用： volar 插件

#1.项目创建

Vite 官网：https://cn.vitejs.dev/

yarn create vite my-vue-app –template vue

#2.SFC 单文件组件

html 部分变化不大

vue2的 template 中只能有一个子节点，vue3的 template 中可以写多个子节点

js 部分内置ts，但是vite创建的项目没有开启 ， .box{ width: 100px; height: 100px; background: v-bind(color);}

#2. setup语法糖

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用； 这样会导致在页面上变量会出现很多次。

vue3.2只需在script标签中添加setup,可以帮助我们解决这个问题。

1.组件只需引入不用注册，属性和方法也不用返回， 也不用写setup函数，也不用写export default ， 甚至是自定义指令也可以在我们的template中自动获得。

#3.data 定义

#3.1 直接定义 无响应式

{{name}}

#3.2 ref 定义基本数据类型 有响应式

{{name}}

修改数据

#3.3 reactvie 定义引用数据类型 有响应式

{{user.name}}

新增属性

#4.methods 方法定义

{{user.age}}

年龄+

#5.computed 计算属性

#6.watch 使用

watch(监听数据源,执行函数,[配置参数]) //配置参数： 立即执行 深度监听{immediate: true, deep: true }

#6.1 监听基本数据类型单一数据源

#6.2 监听引用数据类型单一数据源

#6.3 监听引用数据类型 多数据源[深度监听]

添加随机数 {{ item }}

#7.生命周期

#8.组件使用

• 创建 src/components/Son.vue
• App.vue中导入并使用该组件
• vue3.2 中当我们导入子组件时，setup语法糖会自动去注册该组件，所以注册语句不用写了。

#9.组件通信

#9.1 父传子 defineProps

• 父组件

• 子组件

#9.2 子传父 defineEmits

• 子组件

传递数据

• 父组件