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

题目来源: 牛客

对Vue的理解

Vue是一款流行的JS前端框架，关注的核心是MVC模式的视图层，能够简化数据更新
Vue的核心是数据驱动、组件化和指令系统

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

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

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

// 父组件
<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
• $parent/$children
• $attrs/$listeners
• provide/inject
• ref/$refs
• eventBus
• VueX
• storage

实现EventBus

直接在全局实例挂载一个eventBus，通过$eventBus.$on监听事件，$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种方式

新手发文，礼貌求关❤️