61.vue组件化和模块化，工程化
工程化是一种思想而不是某种技术
组件和模块的定位不同。
组件一般用于前端，模块化在后台运用的比较多。
例如：vue中的组件，主要是为了拆分vue实例的代码量，让我们可以以不同的组件来划分不同的功能模块，将来我们需要什么样的功能，就直接调用对应的组件即可。
区别：
组件化：主要从ui界面上进行划分。例如前端的组件化，方便ui组件的调用。
模块化：主要从代码逻辑的角度进行划分，方便代码分层开发，保证每个功能模块职责单 一。
总结：
组件封装视图
模块化封装功能
62.Vue.js的两个核心
核心思想是：数据驱动、组件系统。
组件的核心选项:
| 模板（template） | 模板声明了数据和最终展现给用户的DOM之间的映射关系。 |
| 初始数据（data） | 一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。 |
| 接受的外部参数(props) | 组件之间通过参数来进行数据的传递和共享。 |
| 方法（methods） | 对数据的改动操作一般都在组件的方法内进行。 |
| 生命周期钩子函数（lifecycle hooks） | 一个组件会触发多个生命周期钩子函数 |
| 私有资源（assets） | Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。 |
63.第一次页面加载的时候触发的钩子函数
beforeCreate, created, beforeMount, mounted
64、使用插件时，scoped穿透。
65、v-for的key值：
加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果，提高性能。
66、Vue的常用修饰符
1.事件修饰符
vue为v-on提供了事件修饰符，通过点(.)表示的指令后缀来调用修饰符。
.stop
阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()
使用了.stop后，点击子节点不会捕获到父节点的事件
例如：
.prevent
防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），等同于JavaScript中的event.preventDefault()，用于取消默认事件。
使用了.prevent后，点击a标签之后就不会执行a标签的跳转事件
例如：
.capture
与事件冒泡的方向相反，事件捕获由外到内,捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内 父节点-》子节点的点击事件
先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发
例如：
.self
只会触发自己范围内的事件，不包含子元素
.once
只执行一次，如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次
.passive
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符
这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住：.passive 会告诉浏览器你不想阻止事件的默认行为。
事件修饰符还可以串联
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
- 键盘修饰符
- 鼠标按钮修饰符
67、v-on绑定多个属性
68、Vue清除浏览器的缓存
在打包的时候给每个打包文件加上hash 值
69、Vue路由的模式
实际上存在三种模式：
| Hash | 使用URL的hash值来作为路由。支持所有浏览器。 |
| History | 以来HTML5 History API 和服务器配置。 |
| Abstract | 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。 |
区别：
| hash |
|
| history | 随着history api的到来，前端路由开始进化了，前面的hashchange，你只能改变 #后面的url片段，而history api则给了前端完全的自由history api可以分为两大部分：切换和修改 （1）切换历史状态 包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作 （2）修改历史状态 包括了pushState、replaceState两个方法，这两个方法接收三个参数：stateObj，title，url （3）popstate实现history路由拦截，监听页面返回事件 当活动历史记录条目更改时，将触发popstate事件。 |
70、vuex的State特性是？
stae就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）
71、vuex的优势
Vuex是状态管理工具，核心是响应式的做到数据管理, 一个页面发生数据变化。动态的改变对应的页面。所以兄弟之间组件有大量通信的，建议一定要用VUEX，不管大项目和小项目
72、Vue中如何实现按需加载，懒加载
| vue异步组件技术==== 异步加载 | vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 。但是,这种情况下一个组件生成一个js文件 |
| es提案的import() | 推荐使用 |
| webpack提供的require.ensure() | 多个路由指定相同的chunkName，会合并打包成一个js文件。 |
73、vuex概述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块（属性/状态）：
| State | 定义了应用状态的数据结构，可以在这里设置默认的初始状态。 |
| Getter | 允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。 |
| Mutation | 是唯一更改 store 中状态的方法，且必须是同步函数。 |
| Action | 用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。 |
| Module | 允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。 |
怎么使用Vuex
Vuex同步更改store数据
- 在state中存储全局数据
- 在template中用模板语法渲染全局数据
- 通过commit提交到mutation
- 在mutation中更改State的数据
- State更改了，那么多个组件就更改了
Vuex异步更改store数据
- 通过dispatch触发actions
- 在actions中通过axios发送数据请求
3、通过commit提交到mutation
4、在mutation中更改State的数据
5、State更改了，那么多个组件就更改了
74、对keep-alive的了解?
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
场景描述：
用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。
keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态
特性：
- 一般结合路由和动态组件一起使用，用于缓存组件；
- 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
- 对应两个钩子函数 activated 和 deactivated（当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。）
75、对Webpack的了解?
Webpack是静态模块打包工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等。目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。
76、什么是token
Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
优势：
- 无状态、可扩展
- 安全性
- 可扩展性
- 多平台跨域
- 基于标准
77、v-model 的原理？
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
- 如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件
78、html语义化是什么？
1、有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）便于项目的开发及维护
2、使html代码更具有可读性，便于其他设备解析。
79、性能优化
雪碧图、图片精灵、图片压缩、懒加载、使用v-show，遍历加上key
80、Vue的优点（轻、简、双、组、视、虚、运）
1、轻量级框架 2、简单易学 3、双向数据绑定 4、组件化
5、视图，数据，结构分离 6、虚拟DOM 7、运行速度更快
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
