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响应式依赖被触发时调用，serverPrefetch ssr 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>Document</title>
</head><body><div><button id="myBtn">改变username</button><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>