Java知识复习（十五）Vue.js

1、JSP的缺点

• Java Server Pages [JSP] 等技术，增强了 WEB 与服务端的交互的安全性，其实就是Java + HTML
• JSP有一个很大的缺点，就是不太灵活，因为JSP是在服务器端执行的，通常返回该客户端的就是一个HTML文本。我们每次的请求：获取的数据、内容的加载，都是服务器为我们返回渲染完成之后的 DOM，这也就使得我们开发网站的灵活度大打折扣

2、Vue的常见概念

• Vue.js：是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架
• 组件化：用一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件
• 指令：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，例如常用的v-if、v-model等

3、MVVM

• Model：模型层，负责处理业务逻辑以及和服务器端进行交互
• View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
• ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
• ViewModel通过双向数据绑定把View和Model层连接起来，而View和Model之间的同步工作是完全自动的，不需要进行人为的干涉，因此开发者只需要关注业务逻辑，不需要手动操作Dom，不需要关注数据状态的同步问题，复杂的数据状态的维护完全由MVVM来进行管理

4、SPA和MPA的区别

• SPA（single-page application）：简单来说就是单页应用，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面
• MPA（MultiPage-page application）：简单来说就是多页面应用，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载

5、v-show和v-if的区别

• v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示，但原理不同
• v-show隐藏是为该元素添加css–display:none，dom元素依旧还在，v-if显示隐藏是将dom元素整个添加或删除。

6、Vue生命周期

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

• beforeCreate 组件实例被创建之初
• created 组件实例已经完全创建
• beforeMount 组件挂载之前
• mounted 组件挂载到实例上去之后
• beforeUpdate 组件数据发生变化，更新之前
• updated 组件数据更新之后
• beforeDestroy 组件实例销毁之前
• destroyed 组件实例销毁之后
• activated keep-alive 缓存的组件激活时
• deactivated keep-alive 缓存的组件停用时调用
• errorCaptured 捕获一个来自子孙组件的错误时被调用

使用场景

• beforeCreate 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
• created 组件初始化完毕，各种数据可以使用，常用于异步数据获取
• beforeMount 未执行渲染、更新，dom未创建
• mounted 初始化结束，dom已创建，可用于获取访问数据和dom元素
• beforeUpdate 更新前，可用于获取更新前各种状态
• updated 更新后，所有状态已是最新
• beforeDestroy 销毁前，可用于一些定时器或订阅的取消
• destroyed 组件已销毁，作用同上

7、双向绑定

• 在Vue.js中，双向数据绑定是通过实现数据劫持结合发布-订阅模式的方式来实现的，主要由以下三个组件来实现：
• Observer（观察者）：用来监听数据的变化，当数据变化时，会通知Dep对象。
• Dep（依赖）：用来管理所有的订阅者（Watcher），当数据变化时，会通知所有的订阅者进行更新。
• Watcher（订阅者）：用来订阅Observer中的变化，当数据变化时，会接收到通知并进行更新。

8、slot

• Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑
• 默认插槽：子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面，父组件在使用的时候，直接在子组件的标签内写入内容即可
• 具名插槽：子组件用name属性来表示插槽的名字，不传为默认插槽；父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
• 子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上；父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用