vue3 学习记录

vue 学习记录

setup

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

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.$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 等