Vue3笔记新版
1.构建Vue3.0项目
使用npm:
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
2.setup函数与生命周期
setup函数会在原有的beforeCreate函数之后，created函数之前执行。setup函数的参数有两个：props和context
- 在
props中定义外界传递过来的参数名称和类型，并在setup函数的第一个形参接收
setup函数的第二个形参context是一个上下文对象，包含了attrs、slots等属性。由于在setup函数中无法访问到this，因此使用形如context、attrs的方式访问这些属性。对于setup函数与props、context的使用，详见下例：
// setup函数与props、context的使用
export default{
setup(props,context){
console.log(props.argl)
console.log(context)
},
props:{
arg1:string.
arg2:int,
},
// context中的内容
// context:{
// attrs:Data
// slots:Slots
// emit:(event:string,...args:unknown[]) => void
// // 以及parent,refs,root...
// };
}
3. Vue 3 组合式 API 详解：setup函数、props和context
1. setup 函数
作用
setup 函数是 Vue 3 组合式 API 的入口点和核心。它在一个组件被创建之前、在 props 被解析之后立即执行。主要作用包括：
- 定义响应式数据：通过
ref或reactive创建响应式的变量 - 定义方法：定义组件中所有需要的方法
- 注册生命周期钩子：使用如
onMounted,onUpdated等函数来注册生命周期回调 - 建立与模板的连接：返回一个对象，该对象的所有属性和方法都会暴露给组件的模板
执行时机
在组件实例被完全创建之前执行。这意味着在 setup 内部，没有 this，无法访问组件实例（data, computed, methods 等）。
返回值
必须返回一个对象。这个对象中的属性会被合并到模板的渲染上下文中，模板可以直接使用这些属性和方法。
2. props
作用
props 是组件接收外部传入数据的接口，使得组件可以被配置和复用。
在 setup 中的使用
props 作为 setup 函数的第一个参数传入。这个 props 对象是响应式的——当父组件传入新的 prop 时，它会被更新。
重要特性
- 响应式：
props对象是响应式的，不能使用 ES6 的解构来提取它，这会消除它的响应性 - 安全访问：如果需要解构
props，可以使用toRefs或toRef工具函数来保持其响应性
示例代码
import { toRefs, toRef } from 'vue'
export default {
props: {
title: String,
user: Object
},
setup(props) {
// 直接访问
console.log(props.title)
// 使用 toRefs 解构保持响应性
const { title, user } = toRefs(props)
console.log(title.value) // 注意：需要 .value 访问
// 使用 toRef 对单个 prop
const titleRef = toRef(props, 'title')
}
}
注意
props 对象本身是只读的。不应该在子组件内部修改 props，否则 Vue 会在控制台发出警告。如果子组件需要修改来自父组件的值，应该通过触发事件让父组件来修改。
3. context
作用
context 是一个普通的 JavaScript 对象（非响应式），它暴露了在 setup 中可能常用的三个组件属性。因为它不是响应式的，可以安全地使用 ES6 解构。
在 setup 中的使用
context 作为 setup 函数的第二个参数传入。
context 对象的主要属性
1. attrs
- 作用：包含所有传递给组件的非 prop 的 attribute（例如
class,style,v-on监听器等） - 行为：与 Vue 2 中的
$attrs属性相同。如果没有在props中声明某个 attribute，它就会出现在attrs中 - 注意：
attrs对象本身是响应式的，但context不是
2. slots
- 作用：包含所有传入的插槽内容的函数
- 行为：与 Vue 2 中的
$slots属性相同。通常用于编写渲染函数或高级组件
3. emit
- 作用：用于触发自定义事件的函数，是子组件与父组件通信的主要方式
- 用法：
emit('eventName', ...payload)。第一个参数是事件名，后续参数是传递给事件处理器的值
示例代码
export default {
setup(props, context) {
// 访问 Context 的属性
console.log(context.attrs) // 所有非 prop 的 attributes
console.log(context.slots) // 所有插槽
context.emit('custom-event', 'some-data') // 触发一个事件
// 直接解构 context
const { attrs, slots, emit } = context
emit('custom-event', 'some-data')
}
}
其他属性
在早期版本中，context 还包含 expose, parent, root 等属性，但在现代 Vue 3 开发中，它们的用例相对较少，且使用需谨慎。
浙公网安备 33010602011771号