vue3笔记-相对于vue2

单体组件一般内容

1、<template> 标签结构，放置html标签内容

2、vu3用<script lang='ts'>写脚本业务 vue可以不用 lang='ts'

3、<style>标签写样式

import{导入需要使用的api和函数} from 'vue'

export default{ //默认暴露单个vue文件，输出整个文件代码

data(){

return{

name:"aaa",

}

}

,setup()

{

return {

  对象1:对象1,

变量1:变量1

}

}

}

userRoute：获取当前路由对象。

userRouter：获取路由实例，可以进行路由跳转。

v-model的变化：

vue3 使用特定的 modelValue ，避免 value 的占用，修改值时通过 update:modelValue 实现数据双向绑定。在 vue3 一个组件可以使用多个 v-model ，统一了 vue2 的 v-model 和 .sync 修饰符。

如回调函数修改mode属性值 emit('update:modelValue',value)，以前vue2是 emit一个input。

可以自定义一个modelValue的名字，一个组件可以绑定多个v-model。

.sync修饰符已移除，由v-model代替。

v-if比v-for优先解析，这个跟vue2是相反的。

全新的全局api

createApp()，defineProperty()，defineAsyncComponent()，nextTick()。

将原来的全局api转移到应用对象

app.component()，app.config()，app.directive()，app.mount()，app.unmount()，app.use()。

reactive：深度劫持（深监视）

shallowReactive：浅度劫持（浅监视）

ref:深度劫持（深监视），做了reactive的处理

shallowRef：不做监视 

readonly:只读属性的数据，深度只读

const state2 = readonly(state)

shallowReadonly:只读的数据，浅只读的 

directive：指令

reactive：提供响应式数据的函数，reactive参数必须是对象(json/arr)。

toRaw，将响应式对象（由 reactive定义的响应式）转换为普通对象。

markRaw，标记一个对象，使其不能成为一个响应式对象。

使用场景：

有些值不应被设置为响应式的，例如复杂的第三方类库等。

当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

toRef：为源响应式对象上的某个属性创建一个 ref(引用)对象, 二者内部操作的是同一个数据值, 更新时二者是同步的。

区别ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响

应用: 当要将 某个prop 的 ref 传递给复合函数时，toRef 很有用

toRefs：当要拆解一个对象的多个属性的时候，可以调用toRefs

customRef：用于自定义一个ref，可以显式的控制依赖追踪和触发响应

接受一个工厂函数，两个参数分别是用于追踪的track与用于触发响应的trigger，并返回一个带有get和set属性的对象。

vue3中 provide 和 inject 用法:

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。

判断是否为isRef，isReactive，isReadonly等对象

obje._is_ref，obj._is_reactive，obj._is_readonly

是否是reactive，readonly产生的代理对象。

isReactive(obj)，isReadonly(obj)

Fragment(片段)

组件的模板结构中出现多个标签时，可以不用根标签（div之类的容器标签？）。这是因为vue3会自动将多个标签用fragment包裹

Teleport(瞬移)

teleport翻译过来的意思是远程传送。

teleport组件是vue3中的一个内置组件，实现的就是将一个元素传送给指定的DOM节点下。比如<teleport to="body"> 将瞬移组件内的内容传送到body

Suspense(不确定的)

是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

此组件用来等待它内部的异步组件时渲染一些额外内容，让应用有更好的用户体验

在setup函数中返回一个promise，就是一个异步组件。

setup函数写成async函数，也是一个异步组件。