常用知识

1,数据双向绑定

它的核心是通过object.definedProperty对data的每个属性进行了get,set的拦截
观察者模式： 使得双向绑定更有效率。其一对多模式（改了一个地方，多个地方做改动）
在读取数据的时候触发了getter函数，在该函数中对依赖做收集，用订阅器收集依赖
在设置属性值时触发了setter函数，在该函数中遍历依赖，并执行update方法
以上是监听数据的变化并通知到watch订阅者
compile: 指令解析器，主要作用是把vue绑定的dom节点，遍历该节点的所有子节点，找到相应的指令，如果指令为元素节点，则对这个元素添加监听事件（v-on:addEventListener(‘click’), v-model:addEventListener(‘input’)）,接着初始化模板元素，创建一个watcher绑定这个元素节点。如果指令为文本节点即{{data}},则用正则取出data,然后var initText = this.vm[exp],用initText代替其中的data

先初始化一个监听器Observer，用于监听该对象data属性的值。
然后初始化一个解析器Compile，绑定这个节点，并解析其中的v-，" {{}} "指令，（每一个指令对应一个Watcher）并初始化模板数据以及初始化相应的订阅者，并把订阅者添加到订阅器中（Dep）。这样就实现双向绑定了。

实现一个mvvm主要通过Observer,Compile,Watcher
1,Observer实现对mvvm自身model数据劫持，监听数据的属性变更，并在变动时进行notify
2,Compile实现指令解析，初始化视图，并订阅数据变化，绑定好更新函数
3，Watcher一方面接受Observer通过dep传递过来的数据变化，一方面通知Compile进行view update
具体步骤：
第一步：通过object.definedProperty对data的每个属性进行了get,set的拦截,实现对数据的监听
第二步：compile指令解析器，将模板中的变量替换为数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，在数据变动时会收到通知更新视图
第三步：在自身实例化的时候向属性订阅器中添加自己，并绑定update方法，待属性变动时调用自身的update,并触发compile节点上绑定的回调

1 .observer(数据监听器/观察者)：用来实现对vue的data中定义的每个属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知watcher（订阅者），watcher会触发它的update方法，对视图进行更新。
2.指令解析器Compile: 对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，并绑定相应的更新函数。
3 .订阅者：
连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
在vue中v-model，v-name，{{}}等都可以对数据进行显示，假如一个属性同时绑定了这三个指令，那么当这个属性值改变时，这三个指令对应的html视图都要改变。每当用到这样一个指令，就在Dep中增加一个订阅者。订阅者只是更新自己的指令对应的数据，也就是 v-model=‘name’ 和 {{name}} 有两个对应的订阅者，各自管理自己的地方。
4.消息订阅器Dep:收集订阅者，数据变动后会触发notify，调用订阅者的update方法。

2，虚拟dom

核心思想时：对复杂的dom结构，提供一种方便的工具，进行最小化的dom操作
1，什么是虚拟dom: 可以看作是一个使用js模拟了DOM结构的树形结构，这个树形结构包含了整个DOm结构的信息（tag:ul,attrs:{id,class},children:[{tag…}]）
2,为什么使用：减少dom操作是前端性能优化的必要手段，vdom将Dom的对比将在了js层，通过对比不同之处来渲染dom节点，从而提高渲染效率
3，虚拟dom的渲染流程
获取数据——根据数据创建虚拟Dom——根据vdom渲染生成真实DOM(createElement)——当数据变化时生成新的VDom
4,diff算法作用：调用patch函数比较新旧vdom，将不同的内容对比出来，然后进行真实DOm的渲染，
比较只会在同层级进行比较，不会跨层级比较
若新旧子children的子节点一方有一方没有，则对旧节点做删除新增操作，当新旧节点的children均为多个子节点时，调用核心diff算法，同层级做比较，新增节点时做添加，删除节点时做删除。
key值的作用时为了尽可能的多复用dom元素，使用双端比较的方式，双端：即同时从新旧children两端开始进行比较，需要四个索引值分别指向新旧children的两端，还需要这四个索引值所指向的节点元素，比较过程如下：
if (oldStartVNode.key === newStartVNode.key) {
// 步骤一：oldStartVNode 和 newStartVNode 比对
} else if (oldEndVNode.key === newEndVNode.key) {
// 步骤二：oldEndVNode 和 newEndVNode 比对
} else if (oldStartVNode.key === newEndVNode.key) {
// 步骤三：oldStartVNode 和 newEndVNode 比对
} else if (oldEndVNode.key === newStartVNode.key) {
// 步骤四：oldEndVNode 和 newStartVNode 比对
}
找到匹配项做位置移动，以及清楚不存在元素和添加新元素
5，列表渲染加key值，为了区分在虚拟dom中的相同元素，避免相互影响
6，render函数的作用：jsx语法时不能够直接用的，render函数的作用就是将jsx语法转化为对象结构，再通过createElement生成节点，再渲染成真实dom

3，路由

hash模式：背后原理是onhashchange事件称为前端路由，只修改#/后面的内容，它的所有url会被记录在浏览器的历史记录中，因此浏览器的前进后退都可使用
history:分为切换和修改；
切换历史状态：back,forward,go方法实现
修改历史状态：可使用pushState(),replaceState()方法，pushState把页面的状态保存在state对象中，可通过event.state取到state对象

4，js原生

1, null和undefined
null：变量未定义。转为数值0。表示没有对象用法（作为函数的参数，表示函数的参数不为对象，还作为原型链的终点）
undefined：变量定义值未定义。转为数值NaN
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
2，判断js数据类型的四种方式
typeOf:返回结果为该类型的字符串形式（number,string,boolean,undefined,null,object,function,symbol）
instanceOf: 判断a是否为B的实例
constructor:
Object.prototype.toString.call(’’):返回数据类型（toString是object的原型方法）
三, w3c标准
1，DOCTYPE，文档类型简写，说明html的版本
2，定义语言编码，防止乱码，<meta charset='gb2312
3,js,css定义方式必须通过

浅拷贝的实现方式：
1，object.assign()
2,es6的扩展运算符
3，jquery.extend()
4,数组方式，array.from(),array.concat(),array.slice()

art-template
1,.利用pull-to插件、实现上拉加载功能；
1.熟练HTML+CSS,自适应布局,可快速还原设计稿,快速实现PC端,移动端布局。
熟练JavaScript基础扎实,数知DOM结构,可以用原生JS编写网页特效。

nuxt框架Vant-ui、Mint-ui、Antd
了解vue3.0新特性，以及使用vite小工具
require.context()
使用fastClick来解决移动端300ms的延迟，按需加载UI库，路由懒加载
使用amfe-flexble和postcss-pxtorem插件解决移动端适配问题以及px转换rem单位

Stylus 预处理器
评论按钮采用 Quill 在线编辑器，同时用 fetch 将评论输送到后端
、使用了 better-scroll 进行商品的上拉加载和下拉刷新

3、熟练掌握Ajax、Axios、Fetch等前端请求技术，实现页面渲染。

ant-design
antd UI

uni-app