vue的知识点
vuex的作用：
1.状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。
vue的生命周期：
beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed
PS：vue3的生命周期：
Vue3.0 也提供了 Composition AP I形式的生命周期钩子，与 Vue2.x 中钩子对应关系如下：
obeforeCreate===>setup()
created =======> setup()
beforeMount ===> onBeforeMount
mounted =======> onMounted
beforeUpdate ===> onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==> onBeforeUnmount
unmounted =====> onUnmounted
axios+vue实现登入拦截：
1.路由拦截，需要在定义路由的时候添加一个字段requireAuth，用于判断该路由的访问是否需要登入，如果用户已经登入，则可以跳 转 到路由，否则就进入到登入页面，登入成功后跳转到目标路由。
2.定义完路由之后，我们通过vue-router提供的钩子函数beforeEach()对路由进行判断，代码如下：
router.beforeEach((to,from,next) => { if(to.meta.requireAuth){ //判断该路由是否需要登入权限 if(!store.state.token){ //通过vuex state获取当前的token是否存在 router.push('/login');//不存在则跳转到登入页面 } next();//进行下一个钩子 } });
3.如果当token失效了，但是token依然保存在本地。这时候你去访问需要登入权限的路由时，实际上需要让用户重新登入，这时候就 需要结合http拦截器+后端接口返回的http状态码来判断，axios拦截器分为两种，见下代码：
axios.interceptors.request.use( (config) => { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的 header都加上token，不用每次请求都手动添加了 if(store.state.token){ config.headers.token = store.state.token; } return config; }, (error) => { return Promise.reject(error); }); //http response拦截器 axios.interceptors.response.use( (response) => { //用来判断响应状态 return response； //return Promise.resolve(response); }, (error) => { return Promise.reject(error); } )
vue的原理：
利用的是ES5Object.defineProperty和存储器属性：getters和setter(只兼容IE9以上的版本)，可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。
vue的常见参数传递方式：
1.父传子（props）
这里要稍微注意一下，父组件所传递参数如果是需要在生命周期中获取赋值，就不能绑定在mounted中，否则子组件方法中this调用不会 成功。生命周期顺序：父beforeMount->子beforeCreate……子mounted->父mounted
2.子传父（$emit）
3.路由传参：router.push()
第一种方法：
methods：{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, }) } 可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值 需要对应路由配置如下： { path: '/particulars/:id', name: 'particulars', component: particulars } 另外页面获取参数如下，页面刷新数据不会丢失。 this.$route.params.id
第二种方法：
// 页面刷新数据会丢失 通过路由属性中的name来确定匹配的路由，通过params来传递参数。 methods：{ insurance(id) { this.$router.push({ name: 'particulars', params: { id: id } }) } //对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。 { path: '/particulars', name: 'particulars', component: particulars } //子组件中: 这样来获取参数 this.$route.params.id
第三种方法：
//使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？ methods：{ insurance(id) { this.$router.push({ path: '/particulars', query: { id: id } }) } //对应路由配置： { path: '/particulars', name: 'particulars', component: particulars } //对应子组件: 这样来获取参数 this.$route.query.id
特别注意哦，
组件中 获取参数的时候是router 这很重要~~~
资料：https://www.jianshu.com/p/d276dcde6656
4.路由传参：声明式路由导航传参
<router :to="{name:'home',params:{id:10}}" //这样子的话，地址栏显示的就是/home/10,**另外一个需要注意的地方** 路由中如果提供了path，params不生效 //<router :to="{'path':params:{id:10}}"></router> // 上面这行代码中的params会被忽略
5.eventBus（emit|on） 适用于 父子、隔代、兄弟组件通信
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
计算属性和监听的应用区别：
计算属性：依赖其他属性值，并且计算属性的值有缓存，只有它依赖的属性值发生改变，下一次获取是才会重新计算。
监听：更多是观察的作用。根据监听的数据变化时都会执行回调进行后续操作。
对数组监听的局限：
由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：
-
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue//解决：vue.set
-
当你修改数组的长度时，例如：vm.items.length = newLength//解决：vue.prototype.splice
keep-alive:
搜索
复制
