前端日记

面试官：说说如何在Vue项目中应用TypeScript？ 一、前言与link类似 在VUE项目中应用typescript，我们需要引入一个库vue-property-decorator， 其是基于vue-class-component库而来，这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库 主要的功能如下： methods 可以直接声明为类的成员方法 计算属性可以被声明为类的属性访问器 初始化的 data 可以被声明为类属性 data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法 所有其他属性，需要放在装饰器中 二、使用vue-property-decorator 主要提供了多个装饰器和一个函数: @Prop @PropSync @Model @Watch @Provide @Inject @ProvideReactive @InjectReactive @Emit @Ref @Component (由 vue-class-component 提供) Mixins (由 vue-class-component 提供) @Co ...

面试官：vue项目本地开发完成后部署到服务器后报404是什么原因呢？ 一、如何部署前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可 我们知道vue项目在构建后，是生成一系列的静态文件 常规布署我们只需要将这个目录上传至目标服务器即可 12// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径scp dist.zip user@host:/xx/xx/xx 让web容器跑起来，以nginx为例 12345678server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; }} 配置完成记得重启nginx 12345// 检查配置是否正确nginx -t // 平滑重启nginx -s reload 操作完后就可以在浏览器输入域名进行访问了 当然上面只是提到最简单也是最直接的一种布署方式 什么自动化，镜像， ...

面试官：Vue项目中有封装过axios吗？主要是封装哪方面的？ 一、axios是什么axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF 基本使用安装 1234// 项目中安装npm install axios --S// cdn 引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 导入 1import axios from 'axios' 发 ...

面试官：你了解axios的原理吗？有看过它的源码吗？ 一、axios的使用关于axios的基本使用，上篇文章已经有所涉及，这里再稍微回顾下： 发送请求 1234567891011121314import axios from 'axios';axios(config) // 直接传入配置axios(url[, config]) // 传入url和配置axios[method](url[, option]) // 直接调用请求方式方法，传入url和配置axios[method](url[, data[, option]]) // 直接调用请求方式方法，传入data、url和配置axios.request(option) // 调用 request 方法const axiosInstance = axios.create(config)// axiosInstance 也具有以上 axios 的能力axios.all([axiosInstance1, axiosInstance2]).then(axios.spread(response1, response2))// ...

面试官：双向数据绑定是什么 一、什么是双向绑定我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子 当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下 二、双向绑定的原理是什么我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成 数据层（Model）：应用的数据及业务逻辑 视图层（View）：应用的展示效果，各类UI组件 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来 而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理 理解ViewModel它的主要职责就是： 数据变化后更新视图 视图变化后更新数据 当然，它 ...

面试官：Vue组件之间的通信方式都有哪些？ 一、组件间通信的概念开始之前，我们把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI框架中的table组件，可能会往table组件中传入某些数据，这个本质就形成了组件之间的通信 二、组件间通信解决了什么在古代，人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递，到了今天，随着科技水平的飞速发展，通信基本完全利用有线或无线电完成，相继出现了有线电话、固定电话、无线电话、手机、互联网甚至视频电话等各种通信方式从上面这段话，我们可以看到通信的本质是信息同步，共享回到vue中，每个组件之间的都有独自的作用域，组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统 二、组件 ...

面试官：Vue中组件和插件有什么区别？ 一、组件是什么回顾以前对组件的定义： 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级 二、插件是什么插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种： 添加全局方法或者属性。如: vue-custom-element 添加全局资源：指令/过滤器/过渡等。如 vue-touch 通过全局混入来添加一些组件选项。如 vue-router 添加 Vu ...

面试官：Vue项目中你是如何解决跨域的呢？ 一、跨域是什么跨域本质是浏览器基于同源策略的一种安全手段 同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能 所谓同源（即指在同一个域）具有以下三个相同点 协议相同（protocol） 主机相同（host） 端口相同（port） 反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域 一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。 二、如何解决解决跨域的方法有很多，下面列举了三种： JSONP CORS Proxy 而在vue项目中，我们主要针对CORS或Proxy这两种方案进行展开 CORSCORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应 CORS 实 ...

面试官：为什么data属性是一个函数而不是一个对象？ 一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象，也可以是一个函数 12345678910111213const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }}) 组件中定义data属性，只能是一个函数 如果为组件data直接定义为一个对象 123456Vue.component('component1',{ template:`<div>组件</div>`, data:{ foo:"foo"
...

面试官：动态给vue的data添加一个新的属性时会发生什么？怎样解决？ 一、直接添加属性的问题我们从一个例子开始 定义一个p标签，通过v-for指令进行遍历 然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行 1234<p v-for="(value,key) in item" :key="key"> {{ value }}</p><button @click="addProperty">动态添加新属性</button> 实例化一个vue实例，定义data属性和methods方法 1234567891011121314const app = new Vue({ el:"#app", data:()=>{ item:{ oldProperty:"旧属性" &# ...