Vue经典面试题源码级分析【一】
01-Vue组件通信方式有哪些
- 父子组件 ：
props/emit/$parent/ref/$attrs
$attrs: https://cn.vuejs.org/api/component-instance.html#attrs- 兄弟组件：
$parent/$root/eventbus/vuex- 跨层级关系：
eventbus/vuex/provide+inject
父子组件通信上：
props/ emit 是最常用的父子间通信的方法，也可以通过$attrs去透传属性，父组件可以通过ref来访问子组件、子组件也可以通过$parent来获取父组件
兄弟组件通信上：
兄弟组件没有实际的联系，需要建立一个中间人。可以通过$parent / $root / eventbus / vuex 来解决
跨层级的化只能通过 eventbus / vuex / provide + inject 来处理
还有一些方法是vue3里面废除了的，比如$children、$on，在vue3中也没有内置的EventBus，需要我们手动去实现，不如直接使用全局状态管理的库
02-v-if和v-for哪个优先级更高
- 首先 v-if 和 v-for 不应该放在一起上
- 在vue2中v-for优先级高，会造成for循环很多次
- 在vue3中v-if优先级高，也会造成if中拿不到for循环的值
- 在实践中，可以用
template包裹一下
03-简述Vue生命周期以及每个阶段做的事
首先看一遍生命周期文档：https://cn.vuejs.org/api/composition-api-lifecycle.html
- 定义：vue生命周期是为了描述组件从挂载渲染到卸载的节点的钩子函数
- 阶段：创建前后、挂载前后、更新前后、卸载前后、keepAlive的
isActived和deactived，还有vue3新增的一些：renderTracked响应式依赖被收集时调用、renderTriggered响应式依赖被触发时调用，serverPrefetchssr only，组件实例在服务器上被渲染前调用、onErrorCaptured()捕获后代组件传递的错误时调用 - 每个钩子函数做的事情
- beforeCreate: 插件开发中执行一些初始化任务
- created：组件初始化完毕，可以访问各种数据，获取接口等
- mounted：dom已经创建完成， 可以访问dom元以及子组件等
- beforeUpdate、updated获取更新前后的状态
- beforeUnmounted、unmounted：清理副作用：比如计时器、事件监听、服务器的连接等
附加题
- vue3中
setup中为什么没有beforeCreate和created?setup执行顺序在他两个前面，只执行一次，创建的是data和method。再去使用他两个就 没有意义了
04-双向绑定原理
先看文档：https://cn.vuejs.org/guide/components/v-model.html#component-v-model
v-modol在原生组件input，和自定义组件会有两种不同的处理方式：
1,在input上
<input v-model="searchText" />
// 处理后
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
- 自定义组件
<CustomInput
:model-value="searchText"
@update:model-value="newValue => searchText = newValue"
/>
我们需要在CoustomInput做两件事情：
- 将内部原生 元素的 value attribute 绑定到 modelValue prop
- 当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件
手写简易v-model
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div>
<button id="myBtn">改变usernamebutton>
<input type="text" id="myInput">
<h1 id="myTitle">h1>
div>
body>
<script>
let userinfo = {
username: '小明',
};
//开始监控
watcher();
function watcher() {
Object.defineProperty(userinfo, "username", {
set(value) {
updateDom(value);
},
get(val) {
return val;
},
});
}
//更新dom数据
function updateDom(value) {
document.querySelector('#myInput').value = value;
document.querySelector('#myTitle').innerHTML = value;
}
//给input绑定input事件，实时修改username的值
document.querySelector('#myInput').oninput = function (e) {
let value = e.target.value;
userinfo.username = value;
}
//给button绑定点击事件，修改username的值
document.querySelector('#myBtn').onclick = function () {
let value = '小明';
userinfo.username = value;
}
script>
html>