最近两周出去面试遇到的面试题（前端初级、长更）

最新推荐文章于 2024-04-23 16:26:38 发布

VIP文章爱前端也爱恋爱

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量2.1k

点赞数 3

分类专栏： web前端学习圈文章标签：前端 javascript webpack css webview

本文链接：https://blog.csdn.net/l1063951462/article/details/124210679

版权

以下面试题不分先后顺序

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

“我自己是一名从事了6年web前端开发的老程序员，今年年初我花了一个月整理了一份最适合2022年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取

<!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.value;
      });
      //数据变视图变
      let temp = data.msg;
      Object.defineProperty(data, "msg", {
        get() {
          return temp;
        },
        set(value) {
          temp = value;
          //视图修改
          input.value = temp;
          p.innerHTML = temp;
        },
      });
      data.msg = "小李";
    </script>
  </body>
</html>

八股文我不想写了自己百度去

2、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>
    <!-- v-model 只是语法糖而已 -->
    <!-- v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件 -->
    <!-- text和textarea 元素使用value property 和 input事件 -->
    <!-- checkbox 和radio使用checked  property 和 change事件-->
    <!-- select 字段将value 作为prop 并将change 作为事件 -->
    <!-- 注意：对于需要使用输入法(如中文、日文、韩文等)的语言，你将会发现v-model不会再输入法
    组合文字过程中得到更新 -->
    <!-- 再普通标签上 -->
    <input v-model="sth" />  //这一行等于下一行
    <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
    <!-- 再组件上 -->
    <currency-input v-model="price"></currentcy-input>
        <!--上行代码是下行的语法糖
         <currency-input :value="price" @input="price = arguments[0]"></currency-input>
        --> 
        <!-- 子组件定义 -->
        Vue.component('currency-input', {
         template: `
          <span>
           <input
            ref="input"
            :value="value"
            @input="$emit('input', $event.target.value)"
           >
          </span>
         `,
         props: ['value'],
        })   
</body>
</html>

3、Hash和history有什么区别

戳右面的链接：juejin.cn/post/699384…

4、什么是深拷贝和浅拷贝?以及怎么实现深拷贝和浅拷贝?

戳右面的链接： juejin.cn/post/684490…

5、什么是原型什么是原型链?

<!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>
    
</body>
<script>
    function Person () {

    }
    var person  = new Person();
    person.name = 'Kevin';
    console.log(person.name) // Kevin

    // prototype
    function Person () {

    }
    Person.prototype.name = 'Kevin';
    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.name)// Kevin
    console.log(person2.name)// Kevin

    // __proto__
    function Person () {

    }
    var person = new Person();
    console.log(person.__proto__ === Person.prototype) // true

    //constructor
    function Person() {

    }
    console.log(Person === Person.prototype.constructor) // true

    //综上所述
    function Person () {

    }
    var person = new Person()
    console.log(person.__proto__ == Person.prototype) // true
    console.log(Person.prototype.constructor == Person) // true
    //顺便学习一下ES5得方法,可以获得对象得原型
    console.log(Object.getPrototypeOf(person) === Person.prototype) // true

    //实例与原型
    function Person () {

    }
    Person.prototype.name = 'Kevin';
    var person = new Person();
    person.name = 'Daisy';
    console.log(person.name) // Daisy
    del

最低0.47元/天解锁文章

爱前端也爱恋爱

关注

3
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
最近两周出去面试遇到的面试题（前端初级、长更）

以下面试题不分先后顺序1、vue实现双向数据绑定原理是什么？“我自己是一名从事了6年web前端开发的老程序员，今年年初我花了一个月整理了一份最适合2022年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取<!DOCTYPE html>..
复制链接

扫一扫