前言 本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 如果对原理感兴趣的同学 欢迎查看小编的手写 Vue 源码系列文章 如果对答案有不一样见解的同学欢迎评论区补充讨论 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可(进群免费领取 Vue2 源码思维导图哈) 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢! 简单 1 MVC 和 MVVM 区别 MVC MVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范 Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据 View(视图):是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的 Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据 MVC 的思想:一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来,换句话说就是在 Controller 里面把 Model 的数据赋值给 View。 MVVM MVVM 新增了 VM 类 ViewModel 层:做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。 MVVM 与 MVC 最大的区别就是:它实现了 View 和 Model 的自动同步,也就是当 Model 的属性改变时,我们不用再自己手动操作 Dom 元素,来改变 View 的显示,而是改变属性后该属性对应 View 层显示会自动改变(对应Vue数据驱动的思想) 整体看来,MVVM 比 MVC 精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作 DOM […]
View Details前言 Hello 大家好 我是鲨鱼哥 这次给大家带来的是我曾经非常嫌弃 如今却爱不释手的 TS 技术 哈哈 大家看往期文章可能已经发现鲨鱼哥之前主要是 Vue 技术栈的 然后因为 Vue2 和 TS 的结合总感觉不是很丝滑 所以我果断就在技术选型的时候去掉了 TS(其实我是觉得用起来很烦 和我之前最讨厌的 eslint 一样 各种报错让人不爽)但是 鲨鱼哥今年换了新公司 开启了全新的 react hook+ts 这一套组合拳 然后在重新认真学习并在项目里用上了 ts 之后 确实真香 哈哈 最直观的感受就是可以帮我们规避很多类型错误 更友好的提示 甚至有些方法我们根据定义的类型大概就知道作用是什么了(去掉了写注释的麻烦)况且如今大火的 Vue3 也是 TS 重构的 然后 react 和 ts 的结合就更不必说了 所以还没有开始 ts 的同学就从现在开始跟着鲨鱼哥一起来学习吧 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢! 1 ts 安装和编译 第一步 新建一个空文件夹用来学习 ts 第二步 全局安装 ts 和 ts-node
1 2 |
cnpm i typescript -g //全局安装ts cnpm i -g ts-node //全局安装ts-node |
第三步 生成 tsconfig.js 配置文件
1 |
tsc --init |
我们就先按照自动生成的 tsconfig 配置项去使用 里面的配置咱们可以先不去管他 后续熟练了再去配置 第四步 在项目下新建一个index.ts 直接写入
1 2 |
const a: string = "hello"; console.log(a); |
[…]
View Details功能 轮播 搜索 列表 懒加载 简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件 基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址:https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子 基于类的写法加上静态类型检查,简直不能再嗨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script lang="ts"> import Vue from "vue"; import Component from "vue-class-component"; import { State } from "vuex-class"; @Component export default class Shops extends Vue { @State shops: StoreState.shop[]; @State searchVal: string; get shopList(): StoreState.shop[] { const shops = this.shops; const searchVal = this.searchVal; return shops.filter( (el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1 ); } } </script> |
为什么使用TypeScript JavaScript的超集 支持所有原生JavaScript的语法 强类型语言 现在很多主流语言都是强类型的,而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后,将会在代码调试、重构等步骤节省很多时间。 比如说:函数在返回值的时候可能经过复杂的操作,那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后,直接就可以看到函数的返回值结构,将会非常的方便 强大的IDE支持 现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持,主要体现在智能提示上,非常的方便 可运行于任何浏览器、计算机、操作系统 强大的编译引擎 迭代更新快 不断更新,提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言,而Google的Angular使用的就是TypeScript,所以不用担心会停止维护,至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高 截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右,这个数字将近是vue下载量的10倍,可见TypeScript还是非常受欢迎的 TypeScript配置 本项目已经配置完毕,这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader,这是TypeScript为Webpack提供的编译器,类似于babel-loader
1 |
npm i ts-loader -D |
接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.tsx?$/, exclude: /node_modules/, use: [ "babel-loader", { loader: "ts-loader", options: { appendTsxSuffixTo: [/\.vue$/] } } ] } |
2. tsconfig.json 创建tsconfig.json文件,放在根目录下,和package.json同级 配置内容主要也看个人需求,具体可以去typescript的官网查看,但是有一点需要注意: 在Vue中,你需要引入 strict: true (或者至少 noImplicitThis: true,这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查,否则它会始终被看作 any 类型。 这里列出我的配置,功能在注释中给出
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
{ "include": [ "src/*", "src/**/*" ], "exclude": [ "node_modules" ], "compilerOptions": { // types option has been previously configured "types": [ // add node as an option "node" ], // typeRoots option has been previously configured "typeRoots": [ // add path to @types "node_modules/@types" ], // 以严格模式解析 "strict": true, // 在.tsx文件里支持JSX "jsx": "preserve", // 使用的JSX工厂函数 "jsxFactory": "h", // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 启用装饰器 "experimentalDecorators": true, "strictFunctionTypes": false, // 允许编译javascript文件 "allowJs": true, // 采用的模块系统 "module": "esnext", // 编译输出目标 ES 版本 "target": "es5", // 如何处理模块 "moduleResolution": "node", // 在表达式和声明上有隐含的any类型时报错 "noImplicitAny": true, "lib": [ "dom", "es5", "es6", "es7", "es2015.promise" ], "sourceMap": true, "pretty": true } } |
3. 修改main.js 把项目主文件main.js修改成main.ts,里面的写法基本不变,但是有一点需要注意: 引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到 把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件,所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件,建议放在src目录下再创建一个typings文件夹,把这个声明文件放进去,如:src/typings/vue-shims.d.ts,文件内容: *.d.ts类型文件不需要手动引入,TypeScript会自动加载
1 2 3 4 |
declare module '*.vue' { import Vue from 'vue' export default Vue } |
到这里TypeScript在Vue中配置就完成了,可以愉快的撸代码了~ 第三方插件库 现在Vue官方已经明确提出支持TypeScript,并考虑出一个对应的vue-cli,在这之前,Vue开发团队已经开发出了一些插件库来支持TypeScript,这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器,写法比较扁平化。Vue对其做到完美兼容,如果你在声明组件时更喜欢基于类的 API,这个库一定不要错过 ps:用了这个装饰器之后写方法不需要额外加逗号,贼嗨~~~
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import Vue from "vue"; import Component from "vue-class-component"; @Component export default class App extends Vue { name:string = 'Simon Zhang' // computed get MyName():string { return `My name is ${this.name}` } // methods sayHello():void { alert(`Hello ${this.name}`) } mounted() { this.sayHello(); } } |
[…]
View Details