前端面试vue 1. vue-model原理： 2. vue的传参方式 1.第一种方法页面刷新数据不会丢失需要对应路

vue

1. vue-model原理：

v-model是vue的一个语法糖，一个是v-bind去单项绑定vue实例里面的data数据，然后再通过各种事件比如@change @input等去进行触发事件修改实例数据的值。

2. vue的传参方式

1.第一种方法页面刷新数据不会丢失

//直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })

需要对应路由配置如下：

{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }

2.params传参（页面刷新数据会丢失）

3.query传参（页面刷新数据不会丢失）

3.vue的动态路由

主要利用addRoutes，可参照segmentfault.com/a/119000001…

4.vue的生命周期

beforeCreate中拿不到任何数据，它在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created中已经可以拿到data中的数据了，但是dom还没有挂载。会判断有无el，如果没有el则停止后面的模板挂载。

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

使用场景:ajax请求和页面初始化
beforeMount 和 created 拿到的数据相同在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted中el被创建dom已经更新，vue实例对象中有template参数选项，则将其作为模板编译成render函数，编译优先级render函数选项 > template选项

使用场景:常用于获取VNode信息和操作，ajax请求

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
由于beforeUpdate和updated使用的比较少，一般用计算属性和watch代替所以在此不在说明
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

5.vue key值的作用

key的作用主要是为了高效的更新虚拟DOM

保证某个元素的 key 在其同级元素中具有唯一性。在 Diff 算法中会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染

key的作用主要是为了更高效的对比虚拟DOM中每个节点是否是相同节点;
Vue在patch过程中判断两个节点是否是相同节点,key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，Vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能;
从源码中可以知道，Vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key,它的值就是undefined，则可能永远认为这是两个相同的节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的

6.Watch 属性以及computed属性的区别

计算属性computed :

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

侦听属性watch：

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

总结：

1.如果一个数据依赖于其他数据，那么把这个数据设计为computed的

2.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

js及浏览器相关

1.promise以及async的区别

1.promise

ECMAScript 6 新增的引用类型 Promise，可以通过 new 操作符来实例化。创建新期约时需要传入执行器（executor）函数作为参数。

1.用法

promise有三个状态，分别是pending（执行中）、success（成功）、rejected（失败）：

let n = new Promise((resolve,reject) => {
        //...
        resolve('123')
    });
    
    n.then(result => {
        console.log(result);//123
    });

复制代码

无论 resolve()和 reject()中的哪个被调用，状态转换都不可撤销了。于是继续修改状态会静默失败，如下所示：

    let p = new Promise((resolve, reject) => {
            resolve(); 
            reject(); // 没有效果 
           });
复制代码

为避免期约卡在待定状态，可以添加一个定时退出功能。比如，可以通过 setTimeout 设置一个 10 秒钟后无论如何都会拒绝期约的回调:

   let p = new Promise((resolve, reject) => { 
           setTimeout(reject, 10000); // 10 秒后调用 reject() // 执行函数的逻辑 
         });
         
           setTimeout(console.log, 0, p); // Promise <pending>
           setTimeout(console.log, 11000, p); // 11 秒后再检查状态
复制代码

2.Promise.prototype.finally()

Promise.prototype.finally()方法用于给期约添加 onFinally 处理程序，这个处理程序在期约转换为解决或拒绝状态时都会执行。这个方法可以避免 onResolved 和 onRejected 处理程序中出现冗余代码。但 onFinally 处理程序没有办法知道期约的状态是解决还是拒绝，所以这个方法主要用于添加清理代码。

3.async await

它可以把一个异步函数强制的处理成为一个同步函数，就很厉害，他本质也是promise，衍生出来的语法糖，写起来更优雅。async和await是配对使用的！！！！这点谨记，少任何一个都会报错

 //不加async await
async function foo () {
  await Promise.resolve().then(resolve => {
    console.log("1");
  });
  console.log(3);
}
foo();
复制代码

 //加了async await
async function foo () {
  await Promise.resolve().then(resolve => {
    console.log("1");
  });
  console.log(3);
}
foo();
复制代码

3.区别

async/await 是建立在 Promises上的，不能被使用在普通回调以及节点回调

async/await相对于promise来讲，写法更加优雅

async/await 和 Promises 很像，不阻塞

async/await 代码看起来像同步代码

5.cookies有效时常设置

1. 使用Cookie的: Expires 属性. 它可以设置cookie的过期时间. 下面的代码表示id这条cookie的过期时间是2015年10月21日早上7点28分;

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

2. 使用Cookie的: Max-Age 属性. 它可以指定从现在开始Cookie存在的秒数. 秒数过完则cookie过期.

Set-Cookie: id=a3fWa; Max-Age=86400

6.浏览器缓存

参照

7.Http缓存

参照

8.浏览器本地存储

参照

数据解构

1.五大排序

参照

2.二叉树

参照

前端面试

vue