面试笔记-3

Computed 和 watch区别

计算属性computed :

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

侦听属性watch：

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

css的scope

实现原理

采用 PostCSS 转义实现。

PostCSS 给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给 CSS 选择器额外添加一个对应的属性选择器来选择该组件中 dom ，这种做法使得样式只作用于含有该属性的 dom ——组件内部 dom。

1
2
3

<p class="example" data-v-5558831a>hi</p>

.example[data-v-5558831a] {}

交换两变量的值

解构

var a = 10;
var b = 20;

[b, a] = [a, b];

// a => 20
// b => 10

弱类型

var a = 10;
var b = 20; 

a = [a, b]; // 让 a 变成数组

b = a[0]; // 先取出 b

a = a[1]; // 再覆盖 a

计算

var a = 10;
var b = 20;

a = a + b; // 30

b = a - b; // b = 30 - 20

a = a - b; // a = 30 - 10

vue中route和router区别

1、$route对象

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

2、$router对象

$router对象是全局路由的实例，是router构造方法的实例。

push：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
go：页面路由跳转
replace：替换当前页，并且不会向history添加记录（一般用于404页面）

history和hash

hash

hash 也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。

由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制

history

　首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。（而且少了#，但是怕刷新）

restFul

restful其实就是一套编写接口的协议，协议规定如何编写以及如何设置返回值、状态码等信息。（面向资源软件架构风格）
最显著的特点：
- restful: 给用户一个url，根据method不同在后端做不同的处理，比如：post 创建数据、get获取数据、put和patch修改数据、delete删除数据。
- no rest: 给调用者很多url，每个url代表一个功能，比如：add_user/delte_user/edit_user/

js的new过程

es5

function Person(name) {
     //构造函数里面的方法和属性
    this._name = name;
    this.getName = function () {
         console.log(this._name);
     };
     this.setName = function (name) {
         this._name = name;
     };
 }

es6

new过程中会新建对象，此对象会继承构造器的原型与原型上的属性，最后它会被作为实例返回

以构造器的prototype属性为原型，创建新对象；
将this(也就是上一句中的新对象)和调用参数传给构造器，执行；
如果构造器没有手动返回对象，则返回第一步创建的新对象，如果有，则舍弃掉第一步创建的新对象，返回手动return的对象。

new过程.png

function mynew(Func, ...args) {
    // 1.创建一个新对象
    const obj = {}
    // 2.新对象原型指向构造函数原型对象
    obj.__proto__ = Func.prototype
    // 3.将构建函数的this指向新对象
    let result = Func.apply(obj, args)
    // 4.根据返回值判断
    return result instanceof Object ? result : obj
}

多态

多态的具体表现为方法重载和方法重写：

方法重载：重载是指不同的函数使用相同的函数名，但是函数的参数个数或类型不同。调用的时候根据函数的参数来区别不同的函数

方法重写：重写（也叫覆盖）是指在派生类中重新对基类中的虚函数（注意是虚函数）重新实现。即函数名和参数都一样，只是函数的实现体不一样

vuex挂载到每个组件实例上的过程

1.首先在项目中通过 npm install vuex –save 时调用了vuex中的install方法，在install方法中有一段核心代码，vue.mixin({beforeCreate,vuexInit}), 通过vue中的mixin机制，然后再借用生命周期钩子函数beforeCreate在组件实例化前调用vuexInit方法，

在vuexInit方法中有一段核心代码，this.$store = typeof options.store === ‘function’? options.store(): options.store ，

通过这段代码，将vuex中的store对象挂载到每一个对象当中，this指向的即是每一个组件实例，这样就可以在每个组件内通过this.$store使用vuex来进行统一的数据管理

requestAnimationFrame

因为setTimeout在低端机会出现卡顿、抖动：因为被放进一步队列，所以实际执行时间会比设定晚一点。还有因为固定的刷新时间，不同分辨率和屏幕尺寸会收到影响
requestAnimationFrame优点
- 经过浏览器优化，动画更流畅。由系统来决定回调函数的执行时机
- 窗口没激活时，动画将停止，省计算资源
- 更省电，尤其是对移动终端