vue.js的二十个知识点小结
1、state:定义或者在setup中返回使用的数据
2、view:在模板template中可以使用这些数据，模块最终会被渲染成dom
3、actions：在模块中产生一些行为时间，处理这些行为事件，修改state的行为
4、单一状态树：用一个对象就包含全部的应用层级的状态，采用的是SSOT，单一数据源，vuex使用的就是单一状态树，每个应用仅包含一个store实例，单一状态树与模块化不冲突
5、vue的基本原理：当一个Vue实例创建时，Vue会遍历data中的属性，用Object.defineProperty将他们转为getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
6、双向数据绑定原理：Vue.js采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布信息给订阅者，触发相应的监听回调
7、使用Object.defineProperty()来进行数据劫持的缺点：通过下标方式修改数组数组或者给对象新增属性，都不能触发组件的重新渲染，对于大部分数组操作其实都拦截不到，只是vue内部通过重写函数的方式解决了这个问题。
8、data中为何是一个函数：vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例。
9、vm.$set 的实现原理是：
● 如果目标是数组，直接使用数组的 splice 方法触发响应式；
● 如果目标是对象，先判断属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）
10、SPA 单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次 js、css 等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。MPA 多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载 js、css 等相关资源。多页应用跳转，需要整页资源刷新
| 单页面应用（ SPA） | 多页面应用（ MPA） | |
|---|---|---|
| 组成 | 一个主页面和多个页面片段 | 多个主页面 |
| 刷新方式 | 局部刷新 | 整页刷新 |
| url模式 | 哈希模式 | 历史模式 |
| SEO搜索引擎优化 | 难实现，可使用SSR方式改善 | 容易实现 |
| 数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
| 页面切换 | 速度快，用户体验良好 | 切换加载资源，速度慢，用户体验差 |
| 维护成本 | 相对容易 | 相对复杂 |
单页面缺点：
初次加载耗时多
由于单页应用在一个页面中显示所有内容，所以不能使用浏览器的前进后退功能，所有的内容切换需要自己建立堆栈管理
SEO难度较大
11、vue中data的一个属性值发生变化后，试图会立即同步执行重新渲染吗？
不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环 tick 中，Vue 刷新队列并执行实际已去重的）工作
12、vue提倡单向数据流，父级props的更新会流向子组件，为了防止子组件意外改变父组件状态，导致数据流混乱，debug成本会非常高，只能通过$emit派发一个自定义事件，当父组件接收到后，由父组件修改
13、assets和static的异同点：都用来存储静态资源的，项目打包的时候assets也会打包压缩，而static不会打包，在服务器会占用更大的空间，建议将template需要的样式文件js文件放置在assets中，引入的第三方资源文件，如iconfont.css等文件可以放在static中，因为这些第三方文件已经经过处理，可以直接上传
14、添加或删除对象的属性时，Vue 检测不到。因为添加或删除的对象没有在初始化进行响应式处理
15、SSR服务端渲染：将vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把HTML直接返回给客户端
16、 vue初始页面闪动
使用 vue 开发时，在 vue 初始化之前，由于 div 是不归 vue 管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是还是有必要让解决这个问题的。首先：在 css 里加上以下代码：
[v-clock]{
display:none
}
如果没有彻底解决问题，则在根元素加上style=“display:none;” :style=“{display: ‘block’}”
17、v-for和v-if的优先级：Vue2中v-for 优先于 v-if 被解析（Vue3中则优先级相反 ），如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。要避免出现这种情况，则在外层嵌套 template，在这一层进行 v-if判断，然后在内部进行 v-for 循环。如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项。
18、过滤器：对要显示的数据进行格式化后再展示
// 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
// 使用过滤器
{{myData | filterName}}
{{myData | filterName(arg)}}
19、vuex是什么？如何使用？
vuex是基于vue状态管理的库
vuex的五个特性：
state:存储或定义共享数据，通过$store/mapState访问数据
mutation:修改vuex数据对的唯一来源，commit提交mutation
action：处理异步操作,dispatch分发
getters:基于state进行派生数据
modules：将vuex数据进行模块化
同步流程：commit->mutations->state
异步流程:：dispatch->actions->mutations->state
20、路由模式的区别
hash:有#；不经过服务器；不需要后端配合；底层原理：跳转window.location.href，监听onhashchange
history:跳转history API,histoty.pushState和history,replaceState监听onpopState(前进/后退)