vue3 学习记录

vue 学习记录
setup

1、 setup 函数为组合式 api 的入口,数据、方法、watch、computed、生命周期钩子 都要配置在 setup 中
2、如果 setup 返回一个对象,则对象中的属性、方法、在模板中可以直接使用。
3、setup 返回一个渲染函数时,会重新渲染 dom 为渲染函数的返回值
微信图片_20210908142205.png
4、setup 不能是一个 async 函数

ref 函数

ref 定义一个响应式的数据。创建一个包含响应式数据的引用对象。 reference 对象
1、被 ref 函数包裹的数据会变成一个 ref 引用对象 RefImpl{…,value}
2、 ref 包裹基本数据类型时,响应式基于 get、set.(数据劫持),
包裹的是对象时,对象会再被包裹一个 proxy。内部借助调用 reactive 函数来实现响应式

reactive 函数

定义一个对象类型的响应式数据(基本类型用 ref 函数)
1、const 代理对象= reactive(源对象)接收一个对象或数组。返回一个代理对象。
2、 内部基于 proxy 实现,通过代理对象操作源对象内部数据进行操作

响应式原理

1、vue2 响应式问题,当动态新增或删除对象属性,或者修改数组下标时,vue 无法响应式监听,需调用 this. s e t ( o b j , k e y , v a l ) 、 t h i s . set(obj,key,val)、this. set(obj,key,val)this.delete(obj,key,val)来实现

vue3引入图片的方式,直接从静态资源目录import,不再使用require

在这里插入图片描述

vite中使用环境变量用 import.meta.env 例如:

import.meta.env.VITE_APP_VERSION
环境变量必须以VITE_ 开头

scss module中如何覆盖第三方ui库样式,使用 :global

在这里插入图片描述

使用transition创建路由切换动画时,组件必须包裹在一个根元素内

在这里插入图片描述

使用 getCurrentInstance来访问内部组件的实例,可暂且理解为vue2时的this。

在这里插入图片描述
getCurrentInstance 只能在 setup 或生命周期钩子中调用

pinia 分模块的简单使用

在这里插入图片描述
页面中使用方式
在这里插入图片描述
使用响应式数据,必须通过storeToRefs进行包裹
在这里插入图片描述

js中使用scss提供的变量时,可以在 scss文件中通过:export{ bgColor: $mainBgColor }的方式来进行。
css 计算属性中使用 scss变量时, 通过 calce( 100% - #{ $leftMainWidth } )。 使用#{}来包裹scss变量
使用 setup语法糖时, 子组件想提供对外暴露的方法,需要用 defineExpose对方法进行包裹。

在这里插入图片描述
父组件使用子组件的方法:
在这里插入图片描述

不需要从vue导入可直接在setup语法使用的的宏函数

defineExpose
defineProps

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值