最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。
并祝愿大家在新的一年找工作面试中胆大心细,发挥出最好的水平,找到一份理想的工作。
不仅是数据,计算的属性和方法,甚至是指令和组件也可以在我们的template
中自动获得。
这个很魔法。
那么,这有什么意义呢?
长话短说,此语法使单个文件组件更简单。
用RFC的里的原话来说,“该提案的主要目标是通过将<script setup>
的上下文直接暴露给模板来减少SFC内部 Composition API
使用的冗长性。”
这就是我们刚刚看到的,无需关心在setup
方法返回的值(因为有时应该会忘记在 setup 返回我们需要的值,导致模板获取不到对应的值),我们可以简化代码。
<script setup>
的更高级用法
现在我们知道<script setup>
到底是什么,以及为什么它有用,接着,我们看一下它的一些更高级的功能。
访问 props, emit 事件 等
首先,你可能想知道如何执行标准的Vue操作,例如:
-
访问 props
-
怎么发出自定义事件
-
访问上下文对象
在Composition API中,这些放在了setup
方法中的参数
setup (props, context) {
// context has attrs, slots, and emit
}
但是,在script setup
语法中,我们可以通过从Vue导入3次对应的 API 来访问这些相同的选项。
-
defineProps – 顾名思义,它允许我们为组件定义 props
-
defineEmits – 定义组件可以发出的事件
-
useContext – 可以访问组件的槽和属性
<button @click=“$emit(‘change’)”> Click Me
通过这3种导入,我们可以获得传统设置方法所惯用的功能。
创建异步 setup 方法
script setup
语法的另一个很酷的功能是创建异步setup
非常容易。
这对于在创建组件时加载api,甚至将代码绑定到<suspense>
功能很有用。
我们所要做的就是让我们的 setup
函数是异步的,在我们的script setup
中使用一个顶级的await
。
例如,如果我们使用的是Fetch API,我们可以像这样使用await
这样setup()
函数将是异步的。
使用<script setup>
和一个普通的<script>
<script setup>
为其顶级绑定创建自己的脚本作用域。 但是在某些情况下,必须在模块范围内执行代码。
该RFC中的2个具体示例是:
-
Declaring named exports
-
创建仅执行一次的全局副作用
这可以通过在 script setup 旁边添加一个普通的<script>
块来完成,如下所示。