运行后发现结果异常:
runtime-core.esm-bundler.js?5c40:6584 [Vue warn]: Property “a” was accessed during render but is not defined on instance.
提示我们访问的属性 a 并没有挂载到实例上。
setup 内部的属性和方法,必须 return 暴露出来,将属性挂载到实例上,否则没有办法使用,上述代码添加 return:
2.3、setup 内部有 this 吗?
自己在 setup 中打印下 this ,返回结果 是undefined 。说明在 setup 内部是不存在 this ,不能挂载 this 相关的东西。
2.4、setup 内钩子函数如何使用?
vue3 是可以兼容 vue2 的选项式写法,所以 钩子函数可以与 setup 并列存在,就相当于 Options API。
示例4:
export default{
setup(){
console.log(‘setup’);
},
mounted(){
console.log(‘mounted’);
}
}
vue3 新增的 setup() 函数用来写组合式 api,所以不建议这样写代码。所以需要使用 onXXX 一族的函数来注册钩子函数,注册成功之后调用时传递的是一个回调函数。
示例5:
import { onMounted } from “vue”;
export default{
setup(){
const a = 0
return{
a
},
onMounted(()=>{
console.log(“执行”);
})
}
}
注册的这些生命周期钩子函数只能在 setup 期间同步使用,因为它们依赖全局内部状态来定位当前组件实例,不在当前组件下调用函数时会抛出错误。
其他的钩子函数是一样的,根据需要引入就好了。
2.5、setup与钩子函数关系
setup 与钩子函数并列时,setup 不能调用生命周期相关函数,但生命周期可以调用 setup 相关的属性和方法。
示例6:
<button @click=“log”>点我
this.$options.setup() 返回的是一个大对象,该对象内包含了 setup 内的所有属性和方法。
三、setup 参数
使用setup 时,它将接收两个参数:props 和 context 。
3.1、props
第一个参数是 props ,表示父组件给子组件传值,props 是响应式的,当传入新的 props 时,自动更新。
示例7:
export default{
props: {
msg: String,
ans: String,
},
setup(props,context){
console.log(props);//Proxy {msg: “着急找对象”, ans: “你有对象吗?”}
},
}
因为 props 是响应式的,不能使用 ES6 解构,会消除prop的响应特性,此时需要借用 toRefs 解构。示例8:
import { toRefs } from “vue”;
export default{
props: {
msg: String,
ans: String,
},
setup(props,context){
console.log(props);
const { msg,ans } = toRefs(props)
console.log(msg.value); //着急找对象
console.log(ans.value); //你有对象吗?
},
}
使用组件时,经常会遇到可选参时,有些地方需要传递某个值,有些时候不需要,该如何处理呢?
如果 ans 是一个可选参数,则传入 props 中可能没有 ans 。在这种情况下 toRefs 将不会为 ans 创建一个 ref ,需要使用 toRef 代替它。
import { toRef } from “vue”;
setup(props,context){
let ans = toRef(props ,‘ans’)// 不存在时,创建一个ans
console.log(ans.value);
}
3.2、context
context 上下文环境,其中包含了 属性、插槽、自定义事件三部分。
setup(props,context){
const { attrs,slots,emit } = context
// attrs 获取组件传递过来的属性值,
// slots 组件内的插槽
// emit 自定义事件 子组件
}
attrs 是一个非响应式对象,主要接收 no-props 属性,经常用来传递一些样式属性。
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中…(img-ydIW5W5v-1710896356777)]
[外链图片转存中…(img-2Hur1h0D-1710896356777)]
[外链图片转存中…(img-XyR1azwy-1710896356778)]
[外链图片转存中…(img-OUrEqGwb-1710896356778)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-M3Ly9um3-1710896356779)]