myNotes
- setup 的返回值会作为 render 的上下文. setup 在整个生命周期中只执行 1 次.
- setup 在 beforeCreate 之前执行.
- setup 函数有 2 个参数,props 和 context.
- 在 setup 同级的 props 中定义当前组件允许传递的值, 通过 setup 的第一个形参可以来接收 props 数据
- context 是一个上下文对象,包含了一些属性,在 vue2 中需要用 this 来访问到, 在 vue3 中访问的方式: setup(props,context){
context.attrs
context.slots
context.emit
...
}
- 在 setup 中无法访问到 this,使用 context 代替.
- reactive()函数接收一个普通对象,返回一个响应式的数据, 需要在 setup 中 return 出 reactive().
- ref()函数用来根据给定的值创建一个响应式的数据对象, ref()函数调用的返回值 是一个对象,这个对象只包涵一个.value 属性, .value 仅在 setup 内部生效,模板上可直接写 return 出的那个对象.
- 当把 ref()创建出的响应式数据对象,挂载到 reactive()上, 会自动把响应式数据对象展开为原始值,即不需要通过.value 就可以直接被访问, 不要重名,新的 ref 会覆盖旧的 ref.
- reactive()和 ref()区别:
- reactive()创建的是一个对象,可包含很多值;
- ref()创建的是单个显示数据,一次只能创建一个.
- isRef()用来判断某个值是否是 ref()所创建的. 使用场景:当需要展开某个可能是 ref()创建的值的时候: const unwrapped = isRef(foo)?foo.value:foo
- toRefs 可以将 reactive()创建出的响应式对象转化为普通对象, 这个对象上的每个属性节点都是ref()类型的响应数据.import { toRefs, reactive } from 'vue'
export default {
setup() {
const state = reactive({ count: 0, foo: 'bar' })
//定义自增+1的函数
const add = () => {
state.count += 1
console.log(state.count)
}
return { ...toRefs(state), add }//用toRefs包裹,将state重新变为响应式数据
}
}
P.S 第十条这个toRefs真的挺有用的,return出的state使用扩展运算符后,模板上的数据就是固定的了,也就是当点击触发事件,模板不会更新,就跟React一样了。Vue3给的toRefs将数据重新转化为响应式的。
Comments | NOTHING