Vue3基础

最新推荐文章于 2024-06-13 15:12:44 发布

王小白--

最新推荐文章于 2024-06-13 15:12:44 发布

阅读量711

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_64784735/article/details/125791379

版权

一.常用的compositionAPI

一.setup
1.组件中所有用到的数据方法等都要在这里配置
2.setup函数的两种返回值：若返回一个对象，则对象的属性、方法在模板中可以直接使用
3.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板找不到return的属性(后期也可以返回一个promise实例，但需要配合Suspense与异步组件配合使用)
二.ref
作用：定义一个响应式数据
使用： let(const) 变量= ref(xxxx)
创建一个包含响应式数据的引用对象(reference ,简称ref)

2.js操作数据：xxx.value

备注：
1.接收的数据可以使：基本数据类型，也可以引用对象类型
2.基本类型数据：响应式依然是靠Object.defineProperty()中的get与set完成的
3.对象类型数据：内部求助于了vue3中的新函数——reactive函数
三.reactive
作用：定义一个对象型的响应数据
语法：let 代理对象= reactive(原对象)接收一个对象或数组，返回一个代理对象(proxy的实例对象)
reactive定义的响应式数据是深层次的内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作
四.vue3的响应原理
Vue2的响应式：
实现原理：
对象类型：通过Object.defineProperty()对象的读取。修改进行拦截(数据劫持)
数组类型：通过重写更新数组的一系列方法实现拦截
问题：
新增的属性，删除属性界面都不会更新
直接通过下标修改数组，界面不会自动更新
Vue3的响应式：
实现原理：
通过proxy代理：拦截对象中任意属性的变化，包括：属性值的读写、属性添加、属性删除
通过Reflect(反射)：对被代理对象的属性进行操作
五.ref与reactive区别
1.定义数据角度对比：
ref用来定义：基本数据类型
reactive用来定义：对象或数组类型数据
备注：ref也可以定义对象或数组类型数据，它内部会自动通过reactive转为代理对象
2.从原理的角度对比：
ref通过object.defineProperty()的get与set来实现响应式
reactive通过使用Proxy来实现响应式，并通过Refiect操作源对象内部的数据
3.从使用的角度对比：
ref定义的数据：操作需要.value读取数据时模板中直接读取不需要加.value
reactive定义的数据：操作数据与读取数据都不需要加.value
六.setup两个注意点
setup执行的时机
在beforCreate之前执行，this是undfined
setup的参数值
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了属性
context上下文
attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
slots:收到的插槽内容，相当于this.$slote
emit:分发自定义事件的函数，相当于this.$emit

七.计算属于监视
computed：
与vue2中的功能配置一致
watch：
使用：

//ref定义的基本属性使用不可以加.value 如果是一个深层次对象需要加.value也可以开启深度监视
watch(name,(newValue,oldValue)=>{
      console.log('..' ,newValue,oldValue);
    },{配置项}) 
//reactive定义的使用
注意：reactive不能获取旧的值oldValue且可以深度监视不用手动配置
watch(name,(newValue,oldValue)=>{
      console.log('..' ,newValue,oldValue);
    },{配置项}) 
注意二：
当监视某个数据中的具体属性时 可以获取旧的值
用法：
watch(()=>name.xxx , (newValue,oldValue)=>{
      console.log('..' ,newValue,oldValue);
    },{配置项}) 
注意三：
当监视某个数据中的多个具体属性时 可以获取旧的值
用法：
watch([()=>name.xxx,()=>name.xxx] ,(newValue,oldValue)=>{
      console.log('..' ,newValue,oldValue);
    },{配置项}) 
注意四：
当监视某个数据中的属性为多层数据 需要打开深度监视
用法：
watch(()=>name.xxx ,(newValue,oldValue)=>{
      console.log('..' ,newValue,oldValue);
    },{配置项}) 

watchEffect：
使用：
watchEffect(()=>{
    })
注意：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性

二.Vue3的生命周期

1.Vue3中可以使用Vue2的生命周期钩子，但有两个被更名了
卸载之前
beforeDestroy =>beforeUnmount
卸载完毕
destroyd=>unmountd
2.Vue3中也提供了CompositionAPI形式的生命周期钩子需要引入，于vue2对应关系如下组合式没有了beforeCreate，created 生命周期钩子， setup就是他们两个
beforeCreate => setup（）
created => setup（）
beforeMount =>onBeforeMount
mountd => onMountd
beforeUpdate => onBeforeUpdate
updated => onUpdated
beforeUnmount => onBeforeUnmount
unmountd => onUnmountd

三.其他的CompositionAPI

1.shallowReactive与shallowRef
.shallowReactive：中能处理对象外层属性响应式(浅层次)
shallowRef：只能处理基本类型的响应式，进行对象的响应式处理
什么时候用：
如果一个对象数据，结构比较身深，但变化时只是外层属性发生变化使用shallowReactive
如果有一个对象数据，后续功能不会进行修改对象的属性，而是新增属性替换使用shallowRef
2.readonly 与shallowReadonly
readonly：让一个响应式数据只读取
shallowReadonly：让一个响应式数据浅只读取
使用场景：不希望数据被修改

3.hook函数
把setup函数中使用的CompositionAPI进行了封装类似于mixin
4.toRef
作用：创建一个ref对象，其value值指向另一个对象的某个属性
语法： const name = toRef(数据名,'数据')
应用：要将响应式对象中的某个属性单独提供给外部使用。
扩展：toRef于toRefs功能一直，但可以批量创建多个ref对象
4.toRaw 与markRaw
toRaw：
作用：将一个有reactive生成的响应式对象转换为普通对象
使用场景：用于读取相应四对象对应的普通对象，对这个普通对象的操作，不会引起页面更新
markRaw：
作用：标记一个对象，使其永远不会成为响应式对象。
应用场景：
1.有些值不应被设置为响应式，当渲染具有可变数据源的大列表时，跳过响应式转换可以提高性能
5.provide与inject
作用：祖孙组件通信
使用：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据
具体写法：
祖组件：

let 属性名 = reactive({
      name:'张三',
      age:18
    })
    provide('自定义名字',属性名)

后代组件：

inject('自定义名字')
建议：跨代使用，如果父子组件使用porps

6.响应式数据判断
isRef：检擦一个值是否为ref对象
isReactive：检查一个对象是否由reactive创建的响应式代理
isProxy：检查一个对象是否由reactive或者readonly方法创建的代理
isReadonly：检擦一个对象是否是由readonly创建的只读代理
7.新的组件
Fargment：
在vue2中：组件必须有一个根标签
在vue3中：组件可以没有根标签，内部会将多个标签包含在Fargment虚拟元素中
Teleport：
把包裹的div元素可以放在其他元素内不局限于父元素内如html或body
使用：

<teleport to='要放的元素中' >
         <div>
        <h1>你好</h1>
       </div>
</teleport>

Suspense：
使用：现在是不完善以后可能会修改
异步引入组件：

import {defineAsyncComponent} from 'vue'
const 组件名= defineAsyncComponent(()=>{return import('组件地址')})

<Suspense>
      <template v-slot:default> //default如果正常出现
      <fathe :name="data"></fathe>
      </template>
      <template v-slot:fallback>//default如果不正常出现则出现fallback的组件
      <h1></h1>
      </template>
    </Suspense>

四.其他

1.全局API的转移

全局API的转移
Vue2中	Vue3中
Vue.config.xxx	app.config.xxx
Vue.config.productionTip//关闭提示	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties