vue3学习记录

第二章 常用的api

一 setup 存放数据data和方法method

setup不能是一个async函数 因为返回值不再是return对象而是promise 模板看不到return对象中的属性 但是可以通过异步组件和suspense的配合返回一个promise对象

二 ref函数（实现数据响应）

模板不使用value，在修改数据值采用value进行页面响应

三 reactive函数 对proxy实现  使用数据为对象 数组类型 深层次

四 响应式原理

vue2进行属性添加删除数组修改检测不到

需要通过 this.$set(this.person,"sex","woman")或vue.set(this.person,"sex","woman")进行属性的添加； this.$delete(this.person,"sex")或vue.$delete(this.person,"sex")进行属性的删除

数组进行修改还可以使用 this.person.hobby.splice(0,1,'shopping')

五 计算属性

计算属性 简写：let fullname=computed（（）=>{

return person.firstname+person.lastname;

}）

完整写法:let fullname=computed({

get(){

return person.firstname+person.lastname;}

set(value{

const namearr=value.splice('-')

person.firstname=namearr[0]

person.lastname=namearr[1];

})}) 

六 监视属性

①监视ref定义的一个数据

watch（sum,(newvalue,oldvalue)=>{

console.log('sum change',newvalue,oldvalue),{

immediate:true,deep:true}

})

②监视ref定义的多个数据

newvalue 和oldvalue为数组

③监视reactive定义的对象

无法获取oldvalue   强制开启深度监视

④监视reactive定义的对象中的一个属性

watch（（）=>person.name,(newvalue,oldvalue)=>{

console.log('person.name change',newvalue,oldvalue)

}）能够获取oldvalue

watch监视的数据只能是ref或reactive或数组不能是reactive中的属性否则需要写成函数形式

⑤监视reactive定义的对象中的多个属性

watch（[（）=>person.name,（）=>person.age],(newvalue,oldvalue)=>{

console.log('person.name change',newvalue,oldvalue)

}）能够获取oldvalue

⑥reative监视的属性依然是个对象需要开启深度监视且无法获取oldvalue

七 watcheffect函数（注重逻辑）（类似computed：注重返回值）

不指定监视元素，当函数回调中出现的元素值更改调用

八 生命周期

将beforedestroy 更换为 beforeunmount 卸载 

将destroyed更换为unmounted卸载

组合式api：除了create beforecreate 其余在钩子名前加on，其先于配置项执行

九 自定义hook函数（把组合式api进行封装）

创建文件夹 创建js文件 默认暴露文件 调用 实现代码复用

十 toref（对象，属性名）处理一个对象的一个属性

torefs 处理一个对象的n个属性 返回使用...torefs（person）

第三章 其他api

一 shallowreactive 浅层次响应处理第一层

       shallowref 只处理基本数据类型

二 readonly函数 让一个响应式数据变为深只读

shallowreadonly函数 让一个响应式数据变为浅只读 深层次可以改

三 toraw  将reactive定义的响应式对象转为普通对象

markrow标记对象永远不是响应式

四 customref 自定义ref

function myref（value）{

return customref((track,trigger)=>{

return{

get (){

track（）通知vue追踪数据的变化

return value},

set(newvalue){

value=newvalue;

trigger() 通知vue重新解析模板},

}

})}

五 provide和inject实现祖孙组件通信 （跨级通讯）

provide（‘car’，car）

let car=inject（‘car’）

六 响应式数据判断

isref 检查一个值是否是ref对象

isreactive 检查一个对象是否由reactive响应式代理

isreadonly检查一个对象是否是由readonly创建的只读代理

isproxy检查一个对象是否是由reactive或者readonly方法创建的代理

七组合api的好处：让相关功能的代码更加有序的组合在一起

第四章 常用组件

一 fragment 组件可以没有根标签，包裹在fragment虚拟元素中

好处 减少标签层级，减少内存占用

二 teleport 将组件html结构移动到指定位置的技术

<teleport to="body"><teleport>

transform中translate移动是相对自身位置 绝对定位中的移动相对于父级元素

三 suspense 等待异步组件时渲染一些额外内容

 import {defineasynccomponent}from vue 静态引入 等待所有组件渲染完成

const child =defineasynccomponent（（）=>import(

./component/child)） 异步引入 先渲染先显示

<suspense>

<template v-slot:default> <child/></template> 默认

<template v-slot:fallback> <h3>稍等加载中</h3></template>应急

</suspense>

第五章其他

一 全局api的转移：将全局api  Vue.component调整到应用实例app上

具体有 Vue.conflg.*** /component/directive/mixin/use/prototype

二 过度类名的变化 

三data必须写成函数

四移除keycode作为v-on的修饰

五 移除了过滤器