【每日前端面经】2023-02-24

糠帅傅蓝烧牛肉面2024-02-26 19:55

题目来源: 牛客

对Vue的理解

Vue是一款流行的JS前端框架，关注的核心是MVC模式的视图层，能够简化数据更新

Vue的核心是数据驱动、组件化和指令系统

数据驱动: 分为模型层、视图层和视图模型层
组件化: 可以把各种逻辑封装进统一组件进行复用
指令系统: 当表达式产生改变时，响应式地对DOM产生作用

如何实现一个v-model自定义组件

v-model本质上就是一个v-bind和emit的语法糖

html 复制代码

// 父组件
<template>
    <Chind v-model:name="nameValue" @update:name="updateValue" />
</template>
<script>
    const nameValue = ref<String>("hyq");
    const updateName = (val) => nameValue.value = val;
</script>


// 子组件
<script setup lang="ts">
const props = defineProps<{
    name: String;
}>();
const emits = defineEmits(["update:name"]);
watch(name, (newVal, _oldVal) => emits("updatea:name", newVal));
</script>

组件通信

props/$emit
p a r e n t / parent/ parent/children
a t t r s / attrs/ attrs/listeners
provide/inject
ref/$refs
eventBus
VueX
storage

实现EventBus

直接在全局实例挂载一个eventBus，通过 e v e n t B u s . eventBus. eventBus.on监听事件， e v e n t B u s . eventBus. eventBus.emit触发事件

JS数据类型

Number
String
Boolean
Object
Null
Undefined
Symbol
BigInt

`==`是如何将空和0判断相等的

JS会先进行类型转换，将空转换成0，这是两个类型相同，进行比较，结果为true

面试官：说说你对vue的理解?
Vue3.0 自定义组件实现v-model
vue3 属性传值和自定义事件（composition API属性和上下文对象）
vue3加ts的组合式api中怎么使用watch侦听器
 js中==和===的区别
 Vue中 EventBus 的使用，如何实现Vue中的EventBus
超详细vue组件间通信的12种方式

复制代码

新手发文，礼貌求关❤️