初始化：
beforeCreate：一般没啥用，数据没挂载，DOM 没有渲染出来
created：数据已经挂载，但是 DOM 没有渲染出来，这个钩子函数里面可以做一些异步的 *** 作，并且在这个钩子函数里面更改数据不会影响到运行时钩子函数。
beforeMounte：这个函数代表着 DOM 快要被渲染出来了，但是还没有被渲染出来，跟 created 一样，做一些异步的 *** 作
mounted：数据已经挂载，真实 DOM 也已经渲染出来了。
运行中：
beforeUpdate：当数据改变的时候才会执行这个函数，在这个函数里面拿到的是改变之前的数据，千万不能在这个里面更改数据，否则会造成死循环
updated：拿到的是更新之后的数据，在这函数里面，生成新的 DOM ，跟上一次的虚拟 DOM 做对比，比较出差异之后，然后再渲染真实的 DOM ，当数据引发 DOM 重新渲染的时候，在这个钩子函数里面就可以获取到真实的 DOM。
销毁时：
beforeDestroy：销毁前，做一些善后的 *** 作
destroyed：数据的双向绑定，监听都删除了，但是真实的 DOM 还是存在的
2、什么是 MVVM？与 MVM 的区别。mvvm 是一种简化用户界面的事件驱动编程方式
VIEw是视图层，也是用户交互层，主要是由 HTML 和 CSS 构建
Model是视图层，泛指后端进行的各种逻辑处理和数据 *** 控
viewmodel是指视图数据层，在这一层，前端开发者对从后端获取到的 Model 数据进行转换处理，做二次封装，以生成符合 VIEw 层使用预期的视图数据模型。
MVVM 主要是解决 MVM 的反馈不即使的问题。
3、90完整的生命周期函数到底是什么？beforeCreate：基本什么都干不了，data 没有注入到 vue 里面，获取不到 data 信息，做一些预处理功能，
created：数据可以获取，并且在钩子函数中更改数据不会调用钩子函数的执行
beforeMount：此时还没有生成 HTML 到页面中。
mounted：初始化阶段最后一个钩子函数，可以 *** 作真实 DOM 了
数据更新的时候，先调用 beforeUpdate，然后数据更新引发视图渲染完成之后，才会执行 updated
4、VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？
为什么要封装组件？
主要就是为了解耦，提高代码复用率。
什么是组件？
组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。
组件中的 data 为什么是一个函数
让每个返回的实例都可以维护一份被返回对象的独立的拷贝。
（延申）
什么是模块？
相当于业务逻辑块，把同一类的项目里的功能逻辑进行需求性的封装。
模块化开发：就是将 Js 文件按照功能分离，根据需求引入不同的文件，源于服务端
组件化开发：具备单个可移植性，即“随用随加载”，不需要为其准备复杂的基础条件，组件是声明式，非命令式
5、axios 是什么？axios 主要是用来向后台发送请求。支持promise
axios 支持并发请求，可以同时请求多个接口
axios 提供了拦截器。
axios 可以防止 跨站请求伪造。也就是钓鱼网站
axios 拦截器：
分为 request 请求拦截和 response 响应拦截
request 请求拦截：发送请求前统一处理。例如：设置请求头 headers
response 相应拦截：是根据响应的代码来进行下一步的 *** 作。例如：由于当前的 token 过期，接口返回 401 未授权。那么我们就要跳转到登陆界面
axios/fetch 是基于 promise。后者主要利用 callback 的形式fetch 脱离了 xhr，是新的语法，默认不传 cookie。另外也监听不到请求进度
6、VUEX 是什么？怎么使用？那种场合能用？
vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）
vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）
state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数据，然后在 mutations 里面同步的更改数据
应用场合：购物车的数据共享、登入注册
7、vue 的指令用法v-if 条件渲染指令
v-bind 绑定属性指令
v-on 监听事件指令
v-for 循环渲染指令
v-text 渲染文本
8、导航钩子？vur-router
spa 单页面应用：指的是根据检测地址栏的变化将对应的路由组建进行切换
也就是说，一个项目里面只有一个完整的 HTML 页面。其余的都是 HTML 组件，页面之间跳转刷新，都是组件之间切换，减少了 http 请求的发送，提高了用户体验，
原理就是 Js 感知到 url 的变化，通过这一点，可以用 Js 动态的将当前页面内容清除，然后将下一个页面的内容挂载到当前页面上，这个时候路由不是后端做，而是前端完成，判断到底是显示哪个页面，清除不需要的，显示需要的，这个过程就是单页面应用。
好处就是:良好的交互体验，良好的前后端分离模式，减轻了服务器的压力，公用一套代码。
history hash
声明式导航：router-link
history：这个模式会直接改变 url 地址，需要后端给我们配置。
hash：这个模式检测到 url 地址栏 # 后面的路径标识符的更改，从而触发浏览器的 hashchange 事件，然后通过 location.hash 得到当前的路径标识符，在进行路由跳转 *** 作。
一级路由、二级路由？ children
路由跳转、两种方式：router-link to this.$router.push()
路由守卫 拦截器
拦截器：request请求拦截器和response响应拦截器 request 请求拦截：发送请求前同一处理，
例如：设置请求头 headers、应用的版本号、终端类型等 response 响应式拦截：有时候我们要根据响应式的状态来进行下一步 *** 作，
例如：由于当前的 token 过期，接口返回 401 未授权，我们就需要进行重新登录的 *** 作。 导航钩子就是 vue 中路由 vue-router
分类： beforeEach 在路由切换开始的时候调用 afterEach 在路由切换离开的时候调用局部到单个路由 beforeRouteEnter组件的钩子函数 beforeRouterEnter beforeRouterUpdata beforeRouteLeave三个属性： to 即将进入的目标对象 from 导航要离开的导航对象 next 是一个函数，调用 resolve 执行下一步 9、v-model 是什么？ 用于表单的数据双向绑定的指令
有两个 *** 作：
1、v-bind 绑定了一个 value 的属性
2、v-on 把当前元素绑定到一个事件上
10、swiper 插件从后台获取数据没有问题，CSS 代码啥的也没有问题，但是图片没动，怎么解决。主要是因为 swiper 提前初始化了 ，但是数据还没有完全出来。
this.$nextTick() 主要作用就是等数据改变引发 DOM 重新渲染完成之后才会执行。
11、keep-alive当在这些组件之间切换的时候，想保持这么组建的状态，以避免反复渲染导致的性能问题
原理：在 created 的时候，将需要缓存的虚拟 DOM 节点放到 cache 中，在 reader 的时候根据 name 再进行取出。
路由懒加载：
就是当你需要的时候才会加载，按需加载。
单页面应用的问题就是所有的页面都需要引入一个 Js 文件，wepback 打包的时候生成一个 Js ，这个 Js 会再所有组件切换的时候调用
单页引入了所有的一个 Js ，日志也会引入所有的一个 Js ，这样首页加载速度变慢。解决方法就是路由懒加载。
12、单页应用原理就是通过检测地址栏的变化将对应路由组件进行组件之间的切换。
一个项目只有一个完整的 HTML 页面，其他部分都是 HTML 组件组成，页面的跳转只是局部的刷新，不会重新加载全部的资源，组件之间的之间的切换快，比较容易实现转场动画。页面每次跳转时候，并不需要做 HTML 文件请求，这样就节约了很多 http 发送请求，我们的切换页面的时候，速度会很快。
优点：良好的交互体验、良好的前后端工作分离模式、减轻服务器的压力、公用一套后端程序代码
缺点：SEO 难度较大、页面上不能进行前进后退管理、初次加载耗时多。
13、什么是vue-loader？vue-loder 就是一个加载器，把 vue 组件转换成 Js 模式。
为什么要转译此模块？
可以动态的渲染一些数据，对三个标签做了优化
template 写虚拟 DOM
script 写 es6 语法
style 默认可以用 sCSS 语法，提供了作用域
并且开发阶段提供了热加载器
14、slot 是什么？如何使用？插槽：具名插槽、匿名插槽、作用域插槽
15、什么是虚拟 DOM ？与 key 值得关系？DOM 是用 Js 对象记录一个 dom 节点得副本，当 dom 发生更改的时候，先用虚拟 dom 进行 diff 算法，算出最小差异，然后再修改真实 dom。
当用传统得方式 *** 作 DOM 得时候，浏览器会从构建 DOM 树开始从头到尾执行一边流程，效率很低，而虚拟 DOM 是用 javascrit 对象表示的，而 *** 作 javascriot 是很简便高效的。虚拟 dom 和真实的 dom 有一层映射关系，很多需要 *** 作 dom 的地方都会去 *** 作虚拟 dom ，最后一次更新 dom，因而可以提高性能。
虚拟 dom 的缺点：
1、代码更多，体积更大
2、内存占用增大
3、小量的单一的 DOM 修改使用 虚拟 DOM 成本反而更高，不如直接修改真实 dom 快
16、如何理解 vue 的 mvvm 框架？是一种简化用户界面的事件驱动编程方程式。
vIEw 层是视图层，使用户交互层，主要是 HTML 和 CSS 来构建
moedl 层数据模型层，泛指后端进行的各种逻辑处理和数据 *** 控
viewmodel 层是指视图数据层。在这一层，前端开发者对从后端获取的 model 数据进行转换处理，做二次封装，以生成符合 vIEw 层使用预期的视图数据模型。
数据双向绑定：
当视图改变更新模型层，当模型层改变更新视图
vue 的数据双向绑定：
vue 采用数据劫持&订阅者发布模式的方法：vue 在创建 vm 的时候，会将数配置在实例中，然后会使用 object.defineproperty 对这些数据进行处理，并且会将数据进行处理，并且会为这些数据添加 getter 与 setter 方法，当数据改变之后，就会触发数据的 setter 方法，从而触发 vm 的 watcher 方法，然后数据改变了， vm 进一步渲染 vIEw 视图。
17、active-class 是哪个组件的属性。vue-router 模块提供的 router-link 组件的属性
在 vue-router 中要使用 active-class 有两种方式
1、直接在路由 Js 文件中配置 linkActiveClass
2、在 router-link 中写入 active-class
18、sCSS 是什么？sCSS 是一种预编译器。
19、vue 的第三方插件：miui-ui element-ui vuex
20、axios 是什么？axios 是用来发送请求的。get 和 post 两种
get：通过定义一个 get 函数，他有两个参数，第一个参数就表示我们请求的 url 地址，第二个参数就是我们要携带的请求参数，get 函数返回的是一个 promise 对象，当axios 请求成功的时候服务器返回给我们的是 reslove 返回值，请求错误的时候返回给我们的是 reject 错误值，最后通过 export 抛出 get 函数
post：方法基本与 get 方法一致，但是需要设置请求头。
21、promise 的了解promise 是异步函数的解决方案，从语法上讲 promise 是一个对象，从他可以获取异步 *** 作的消息， promise 有三个状态，pending 等待状态、fulfilled 成功状态、rejected 失败状态，状态一旦更改，就不会在变，创造出 promise 实例后，他会立刻执行，promise 有两个API 方法：resolve 和 reject，resolve 代表的是回调成功后的函数，reject 代表的是失败后返回的结果，原型上有两个放法：.then 和 .catch 方法，例如请求接口 .then 拿到的是数据，通过 .catch 捕获错误异常
22、自定义指令的方法：vue.directive
钩子：bind、inserted、update、unbind
参数：el、binding、vnode
23、vue 之间的通信父子：子组件用 props，接受父组件传递过来的值
子父：父组件生命一条数据，再写一个改变自身的方法，传递给子组件，然后把子组件添加到点击事件上
兄弟之间传值：
ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值
even.bus 事件总线：简单的场景下，使用一个 空的 VUE 实例作为事件总线，可以实现兄弟之间的通信。
总结以上是内存溢出为你收集整理的vue知识点整理全部内容，希望文章能够帮你解决vue知识点整理所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）