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.箭头函数和普通函数的区别

Logo

前往低代码交流专区

更多推荐