2024年前端最新vue3 学习笔记 (四)——vue3 setup() 高级用法，美团前端面试题2024

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

示例3：直接定义使用变量

{{a}}

运行后发现结果异常：

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 属性，经常用来传递一些样式属性。

slots 是一个 proxy 对象，其中 slots.default() 获取到的是一个数组，数组长度由组件的插槽决定，数组内是插槽内容。

setup 内不存在this，所以 emit 用来替换 之前 this.$emit 的，用于子传父时，自定义事件触发。

示例9：

<button @click=“emit(‘getVal’,‘传递值’)”>子向父传值