当前位置：首页 > news >正文

第一个Vue项目笔记（待更新）

news 来源：原创 2025/6/14 11:11:29

项目初始化

在这里插入图片描述

compisiton api中的setup函数

为什么setup取代了两个钩子函数1.在 beforeCreate 阶段，组件实例尚未初始化，几乎无法进行有意义的操作（无法访问 data、methods 等）。绝大多数场景下，开发者不需要使用它。2.created 的核心作用是在数据观测完成后执行初始化逻辑，但这一逻辑完全可以在 setup() 中通过同步代码实现，无需额外生命周期钩子。3.this指向undefined
但是对于setup的返回值和export default的问题用setup语法糖

对ref的误解

1.支持所有数据类型
2.因为vue的响应式系统依赖proxy（只能代理对象），ref会创建一个包含value属性的对象来包装基本数据类型，所以会.value
3.ref处理引用数据类型时，还是会.value，因为其实是.value包装的一个reactive对象
4.对于对象的属性都要在一开始初始化的时候写好？
Vue 3 的响应式系统（基于 Proxy）默认只能追踪已存在的属性，但可以通过替换整个对象触发响应式更新：

const form=ref({})
const addProperty=()=>{
form.value={...form.value,newProp:'新增加的值'}
}

底层封装？refiml和proxy?

vue3 的监听属性

watch监听的对象有三类

整个对象（此时不用.value) （但是要注意watch只能浅层监听如果想深层监听的话要在最后加{deep：true}
多个数据源例如[a1,a2]
箭头函数返回对象的某个属性（不用深层监听但是必须要写为箭头函数的形式例如（)=>state.value.age）

生命周期钩子

1.生命周期钩子的触发是自动的，但具体逻辑的实现或配置需要开发者显式完成。
2.同一个可以写很多一样的不影响

挂载引用

ref内的名字要一样
组件挂载完毕之后才能访问

//组件的挂载引用
const child =ref(null)
<children ref="child"/>
//父组件访问子组件，子组件中必须defineExpose暴露想暴的
defineExpose({
})
//对于其他标签也可以挂载引用
const pp=ref(null)
<input ref="pp"/>

如何理解子传父？

子组件某个事件监听中，如果需要父组件的做出相应的变化就emit的写法就行了

//子组件编译器宏函数
const emit=defineEmits({})
//子组件的事件监听中
emit('名','可以传递相关参数')
//父组件中
<子组件 @名="相关逻辑"/>

props和ref+expose对比

特性 props ref + expose
数据方向父 → 子（单向）父 ↔ 子（双向，但需显式暴露）
适用场景数据传递、状态同步、展示型组件命令式操作、访问子组件内部
代码侵入性低（子组件需声明 props）高（子组件需 defineExpose）
组件耦合度低（通过接口约定）高（依赖具体方法名）
典型用例配置传递、表单初始值打开弹窗、调用子组件方法