vue的知识点

2023-09-29 13:14:10

vuex的作用：

　　1.状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。

vue的生命周期：

　　beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed

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

特别注意哦，
组件中获取参数的时候是 $vue的知识点$ 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 实例作为*事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

　　6.vuex，

计算属性和监听的应用区别：

　　计算属性：依赖其他属性值，并且计算属性的值有缓存，只有它依赖的属性值发生改变，下一次获取是才会重新计算。

　　监听：更多是观察的作用。根据监听的数据变化时都会执行回调进行后续操作。

对数组监听的局限：

　　由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue//解决：vue.set
当你修改数组的长度时，例如：vm.items.length = newLength//解决：vue.prototype.splice

keep-alive: 　　内置组件，可以使被包含的组件保留状态，避免重新渲染。 vue项目的优化：　　v-if，show的使用场景，事件销毁，资源懒加载，路由懒加载，

码农公寓

相关文章