20道前端高频面试题（附答案）

loveX001

已于 2022-11-14 08:38:34 修改

阅读量687

点赞数

文章标签： javascript

于 2022-11-14 08:36:55 首次发布

本文链接：https://blog.csdn.net/loveX001/article/details/127840824

版权

本文汇总了20道前端面试中常见的问题，包括Vue双向数据绑定原理、JavaScript的this指向、Set和Map的区别、事件冒泡处理、首屏和白屏时间计算、浏览器进程详解、JavaScript脚本延迟加载方式、响应式设计概念和原理、GET方法URL长度限制原因、clear属性清除浮动原理、内存泄漏情况、this对象理解、即时通讯技术对比、HTTP协议版本差异以及HTTP2头部压缩算法等内容，帮助读者全面掌握前端核心技术。

摘要由CSDN通过智能技术生成

vue实现双向数据绑定原理是什么？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <!-- 引入vue文件 -->
    <div id="box">
      <new-input v-bind:name.sync="name"></new-input>
      {
  {name}}
      <!-- 小胡子语法 -->
      <input type="text" v-model="name" />
    </div>
    <script>
      Vue.component("new-input", {
             props: ["name"],        data: function () {
               return {
                 newName: this.name,          };        },        template: `<label><input type="text" @keyup="changgeName"        v-model="newName" /> 你的名字：</label>`,        // 模板字符串
        methods: {
               changgeName: function () {
                 this.$emit("update:name", this.newName);          },        },        watch: {
               name: function (v) {
                 this.newName = v;          },        },        //    监听
      });      new Vue({
             el: "#box",        //挂载实例
        data: {
               name: "nick",        },        //赋初始值
      });    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" v-mode="msg" />
    <p v-mode="msg"></p>
    <script>
      const data = {
             msg: "你好",      };      const input = document.querySelector("input");      const p = document.querySelector("p");      input.value = data.msg;      p.innerHTML = data.msg;      //视图变数据跟着变
      input.addEventListener("input", function () {
             data.msg = input