面试题记录

最新推荐文章于 2023-02-08 22:55:37 发布

AmazingZ-sys

最新推荐文章于 2023-02-08 22:55:37 发布

阅读量346

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/linzhi_1022/article/details/105094415

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端页面加载的流程，TCP请求到页面交互
前端框架对比（vue和react）
理解函数式组件的产生背景和优势，理解js class逐渐被react和vue抛弃的原因
js的基础知识
优化方案，建议从TCP请求到接口请求再到页面的绘制
刷算法题（leetcode-cn.com）

面试题记录：

请描述一下vue的双向绑定原理

答：vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过**Object.defineProperty（）**来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
```
// 一个简单的双向绑定
<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>
```
虚拟DOM实现原理，为什么需要虚拟DOM？

答：虚拟DOM用javascript对象来表示VNode，在传统的开发流程中，使用原生的JS或JQ操作DOM时，很有可能触发回流操作，浏览器重新渲染部分或全部文档，更可怕的是，当需要更新多个节点时，一个节点更新后，导致前一个节点的坐标信息更新，前一次计算为无用功，计算DOM节点浪费了性能，所以直接操作DOM的代价十分昂贵，频繁操作还会造成页面卡顿影响用户体验，通过虚拟DOM我们执行更新大量节点操作时，通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升。
watch、computed和methods的区别？

答：
vue中key的作用？元素顺序变更会导致DOM元素顺序变化吗？为什么？

答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM
vue怎么实现动态路由？

答：1.后台返回一个json格式的路由表。2.因为后端同学传回来的都是字符串格式的，但是前端这里需要的是一个组件对象啊，写个方法遍历一下，将字符串转换为组件对象。3.利用vue-router的beforeEach、addRoutes、localStorage来配合上边两步实现效果。4.左侧菜单栏根据拿到转换好的路由列表进行展示。
大体步骤：拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

AmazingZ-sys

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题记录

前端页面加载的流程，TCP请求到页面交互前端框架对比（vue和react）理解函数式组件的产生背景和优势，理解js class逐渐被react和vue抛弃的原因js的基础知识优化方案，建议从TCP请求到接口请求再到页面的绘制刷算法题（leetcode-cn.com）面试题记录：请描述一下vue的双向绑定原理答：vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式...
复制链接

扫一扫