add: vue

docs/.vitepress/cache/deps/_metadata.json

@@ -1,31 +1,31 @@
 {
-  "hash": "29111fb7",
-  "configHash": "0e5db61e",
-  "lockfileHash": "4df3f75e",
-  "browserHash": "2c9aeee7",
+  "hash": "6fd41f54",
+  "configHash": "2af5df7b",
+  "lockfileHash": "357b3707",
+  "browserHash": "330c5537",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "c1ab38ee",
+      "fileHash": "9c87b24d",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "7a99b176",
+      "fileHash": "3d91c277",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "1c3f4940",
+      "fileHash": "98eae9ef",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-KV7T6ZSY": {
-      "file": "chunk-KV7T6ZSY.js"
+    "chunk-HQVAGNKX": {
+      "file": "chunk-HQVAGNKX.js"
     }
   }
 }

docs/src/pages/FixedArticle/vue/index.md

@@ -1,16 +1,20 @@
 # 什么是VUE？ 
 - vue是一个用于创建用户界面的JavaScript开源框架，也是一个用于创建单页应用的web应用框架。
+
 # vue核心特性
+
 ### 数据驱动（MVVM:Model-view-viewModel）
 - Model: 模型层，负责处理业务逻辑以及和server端（服务端）进行交互
 - View：视图层，负责将数据模型转化为UI界面展示出来
 - ViewModel：视图模型层，用来链接Model和View，是Model和View之间的通信桥梁
+
 ### 组件化 
  把图形和非图形的各种逻辑均抽象出来形成一个统一的概念（组件）来实现开发的模式 
  - 优点：
     * 降低代码的耦合度，提高开发效率
     * 方便调试
     * 提高可维护性
+    * 
 ### 指令系统
   常用的一些vue指令
    - v-if：判断
@@ -25,9 +29,11 @@
    - v-pre： 跳过该元素及其子元素的编译
    - v-once：只渲染一次，并跳过之后的更新
    - v-cloak: 用来隐藏尚未编译完成的dom模板
+
 # vue和原生开发的区别
 - vue所有的界面事件，都只是去操作数据的，原生则是操作dom
 - vue所有见面的变动，都是根据数据自动更新出来的，原生的则是操作dom
+
 # vue和React的区别
   - 相同点：
      - 都是组件化开发
@@ -42,6 +48,57 @@
      - 粒度不同， vue粒度略粗  react粒度更细
      - 核心思想不同  vue降低门槛，灵活易用   react则是声明式和组件化 
 
+# 什么是SPA？（单页应用）
+- spa是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面来回切换打断用户体验。
+- 在单页应用中，所有必要的代码都通过单个页面的需要而加载，或者根据需要动态的加载适当的资源到页面，
+- 页面在任何时间点都不会完全重新加载，也不会将控制转移到其他页面  
+
+### 常见的SPA应用
+   - vue、react、angular、ember
+### MPA（多页应用）
+- 在mpa中，每一个页面都是主页面，都是相对独立的，让我们从一个页面访问另一个页面时，所对应的资源则会全部重新加载
+### SPA和MPA的区别 
+
+- 组成： 单页应用由一个主页面和多个页面片段组成，多页应用则是由多个主页面组成
+- 刷新方式： spa： 局部刷新    mpa： 全局刷新
+- url模式： spa: hash模式    mpa: 历史模式
+- SEO优化： spa：难实现，可使用SSR方式改善     mpa：容易实现
+- 数据传递： spa：容易          mpa：通过url、cookie、loaclStorage等传递
+- 页面切换： 速度快，用户体验好   mpa：切换加载资源，速度慢，用户体验差
+- 维护成本： 相对比较容易        mpa：相对比较复杂
+
+### SPA的优缺点
+- 优点：
+    - 具有桌面应用的即时性、网站的可移植性和访问性
+    - 用户体验好、快，内容的改变不需要重新加载整个页面
+    - 良好的前后端分离，分工更明确
+- 缺点：
+    - 不利于搜索引擎的抓取
+    - 首次渲染速度相对较慢 
+
+### SPA的实现
+- 原理：
+    1. 监听地址栏中 **hash**变化驱动界面变化
+    2. 用pushstate记录浏览器的历史，驱动界面发生变化
+### SPA应用的的SEO优化方式
+- SSR服务端渲染
+- 静态化
+- 使用PhantomJS针对爬虫处理
+# v-show和v-if的区别，使用场景分别是什么？
+  * 共同点 
+    - 当表达式为true时，都会占据页面的位置
+    - 当表达式为false时，都不会占据页面的位置
+  * 不同点
+    - 控制手段不同：v-show 隐藏则是为该元素添加 display：none，dom结构依然存在。 v-if则是将整个dom元素添加或者删除
+    - 编译过程不同：v-if的切换有一个局部编译/卸载的过程，切换的过程中合适的销毁和重建内部的事件监听和子组件。  v-show则只是简单的 css切换
+    - 编译条件不同：v-if是真正的条件渲染，他会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
+    - v-show改变状态时不会触发组件的生命周期， v-if则会
+    - 性能消耗不同，v-show性能开销少， v-if性能开销大
+# vue实例在挂载过程中发生了什么？
+
 
 
+
+       
+