猿辅导面试

1.vue中数据双向绑定的原理

 vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

参考资料：https://www.cnblogs.com/running-runtu/p/9154719.html

2.vue中，下面两者的区别？

this.list.push({ id: 1, value: 1 })
this.list[0] = { id: 1, value: 1 }

3.vue中的key关键字是什么作用？

因为vue在渲染元素时，出于效率考虑，会尽可能的复用已有的元素而非重新渲染。如果你不想元素被复用，可以用key属性来决定是否要复用元素，key的值必须是唯一的。

例子：

<div id="app" >
        <template v-if="type === 'name'" >
            <label>用户名：</label>
            <input type="" name="" placeholder="输入用户名" key="input">
        </template>
        <template v-else>
            <label>邮箱：</label>
            <input type="" name="" placeholder="输入邮箱" key="mail">
        </template>
        <button @click="handleToggleClick">切换数据类型</button>
    </div>

    <script type="text/javascript">
        var vm=new Vue({
            el:'#app',
            data:{
                type:'name'
            },
            methods:{
                handleToggleClick:function(){
                    this.type = this.type==='name'?'mail':'name';
                }
            }
        })
    </script>

（原生的问题）

4.

function ClassA() {
  this.name = 'classA'
}
const  classA=new ClassA();

在new这个classA实例的时候，里面的this指向是怎样的？

如果是这样呢？

const  classA=ClassA();

如果有一个obj，怎样让this的指向指向obj（既怎么将this绑定到obj上）。请在下面实现。

function classA(){
   this.name;
}

var obj={
    name:'xiaoming'
}
//让this指向obj
classA.call(obj);

 5.classA.prototype里面有什么属性？

classA.prototype={

}

  答案：

6.promise机制，用promise来封装一个回调函数，要求如下

function getData(id, callback) {
   // ajax
   // success: callback(null, data)
   // error: callback(error, null)
}

getData => getDataPromise

const getDataPromise = toPromise(getData) 

function toPromise(fn) {
  return function (id) {
    //...???
    return new Promise(function(resolve,reject){
            $ajax({
                url:'xxx',
                dataType:'json',
                success (data){
                    resolve(data)
                }
                error(data){
                    reject(data);
                }
            })
        }
    
  }
}
getDataPromise(id).then(data => {}).catch(error => {})

7.编程题：将数组按层次展开

list: [1, 2, [3, 4], [5, 6, [7, 8], 9], 10, 11]
depth = 1: [1, 2, 3, 4, 5, 6, [7, 8], 9, 10, 11]
depth = 2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

8.css动画的实现方式以及区别

9.移动端适配怎么实现

10.了解rem吗？

11.css3的布局有没有用过，说一下flex布局

12.http实现跨域的方式以及jsonp的实现原理

13.ES6的新特性

14.箭头函数和普通函数的区别