vue3安装

全局安装脚手架

npm i @vue/cli -g

检查版本

vue -V

vue create 项目名称

vue3的特点

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

使用vscode编写vue3文件

插件推荐
vetur
Vue Volar extension Pack

vue3和vue2的不同点

启动方式不同

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

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

全局方法挂载

v2
 Vue.prototype.$say = function(msg){
    
    alert(msg)}
v3
 app.config.globalProperties.$say = function(msg){
    
    alert(msg)}

根节点
v2 只能有一个根节点
v3 可以有多个根节点

生命周期，卸载
v3
组件将要卸载
beforeUnmount()
组件已经卸载
unmounted
v2
beforeDestroy()
destroyed()

常用Composition API（组合式API）

setup函数

理解：Vue3.0中一个新的额配置项，值为一个函数
setup是所有Composition API(组合api) “表演的舞台”
组件中所用到的：数据、方法等等，均要配置在setup中
setup函数的两种返回值:
若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
若返回一个渲染函数：则可以自定义渲染内容。
注意点：

尽量不要与Vue2.x配置混用
Vue2.x配置（data ,methos, computed…）中访问到setup中的属性，方法
但在setup中不能访问到Vue2.x配置（data.methos,compued…）
如果有重名，setup优先
setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性

扫描二维码关注公众号，回复： 14778408 查看本文章

关于单文件组件<script setup></script

每个 *.vue 文件最多可以包含一个 <script setup>。(不包括一般的 <script>)
这个脚本块将被预处理为组件的 setup() 函数，这意味着它将为每一个组件实例都执行。<script setup> 中的顶层绑定都将自动暴露给模板。
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 TypeScript 声明 props 和自定义事件。这个我下面是有说明的
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

setup api

ref
创建值类型响应式数据方法
在seup内部需要 .value 来访问设置值
reactive
创建引用类型响应式数据方法

defineProps
定义组传的传参props

defineEmits
定义组件发送的事件

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

watch
监听一个数据的变化

watchEffect
监听多个数据

生命周期

setup中的生命周期，没有beforeCreate与created
setup的生命周期需要加on前缀
onMounted
挂载完毕
onBeforeMount
挂载前
onUpdated
更新完毕
onbeforeUpdate
更新前
onUnmounted
卸载完毕
onBeforeUnmount
卸载前

ref 函数

作用：定义一个响应式的数据
语法： const xxx = ref(initValue)

创建一个包含响应式数据引用对象（reference对象）
JS中操作数据：xxx.value
模板中读取数据：不需要.value，直接：
{ {xxx}}

备注：
接收的数据可以是：基本类型、也可以是对象类型
基本类型的数据：响应式依然靠的是Object.defineProperty()的get和set完成的
对象类型的数据：内部”求助“了Vue3.0中的一个新的函数——reactive函数

reactive 函数

作用：定义一个对象类型的响应式数据（基本类型别用他，用ref函数）
语法：const 代理对象 = reactive(被代理对象)接收一个对象（或数组）,返回一个代理对象（proxy对象）
reactive定义的响应式数据是”深层次的“
内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

Vue3.0中响应式原理

vue2的响应式原理
对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

vue3的响应式原理
通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等等。
通过Reflect（反射）：对被代理对象的属性进行操作
MDN文档中描述的Proxy与Reflect：可以参考对应的文档

reactive对比ref

从定义数据角度对比：

ref用来定义：基本数据类型
reactive用来定义：对象（或数组）类型数据
备注： ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

从原理角度对比：

ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）
reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

从使用角度对比：

ref定义数据：操作数据需要 .value ,读取数据时模板中直接读取不需要 .value
reactive 定义的数据：操作数据和读取数据均不需要 .value

setup的两个注意点

setup执行的时机
在beforeCreate之前执行一次，this是undefined
setup的参数
props:值为对象，包含：组件外部传递过来，且组件内部声明接收了属性
context：上下文对象
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于 this. $a tt rss l o t s : 收到插槽的内容，相当于$ slots
emit: 分发自定义事件的函数，相当于this.$emit

计算属性与监视

需要引入computed

watch函数
和computed一样，需要引入api
有两个小坑：

1.监视reactive定义的响应式数据的时候：oldValue无法获取到正确的值，强制开启了深度监视（deep配置无效）
2.监视reactive定义的响应式数据中某个属性的时候：deep配置有效

watchEffect函数

watch是：既要指明监视的属性，也要指明监视的回调
watchEffect是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
watchEffect有点像computed:
但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

自定义hook函数

什么是hook函数：本质是一个函数，把setup函数中使用的Composition API进行了封装
类似于vue2.x中的 mixin
自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂
使用hook实现鼠标打点”：
创建文件夹和usePoint.js文件

toRef

作用：创建一个ref对象，其value值指向另一个对象中的某个属性值
语法： const name = toRef(person, ‘name’)
应用：要将响应式对象中的某个属性单独提供给外部使用
扩展： toRefs与toRef功能一致，但是可以批量创建多个ref对象，语法： toRefs(person)

Vue3的简单介绍