前端整理——Vue部分

Posted fangnianqin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端整理——Vue部分相关的知识,希望对你有一定的参考价值。

(1)Vue的生命周期

1)创建vue实例,初始化生命周期钩子函数
2)数据检测及方法和计算属性代理。在数据检测和初始化数据之前调用beforeCreated(),这时还获取不到props或者data中的数据;数据、属性、方法初始化之后,调用created(),可以访问之前访问不到的数据,但是组件还没有挂载,$el属性还没有显示,所以看不到组件。
3)判断是否有el属性,如果没有就判断是否调用了$mount方法,如果也没有则停止解析。如果调用了二者之一,就继续解析。
4)获取视图模板。判断是否有template属性,如果没有则将el的视图节点的outerhtml作为模板;如果有则将template视图作为模板。
5)编译模板。生成虚拟DOM,解析指令、组件。
6)将虚拟DOM挂载到真实DOM上。挂载前调用beforemount方法,挂在后调用mounted方法。
7)数据更新导致视图更新。更新前调用beforeUpdate,更新后调用updated。
8)销毁vue实例。销毁前调用beforedestroy,销毁后调用destroyed。

(2)keep-alive的生命周期

如果你需要在组件切换的时候,保存一些组件的状态防止多次渲染,就可以使用 keep-alive 组件包裹需要保存的组件。

对于 keep-alive 组件来说,它拥有两个独有的生命周期钩子函数,分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。

(3)Vue组件通信

1、父子组件通信

父组件通过props传递数据给子组件,子组件通过$emit发送事件传递数据给父组件,这两种方式是最常用的父子通信实现方法。
父子通信方式是单向数据流,父组件通过props传递数据,子组件不能直接修改props,而是必须通过发送事件的方式告知父组件修改数据。

2.非父子组件间的数据传递,兄弟组件传值

对于这种情况可以通过查找父组件中的子组件实现,也就是 this.$parent.$children,在 $children 中可以通过组件 name 查询到需要的组件实例,然后进行通信。

(4)路由

1、路由的钩子函数

1)router.beforeEach(to, from , next) 全局钩子函数,每次每一个路由改变的时候都得执行一遍。
to:即将要进入的目标路由对象;form:当前导航正要离开的路由;next:Function
next( ):进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed。
next( false):中断当前的导航。
next( ‘/‘ ):跳转到一个不同的地址。

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

2)router.afterEach全局后置钩子,这些钩子不会接受 next 函数也不会改变导航本身:

router.afterEach((to, from) => {
  // ...
})

3)你可以在路由配置上直接定义 beforeEnter 钩子函数,在进入对应路由时调用对应的beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: ‘/foo‘,
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4)组件内的钩子函数

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用;不!能!获取组件实例 `this`; 因为当守卫执行前,组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用;举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候;由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用; 可以访问组件实例 `this`
  }
}

2、路由跳转的几种方式

1)直接调用$router.push实现路由跳转:

this.$router.push({
     path: `/login/${id}`,
})

对应路由配置如下:

{
     path: ‘/login/:id‘,
     name: ‘Login‘,
     component: Login
   }

在子组件中获取参数值:
this.$route.params.id

2)通过路由属性中的name来确定匹配的路由,通过params来传递参数。

 this.$router.push({
          name: ‘Login‘,
          params: {
            id: id
          }
        })

对应路由配置如下:

{
     path: ‘/login‘,
     name: ‘Login‘,
     component: Login
   }

在子组件中获取参数值:
this.$route.params.id

3)使用path来匹配路由,然后通过query来传递参数。这种情况下 query传递的参数会显示在url后面?id=?

  this.$router.push({
          path: ‘/login‘,
          query: {
            id: id
          }
        })

对应路由配置如下:

{
     path: ‘/login‘,
     name: ‘Login‘,
     component: Login
   }

在子组件中获取参数值:
this.$route.params.id

(5)组件中data为什么是一个函数

一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

data: function () {
  return {
    count: 0
  }
}

原因:对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题

// 1.对象方式(所有重用的实例中的data均为同一个对象)
    var data = {
        x: 1
    };
    var vm1 = {
        data: data
    };
    var vm2 = {
        data: data
    };
    console.log(vm1.data === vm2.data);// true,指向同一个对象
    // 2.函数方式(所有重用的实例中的data均为同一个函数)
    var func = function () {
        return {
            x: 1
        }
    };
    var vm3 = {
        data: func
    };
    var vm4 = {
        data: func
    };
    console.log(vm3.data() === vm4.data()); // false,指向不同对象

参考博文:https://blog.csdn.net/qq_33576343/article/details/82793894

(6)v-show 与 v-if 区别

v-show只是在display:none和display:block之间切换。无论初始条件是什么都会被渲染出来,后面只需切换CSS,DOM还是一直保留。
v-if 初始值为false时,组件不会被渲染,直到条件为true,并且切换条件时会触发销毁/挂载组件。
对比来说,v-show在初始时有更高的开销,但是切换开销小,适于频繁切换的场景;v-if初始渲染开销小,切换时开销更高,不适合经常切换的场景。

参考:https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c024ecbf265da616a476638


















以上是关于前端整理——Vue部分的主要内容,如果未能解决你的问题,请参考以下文章

前端片段整理

前端VUE页面快速生成

Vue.js前端框架系统学习(10)——动态组件 & 异步组件

基于vue element-ui整理了一套Web后台的基础架构代码

回归 | js实用代码片段的封装与总结(持续更新中...)

前端防扒代码片段