2024年前端最全vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽(1)，面试官问的那些前端原理你都懂吗

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

{{todoList}}

使用 script setup 语法糖，不需要 return 和 setup函数，只需要全部定义到 script setup 内。

可以简化上述代码为：

{{todoList}}

2、组件自动注册

在 script setup 语法糖中，引入的组件可以自动注册，不需要再通过 components 进行注册，而且无法指定当前组件的名字，会自动以文件名为主，省去了 name 属性。

而在 setup() 写的组合式 API 中，引入的组件必须在 components 内注册之后才能使用，否则无法正常引入。

3、组件数据传递

父组件给子组件传值时，需要 props 接收。setup( props, context )接收两个参数，props 接收传递的数据，使用 setup() 接收数据如下：

{{ a }} {{ b }}

而 script setup 语法糖接收 props 中的数据时，使用 defineProps 方法来获取，可以修改上述代码为：

{{ a }} {{ b }}

4、获取 attrs、slots 和 emits

setup( props, context )接收两个参数，context 上下文环境，其中包含了属性、插槽、自定义事件三部分。

setup() 内获取如下：

setup(props,context){

const { attrs, slots, emit } = context

// attrs 获取组件传递过来的属性值，

// slots 组件内的插槽

// emit 自定义事件 子组件

}

使用 script setup 语法糖时，

• useAttrs 方法 获取 attrs 属性

• useSlots 方法获取 slots 插槽

• defineEmits 方法获取 emit 自定义事件

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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