当前位置：首页 > article >正文

Vue经典面试题源码级分析【一】

article 2024/9/23 21:20:55

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>