本篇博客是根据别人的面经整理的答案,差不多都是百度的,自己用来复习。

  1. vue的生命周期
  2. VueCli代理跨域的本质是什么
  3. 项目中遇到跨域问题怎么解决的
  4. es6的const和let,const声明引用属性能改吗,为什么
  5. Promise是什么?如果我有五个请求,想等他们都请求完毕怎么办
  6. loader和plugin的区别,treeshaking是什么
  7. vue的数据双向绑定是怎么实现的

★vue的生命周期
在这里插入图片描述
vue实例有完整的生命周期,vue实例从创建到销毁的过程就是vue的生命周期。每一个组件或者实例都会经历一个完整的生命周期。总共分为三个阶段:初始化、运行中、销毁

  1. 组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作。
  2. 挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。
  3. 接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
  4. 接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情
  5. 当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿
  6. 当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的dom
  7. 当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等
  8. 组件的数据绑定、监听…去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以

★VueCli代理跨域的本质是什么
在这里插入图片描述
changeOrigin:true会在本地建立一个虚拟服务器,然后发送请求的数据,并同时接收请求的数据,这样服务器和服务器之间进行数据的交互就不存在跨域问题。
pathWrite:替换target中的请求地址。

注意:这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题

★项目中遇到跨域问题怎么解决的

在使用vue开发的时候,开始为了解决跨域问题。采用的是CORS(Cross-origin resource sharing)。后台在响应头中添加Access-Control-Allow-Origin。这样就可以跨域调后台接口了。 无意中在网上看到在config的index.js文件中有一个proxyTable属性,通过配置可以解决开发环境的跨域。就试了一下:

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {  //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段
          '^/api': ''
        }
      }
    }
  }
}

★es6的const和let,const声明引用属性能改吗,为什么
先总结var和let的区别:

  1. es6新增里let命令,可以用来声明变量,它的用法类似于var,但let命令声明的变量只在let命令所在的代码块内有效。

  2. var声明的变量有变量提升现象,即变量可以在声明之前使用,值为undefined。let声明的变量无变量提升现象,即变量必须先声明再使用,否则会报错。

  3. 只要在块级作用域内存在let声明的变量,这个变量会被绑定在这个作用域,不会受外部影响。
    var tmp=123; if(true){ tmp=456; let tmp; }
    这样写会报错。因为:let声明的tmp变量绑定在了if的代码块内,但是let命令声明的变量只能在变量声明后面使用,所以会报错。
    总之,在代码块内,使用let声明的变量之前,该变量都是不可用的,这在语法上称为“暂时性死区”

  4. let不允许在同一代码块内重复声明,会报错。var这样声明则不会报错。

const声明引用属性能改吗,为什么:
const是用来定义常量的,而且定义的时候必须初始化,否则会报错。const定义的基本数据类型的变量值不能修改,但用const定义的引用数据类型的变量是可以修改的。
在这里插入图片描述
P对象的name属性确实被修改了,这个现象怎么解释呢?
因为P对象是引用数据类型的,P中保存的仅仅是对象的指针,这就意味着const只保证指针不发生变化就行了,修改对象的属性不会修改指向对象的指针,所以是被允许的。也就是说const定义的引用类型的变量,只要指针不发生变化,其他不论如何改变都是允许的。
如果将上面写成

const P={name:'wws',age:25};
P={name:'jfjc',age:25};

这样就会报错,因为这样修改的是指向对象的指针,会报错。

★Promise是什么?如果我有五个请求,想等他们都请求完毕怎么办
promise是什么:
Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行

    function loadImg(src){
        var promise=new Promise(function(resolve,reject){
            var img=document.createElement("img");
            img.onload=function(){
                resolve();
            };
            img.onerr=function(){
                reject();
            }
            img.src=src;
        });
        return promise
    };
    var src1 = "https://i04picsos.sogoucdn.com/a64beecbeacd7e58";
    result1 = loadImg(src1);
    var src2 = "https://i04picsos.sogoucdn.com/08bace7dedbf47e0";
    result2 = loadImg(src2);
    Promise.all([result1,result2]).then(function(datas){
        //datas是一个数组,依次包含多个promise返回的内容
        console.log(datas[0]);
        console.log(datas[1]);
    });

★loader和plugin的区别,treeshaking是什么
loaede
在这里插入图片描述

★vue的数据双向绑定是怎么实现的
vue的数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的。
首先看vue是如何进行数据劫持的:

var vm = new Vue({
    data: {
        obj: {
            a: 1
        }
    },
    created: function () {
        console.log(this.obj);
    }
});

从输出的信息中可以看出:属性a有两个相对应的get方法和set方法,因为vue是通过Obj.defineProperty()方法来实现数据劫持的。
Obj.defineProperty()方法可以控制对象属性的读写权,数据双向绑定就是通过它的属性值get和set实现的。

平时我们也可以使用这个属性来做一些好玩的事。

var Book = {
  name: 'vue权威指南'
};
console.log(Book.name);  // vue权威指南

如果想要在执行console.log(book.name)的同时,直接给书名加个书名号,那要怎么处理呢?或者说要通过什么监听对象 Book 的属性值。这时候Object.defineProperty( )就派上用场了,代码如下:

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
    set: function (value) {
        name = value;
        console.log('你取了一个书名叫做' + value);
    },
    get: function () {
        return '《' + name + '》'
    }
})
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

我们通过Object.defineProperty( )设置了对象Book的name属性,对其get和set进行重写操作,顾名思义,get就是在读取name属性这个值触发的函数,set就是在设置name属性这个值触发的函数,所以当执行 Book.name = ‘vue权威指南’ 这个语句时,控制台会打印出 “你取了一个书名叫做vue权威指南”,紧接着,当读取这个属性时,就会输出 “《vue权威指南》”,因为我们在get函数里面对该值做了加工了。set同理。
实现MVVM主要实现:数据变化更新视图,视图变化更新数据。

Logo

前往低代码交流专区

更多推荐