前端面试题（八）

1.watch和computed

计算属性computed ：

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
   

侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；
2. watch支持异步；
3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
   immediate：组件加载立即触发回调函数执行，
   deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
   

2.浅拷贝和深拷贝

浅拷贝和深拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

1. 浅拷贝：只有增加了一个指针指向已存在的内存地址（假如B复制A，修改A的时候，B跟着变）（仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会响应的改变）

//此递归方法不包含数组对象
var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var newobj = {};
  for (var i in src) {
    if (src.hasOwnProperty(i)) {
      newobj[i] = src[i];
    }
  }
  return newobj;
}

3. 深拷贝：增加了一个指针并且申请一个新的内存，使这个增加的指针指向这个新的内存（假如B复制A，修改A的时候，B不变）（在计算机中开辟一个新的内存地址用于存放复制的对象）

 var obj = { 
    a:1, 
    arr: [1,2]，
    nation : '中国',
    birthplaces:['北京','上海','广州']
};
var obj2 = {name:'杨'};
obj2 = deepCopy(obj,obj2);
console.log(obj2);
//深复制，要想达到深复制就需要用递归
function deepCopy(original,result){
   var result = result || {}；
   for(var i in original){
   if(typeof original[i] === 'object'){
          //要考虑深复制问题了
          if(original[i].constructor === Array){
            //这是数组
            result[i] =[]；
          }else{
            //这是对象
            result[i] = {}；
          }
          deepCopy(original[i],result[i])；
        }else{
          result[i] = original[i]；  //一般数据直接拷贝
        }
     }
     return result;
 }

3.哪些属性可以继承？

可以继承：font-size,font-family,color
不可以继承：border,padding,margin,width,height

4.css3新增伪类有哪些

p:frist-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素的唯一元素
p:only-child 选择属于其父元素的唯一子元素
p:only-child(2) 选择属于其父元素的第二个子元素
p:enabled :disabled 表单控件的禁用状态
p:checked 单选框或复选框被选中

5.设置元素浮动后，该元素的display值是多少？

自动变成display:block

6.使用CSS预处理器吗？

Less sass

7.line-height

行高是指一行文字的高度,具体说是两行文字间基线的距离
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行的垂直居中，其实也可以把height删除
多行文本垂直居中：需要设置display属性为inline-block

8.style标签写在body后与body前有什么区别？

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

9.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

1.参数是scroll时候，必会出现滚动条。
2.参数是auto时候，子元素内容大于父元素时出现滚动条。
3.参数是visible时候，溢出的内容出现在父元素之外。
4.参数是hidden时候，溢出隐藏。

10.栈和堆的区别？

栈: 有编译器自动分配释放，存放函数的参数值，局部变量等
堆：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放

11.什么是跨域问题，如何解决跨域问题？

因为游览器有同源策略，如果协议（Http或者https）不同、端口不同、主机不同，三者满足其一即产生跨域，跨域问题的解决方案最优的是cors

12.call和apply

call()方法和apply()方法的作用相同，动态改变某个类的某个方法的运行环境。他们的区别在于接收参数的方式不同，在使用call()方法时，传递给函数的参数必须逐个列举出来，使用apply()方法时，传递函数的是参数数组

13.回流和重绘

当渲染树中的一部分（或全部）因为元素的规模尺寸、布局，隐藏等改变而需要重新构建。这就成为回流（reflow）。每个页面至少需要一次回流，就是在页面第一次加载的时候。
在回流的时候，浏览器会使渲染树中收到影响的部分失效，并重新构造这部分渲染树。完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。