Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
- 数据join法：曾几何时非常流行，前端必会
- ES6的反引号法：ES6中新增的
`${a}`语法糖，非常好用
- 模板引擎：解决数据变为视图的最优雅的方法
===============================================================================
-
mustache是"胡子"的意思，因为它的嵌入标记**{{}}**非常像胡子
-
{{}}的语法也被Vue沿用
- mustache是最早的模板引擎库，诞生早于Vue，它的底层实现机理在当时非常有创造性，轰动性，为后续模板引擎的发展提供了崭新的思路
-
必须要引入mustache库，可以在bootcdn.com找到它
-
mustache的模板语法非常简单，比如前述案例的模板语法如下：
#arr表示开始循环arr数组，/arr表示arr数组循环结束，内部使用元素直接使用键进行标识即可。
2.2.1 循环对象数组
templateStr：模板字符串
data：数据
2.2.2 不循环
2.2.3 循环简单数组
循环简单数组使用.标识每一项数据
2.2.4 数组可以嵌套
2.2.5 布尔值
可以通过#temp中temp的bool值来决定内部内容是否显示
===================================================================================
- 在较为简单的示例情况下，可以用正则表达式实现
模板字符串：
数据：
模拟实现：
字符串的replace方法，可以第一个参数接收一个正则，第二个参数接收一个函数，有四个参数。
第一个参数代表正则匹配的部分，第二个参数代表()中捕获到的内容，第三个参数代表位置，第四个参数代表源字符串
- 但是在情况复杂时，正则表达式的思路肯定就不行了。比如这样的模板字符串，是不能用正则表达式的思路实现的
模板字符串：
-
tokens是一个JS的嵌套数组，说白了，就是模板字符串的JS表示
-
它是"抽象语法树"、"虚拟节点"等等的开山鼻祖
模板字符串：
tokens：
tokens是将字符串转换成了JS的嵌套数组，如果是纯文本（包括HTML标签），会被标识为text
如果是带有双括号（{{}}）的参数，会被标识为name
- 当模板字符串中有循环存在时，它将被编译为嵌套更深的tokens
- 当循环是双重的，那么tokens会更深一层
mustache库底层重点要做两个事情：
-
将模板字符串编译为tokens形式
-
将tokens结合数据，解析为dom字符串
把256行这里
改为
===============================================================================
4.1 使用webpack和webpack-dev-server构建
- 模块化打包工具有webpack（webpack-dev-server）、rollup、Parcel等
-
mustache官方库使用rollup进行模块化打包，而我们使用webpack（webpack-dev-server）进行模块化打包，这是因为webpack（webpack-dev-server）能更方便的在浏览器中（而不是nodeJS环境中）实时调试程序，相比nodeJS控制台，浏览器控制台更好用，比如能够点击展开数组的每一项
-
生成库是UMD的，可以同时在nodeJS环境中使用，也可以在浏览器环境中使用。实现UMD不难，只需要一个**"通用头"**即可
4.2 注意webpack和webpack-dev-server的版本
webpack最新版是5，webpack-dev-server最新版是4，但是目前最新版兼容成都不好，建议使用如下版本：
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
const path = require('path');
module.exports = {
mode: 'development',
entry: './index.js',
output: {
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, 'www'),
compress: false,
port: 8080,
// 虚拟打包的路径，bundle.js文件没有真正的生成
publicPath: '/xuni/'
}
}
- 学习源码时，源码思想要借鉴，而不要抄袭。
要能够发现源码中书写精彩的地方。
-
将独立的功能拆分为独立的js文件中完成，通常是一个独立的类，每个单独的功能必须能独立的"单元测试"。
-
应该围绕中心功能，先把主干完成，然后修剪枝叶。
-
功能并不需要一步到位，功能的拓展要一步步完成，有的非核心功能甚至不需要实现。
4.7.1 栈是什么
粗浅的完成简单的目标：
不带有#标记
-
#标记的tokens，需要递归处理它的下标为2的小数组
-
现在遇到一个问题，JS不认识点符号
===============================================================
项目目录
index.html
Document
