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

题目来源: 牛客

对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种方式

复制代码
新手发文,礼貌求关❤️
相关推荐
岁忧28 分钟前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js