一道关于 vue 的面试题

发布于 2022-09-06 12:52:19 字数 952 浏览 21 评论 0

1.Vue双向绑定原理

data => view: 通过数据劫持(老版本是Object.defineProperty,最新版使用proxy),数据更新了直接调用一个方法去更新视图

view => data: 通过v-model来实现 其实也就是调用Dom的onchange方法来实现

ps.上面的回答应该是错的(或者现在错了),看到一个说法不过感觉也只是说了data=> view的部分

Vue 采用 数据劫持 和 发布-订阅模式的方式,
通过ES5提供的Object.defineProperty()方法来劫持(因为ie8以下不支持该方法,所以vue不兼容ie8)
各属性的getter、setter,并在数据(对象)发生变动时通知订阅者,出发相应的监听回调。
由于,是在不同数据上出发同步,可以精确的将变更发送给绑定的试图,而不是对所有的数据都执行一次检测,

2.vue-router实现原理

根据url来path匹配相应的 component ,在把匹配到的component渲染到指定的dom上就好了

3.vue list中子元素绑定一个点击事件 及 优化

正常使用是直接


<div class="list">

<div v-for="(item, index) in data" :key="index" @click="click(item)">删除</div>

</div>

这个问题让我想起来一个点

写原生的时候list非常长的话,给每个按钮绑定一个事件,其实很费内存的,优化处理呢,把绑定事件放在list上 通过子元素的事件冒泡来定位是那个子元素点击了 然后进行相应的操作。

个人觉得两者应该一样的。

引申出来一个问题 在vue中,经常性像上面那样写,vue是不是已经做了这方面的优化,是怎么做到的

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

七七 2022-09-13 12:52:19

把绑定事件放在list上 通过子元素的事件冒泡来定位是那个子元素点击了 然后进行相应的操作。

这个“通过子元素的事件冒泡”,子元素的事件不也需要绑定吗?这样的话不也是相当于“给每个按钮绑定一个事件”吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文