目录
1.vue 的生命周期
也叫生命周期-函数(钩子)
1）. vue 的生命周期其实就是一些特殊的函数 ，系统自带的有8个，
beforeCreate、created、
beforeMount、mounted、
beforeUpdate、updated、
beforeDestroy、destroyed
将要创建 ： beforeCreate()
//数据代理未开始 ，此时vue，还没有data的数据和methods里的方法，
//所以这个时候还获取不到data、method
创建完毕 ： created()
//数据已经代理，此时vue，已收到data和method ，
//所以这里可以或者到data 和 method 的方法
将要挂载（解析dom）：beforeMount（）
//开始解析模版，生成虚拟dom ，保存到内存，此时不能修改dom
挂载完毕（渲染dom）：mounted（）
//渲染页面，将内存的虚拟dom渲染到页面
//(常用) 开启定时器、发请求、订阅消息、绑定自定义事件 等初始化操作
将要更新 ： beforeUpdate（）
//当数据更新时，此时的数据是新的，但页面依然显示旧的，即 页面和数据没有同步
更新完毕 ： updated()
//当数据更新时，数据和页面都是新的
将要销毁 ： beforeDestroy()
//销毁之前： 数据，事件 ，指令 ，都是可用状态
//(常用）闭定时器、取消订阅消息、解除绑定自定义事件 等收尾操作
销毁完毕 ： destroyed()
//完全销毁
2）、一旦进入页面，会执行哪些函数？
beforeCreate、created、beforeMount、mounted
3）、如果加入了 keep-alive ，会多2个函数
activeted、deactivate
4）、如果加入了 keep-alive 第一次进入组件，会执行哪些函数？
beforeCreate、created、beforeMount、mounted、activeted
5）、如果加入了 keep-alive 第2次或者第n次 进入组件，会执行哪些函数？
只执行activeted，因为组件已经被缓存
6）、从 a 页面进入b 页面，再从ba 返回到a ，执行哪些？
第一次进入执行5个 beforeCreate、created、beforeMount、mounted、activeted ，
返回也是只执行 activeted
2.keep-alive的实现
是什么：是vue 自带的一个组件，用来来现组件的缓存
使用场景/作用： 缓存组件，提升性能，如列表页进入详情页，
如果每次点击数据都是相同的那么缓存起来，不用发请求了，
如果当前点击的数据和上一次点的不是同一条那么再次发请求。
钩子函数：
”activated “组件渲染后调用；
”deactivated“组件销毁后调用
原理：Vue.js内部将DOM节点抽象成了一个个的VNode节点，keep-alive组件的缓存也是基于
VNode节点的而不是直接存储DOM结构。它将满足条件（pruneCache与pruneCache）
的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象
中取出并渲染。
配置属性：
include 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude 字符串或正则表达式。
任何名称匹配的组件都不会被缓存 max 数字、最多可以缓存多少组件实例
3.对m -v -vm 的理解
是model-view-viewmodel的缩写，是一种结构模式(设计思想)
model是数据模型，用于对数据的定义和修改等操作。
view是ui视图层，用于渲染页面。
viewModel：负责监听model中数据的改变并控制属更新，处理用户交互操作。
修改View层，Model对应数据发生变化
Model数据变化，不需要查找DOM，直接更新View
4.说说你对SPA 单页面应用的理解？
SPA(single-page-application): 在页面初始化的时候加载相应的 html, css, js。
一旦页面加载完成，用户再操作页面或者页面内容改变，它不会刷新整个页面，
而是利用路由的机制实现html 内容的变换、ui与用户的交互，避免页面重复加载。
优点：
用户体验好、快
内容改变时，页面不需要刷新，避免了重复跳转和重复渲染
对于服务器的压力小
前后端分离、架构清晰
缺点：
初次加载耗时久 （第一次需要统一加载html css js，部分页面按需加载）
前进后退路由管理 （单页面是在一个页面中显示所有内容，所以不能使用浏览器的前进后退按钮，所有的页面切换需要建立自己的堆栈管理）
SEO 难度大
5.双向绑定使用和原理
Vue 中的双向绑定是一个指令（v-model），可以绑定数据到视图，视图改变数据也会被改变。 通常使用在表单上，也可以用在自定义组件，表示某个值的输入或者输出
6.Vue 组件间的通信方式有哪些
1.props ：父子
父 name=‘hello’ :age='18'； 子 props:['name','age'] ） //age前加：是将字符串转数字
2.插槽 : 父子
父中的子组件中定义好内容<子>1234</子>，子组件中写好<slot></slot>，组件会将其定义好的内容1234自动填入插槽内
3.自定义事件@ ： 子向父
父中子组件 ：xx = 'xxcallback' , 子props:['xx'], this.xx(参数) //父给子组件 传递函数类型的props，实现子给父传递数据
父中子组件 @xx=‘xxcallback’，子 this.$emit('xx' ,参数) // 父给子组件传递 绑定自定义事件，使用 $emit 触发 ，实现子给父传递数据
父中子组件 ref='xx' mounted 中 this.$refs.student.$on('xx',this.xxcallback)，子 this.$emit('xx' ,参数) //定义ref ，使用refs 绑定自定义事件，使用 $emit 触发 ，实现子给父传递数据
4.全局事件总线 $bus ： 全能
main.js 中安装$bus
组件A提供数据 this.$bus.$emit('自定义事件名'，参数)
组件B接收数据 this.$bus.$on("自定义事件名", 回调函数)
在组件中通过this.$bus.$emit('xxx',data)提供数据，通过this.$bus.on('xxx',(data)=>{})获取数据
5.Vuex ： 全能
创建仓库 actions/mutations/state/getters ，
组件中读取vuex 中的数据 ： $store.state.sum // 这里的this ：如果时在模版中可以不用加，如果在js 脚本里写需要加this
6.pubsub-js ：vue 几乎不用 ，全能
消息订阅与发布
安装pubsub-js
引入pubsub-js
订阅消息用pubsub.subscribe('xxx',data)
发布消息pubsub.publish('xxx',(msgNmae,data)=>{})
7. 浏览器本地存储：
- localStorage 浏览器窗口关闭内容不会消失，存储大小一般为5mb，setItem、getItem、remove、clear等api，持久化存储，需要手动清除才会消失，getItem获取不到对应的value会返回null。
- sessionStorage 浏览器窗口关闭，存储的数据会清空，setItem、getItem、remove、clear。
- cookie是一种浏览器管理状态的一个文件，它有name、value，Domain、path等等，数据大小不能超过 4K，是服务器向浏览器发送的一小块数据，不可以跨域请求。设置的cookies过期时间之前一直有效，即使窗口和浏览器关闭，数据会自动地传递到服务器，服务器也可以写cookies到客户端
8.v-if 和 v-show 的区别
v-if ：创建dom（创建和删除元素）
v-show ：隐藏和显示dom，元素始终存在。 （隐藏和显示元素）
使用场景：
初始加载： v-if 比v-show 要好，页面不会加载元素
频繁加载： v-show 比 v-if 好， v-if创建的开销比较大， v-show 的显示和隐藏开销比较小
9. v-if 和 v-for 的优先级
v-for的优先级是高于v-if的，如果两者同时出现的话，那每次循环都会执行v-if，会很浪费性能；
正确的做法应该是再v-for的外面 新增一个模板标签template，在template上使用v-if
10. ref 是什么
用来获取dom，类似于元素的id，比js 或者jq 获取dom 简单
给元素定义个 ref='app'. ,那么就可以用 this.$refs.app 来获得dom
11. nextTick 是什么
获取更新后的dom 内容
this.$nextTick()
作用：在下一次dom更新结束之后执行指定回调
什么时候调用：当改变数据后，要基 更新后的新dom 进行 某些 操作时
例如：点击按钮修改按钮的lable
21行， 当点button的时候 ，str 是被修改成了 bbbb， 但此时dom 还未更新，直接获取到的依然是123 ，所以这里要获取更新后的内容 就需要使用 this.$nextTick()
12. Computed 、watch 的区别
computed 是计算属性 ， 是基于它们的响应式依赖进行缓存 ，如果属性值改变，computed 会检测到并且返回。
watch 是监听数据 ，如果数据或者路由发生改变，才会执行。
13.Vuex 是什么
概念：Vuex 是 vue 的一个状态管理模式的插件，每一个 Vuex 应用的核心就是 store（仓库）。
Vuex 的5个属性：
Store ： 用来保存数据，如果组件从sotre 中读取数据，
当store 中数据状态发生改变，那么组件也会同步更新
action： 用于提交 mution，可以包含异步操作
mution：用于更改store ，必须是同步函数
getters：类似于computed ，用来整理数据
modules：允许将单一的sotre 拆分成多个，同时保存到单一的状态树中
vuex 是单向数据流 还是双向数据流？ 是单向数据流，只能用
vuex 如何做持久化存储？
vuex 本身不是一个持久化存储。
可以使用 localstorage 或者 使用vuex 持久化插件 vuex-persist
vuex的响应式处理
触发事件的时候，会通过dispatch来访问action中的方法，
actions中的commit，会触发mutations中的方法，从而修改state里的值，
通过getter把数据更新到视图
14.路由的模式 hash 和 history
hash模式（hash值不会作为url的一部分发送给服务器，手动刷新页面无404问题）
（1）地址栏中带#，路由地址就是#后面的内容，切换路由，变化的是#后面的内容
（2）url变化是通过浏览器的hashchange方法监听的
（3）hash的兼容性更好，甚至能兼容低版本的ie浏览器
（4）路由改变后手动刷新页面不会报错（404），因为hash模式请求页面的地址永远是# 前面的内容，所以总是能请求成功，得到index.html页面，再通过路由渲染显示对应得组件。
history模式 （手动刷新页面有404问题）
（1）地址栏中没有#，从视觉上更加美观
（2）history路由的实现主要依赖于html5提供的history全局对象，这个全局对象暴露了一些有用的方法：
window.history.go：可以跳转到浏览器会话历史中指定的某一个记录页（简单理解：可以跳转到曾经访问过的某一个页面）
window.history.forward ：可以跳转到浏览器会话历史中的下一页，和前进按钮相同
window.history.back：可以跳转到浏览器会话历史中的上一页，和后退按钮相同
window.history.pushState：可以将指定的路由数据push压入到浏览器历史会话栈里面，会使得浏览器会话栈的长度增加，即history.length + 1
window.history.replaceState：可以将当前页面的url替换成指定的url, 不会改变浏览器会话栈的长度，即history.length 不变
popstate:该事件只会被上述方法中前三种触发，pushState,replaceState 事件不会触发该事件（3）history模式下手动刷新页面出现404错误的原因：因为history模式请求页面的地址是地址栏里面全部的内容
例如: http://192.168.30.161:5500/home 在页面不刷新的情况下默认访问的始终是路径下的index.html即http://192.168.30.161:5500/index.html,但一旦刷新页面后
访问的就是：http://192.168.30.161:5500/home/index.html，很明显服务器没有这个资源，所以会出现404错误
因此使用history模式的路由时需要配置nginx,告诉浏览器，当访问的资源不存在时，默认访问静态资源下的index.html
路由传参：待更新。。。。。。
2608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
