1.Vue中的生命周期函数(钩子函数)以及作用?
Vue实例从创建到销毁的过程,就是生命周期。
生命周期钩子函数共8个,分别是:
1 beforeCreate: 初始化前
2 created: 初始化完成,一般完成“页面加载成功后”的相关操作
3 beforeMount:挂载前,双向数据绑定前
4 mounted:挂载完成,双向数据绑定完成
5 beforeUpdate:更新前
6 updated: 更新完成
7 beforeDestroy: 销毁前
8 destroyed: 销毁完成
2.前后台分离,跨域问题如何解决
1.使用Nginx代理:Nginx统一程序入口,通过Nginx分发到不同的服务。
2.JSONP,通过<script>标签请求接口,通过回调函数的方式传递跨域数据。
3. CORS,一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing), CORS需要浏览器和服务器同时支持。
所有浏览器都支持该功能。
服务器需要单独配置使用 @CrossOrigin 或 全局配置类
3.Vue-router
Vue Router 是 Vue.js 官方的路由管理器。
作用是:
- 通过<router-link>完成组件的切换
- 通过 this.$route 完成组件的传参
- 通过 this.$router.push 完成组件的跳转、
4.Vue中父子组件之间的传值是怎么实现的?
1)父组件向子组件传递,子组件使用props接收父组件传递的数据。(自定义属性)
2)子组件向父组件传值,子组件通过$emit()触发父组件的事件,父组件通过v-on绑定的函数函数接收值。(自定义事件)
3)非父子组件之间传值,使用公共文件
5.Vue中,路由如何传参,如何获取路由传递的参数?
1. 方式1:请求参数,/user?id=123
路由的路径
<router-link to="/user?id=1234"></router-link>
参数的获取:this.$route.query.name
2. 方式2:路由参数、 /user/1234
路由的路径
<router-link to="/user/1234"></router-link>
路由的配置:{ path: '/user/:id' }
参数的获得:this.$route.params.id
6.vuex如何实现数据共享
1. vue整合vuex,在main.js文件中,vue以组件的方式导入store.js
2. 将数据存放到 store.js 的 state 区域,任何位置都可以引用。
3. 通过store.js的 mutations可以对state区域的数据进行更新。
通过读写最终达到数据的共享。
7.Vue全家桶有哪些?
Vue两大核心思想:组件化和数据驱动。组件化:把整体拆分为各个可以复用的个体,数据驱动:通过数据变化直接影响dom展示,避免dom操作。
1)Vue-cli是快速构建这个单页应用的脚手架。
2)vue-router路由,组件之间的切换。
3)Vuex数据管理。
4)axios是一个http请求包,vue官网推荐使用axios进行http调用。(ajax操作)
8.Vue的导航守卫是什么?有什么作用?
vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的、单个路由独享的、组件级别的。
1、全局钩子
router.beforeEach 注册一个全局的 before 钩子
2、某个路由独享的钩子
在路由配置上直接定义 beforeEnter 钩子
3、组件内的钩子
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave,在路由组件内直接定义路由导航钩子
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
9.vuex的五大核心属性是什么?
VueX 是一个专门为 Vue.js 应用设计的状态管理架构。
Vue有五个核心概念,state, getters, mutations, actions, modules。
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
目录