Vue3学习记录

vue3  main.js 写法

 谷歌插件商店下载插件

组合式API

1、setup

- 数据、方法、都可以写在setup中   setup(){}  返回才能使用

2、ref（数据）定义响应式数据

ref 包装渲染一个对象，得对应得渲染值.value 才能得到里面的值真实修改值

创建一个包含响应式数据的引用对象

js操作数据 xxx.value

模板中读取数据，不需要.value 直接<h1>{xxx}</h1>

接收数据可以是基本类型和对象类型

基本类型：响应式依然靠Object.defineProperty()  get set完成

对象类型：内部求助vue3的reactive函数

 3、reactive函数

 作用：只能定义对象类型的相应数据（基本数据类型不需要用）

可以添加属性，响应式。解决vue2的笨拙方式（vue.set(属性，值)）和Object.defineProperty()

 

 

 ​​​​​​

4、toRef和toRefs

作用：创建一个ref对象，将value指向另外一个对象的属性

语法：const name = toRef(person, 'name')

应用：将相应式对象中的某个属性，单独给外部使用，并且不想丢失对象的相应

拓展：refs和ref功能一样，可以多个指定

 

 5、toRow和markRow

6、customeRef

创建自定义的ref，

 7、provide和inject 祖孙间通讯

 

 

fragment：相当于模板组件中不用写<div id="app"></div>了 自动帮你弄好了

teleport：把弹框从底层直接领出来，相当于alert

suspense：组件异步展示，代替异步写法 效果比第一种（单独写异步）好