前端整理——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篇(代码片段)

 1、对vue的理解，他有什么特点，vue为什么不能兼容IE8及以下浏览器　　vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统　　vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会... 查看详情

为期两月的面试整理(代码片段)

目录一、js部分箭头函数与普通函数的区别Promiseasync和awaitjs继承事件循环机制（EventLoop）js事件阶段和事件委托js垃圾回收机制双等于‘==’引出的一系列违反常理的情况二、vue部分vue插件、指令、组件和过滤器vue组... 查看详情

自己总结的前端知识点（vue部分）(代码片段)

1.MVVM model-view-viewModel，model是数据与业务逻辑，view是UI界面，viewModel是一个对象用于实现model与view的同步。 ViewModel通过双向数据绑定把View层和Model层连接了起来。2.双向数据绑定vue.js是采用数据劫持结合发布者-订阅者模式的方式... 查看详情

前端笔记整理（vue）(代码片段)

...loader的不同webpack构建流程是？如何利用webpack来优化前端性能？如何提高webpack的构建速度？怎么配置单页应用？怎么配置多页应用？import和require的区别说说你对模块化的理解Vue中模板编译原理？Vue的性能... 查看详情

022.整理几个面试题——关于vue原理（简）(代码片段)

...，泛指后端进行的各种业务逻辑处理和数据操控对于前端来说就是后端提供的api接口View层：即视图层，也就是用户界面前端主要由HTML和CSS来构建ViewModel层& 查看详情

前端芝士树vue.js面试题整理/知识点梳理(代码片段)

【前端芝士树】Vue.js面试题整理MVVM是什么？MVVM是Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI组件，它负责将数据模型转化成UI展现出来。ViewModel监听模型数据的改变和... 查看详情

前端学习-基础部分-css(代码片段)

开始今日份整理1.CSS的导入方式CSS的导入方式主要是有内联模式，行内模式，外部样式表1.1内联模式内联模式：直接在<head>中直接写css，例如pcolor:rgb(166,226,226);#设置P标签的颜色1.2行内模式行内模式：在html中对应元素直接书... 查看详情

textchaincodeapi部分整理(代码片段)

查看详情

前端jquery部分简单整理

jQuery的介绍为什么要使用jQuery在用js写代码时，会遇到一些问题：window.onload事件有事件覆盖的问题，因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐，代码量多。代码很乱，各个页面到处都是。动画效果很... 查看详情

laravel+vue+element-ui前端项目一vue实现查看更多5(代码片段)

阅读目录预览Vue源码Vue添加代码部分Laravel后台Vue涉及页面源码E:\\pdf1\\cg\\src\\main.jsE:\\pdf1\\cg\\src\\components\\ViewMore.vueE:\\pdf1\\cg\\src\\components\\NavMenu.vue预览Vue源码Vue添加代码部分E:\\pdf1\\cg\\src\\main.js引入路由impor 查看详情

一篇超详细的vue项目前端自动化测试教学！(代码片段)

为什么需要写前端自动化大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？不写前端自动化... 查看详情

一篇超详细的vue项目前端自动化测试教学！(代码片段)

为什么需要写前端自动化大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？不写前端自动化... 查看详情

硅谷外卖前端部分-headertop组件(代码片段)

一、说明此组件会使用到slot进行组件间通信slot通信是标签,而不是单纯的数据二、components/HeaderTop/HeaderTop.vue<template><!--首页头部--><headerclass="header"><slotname="search"></slot><spanclass="header_tit 查看详情

前端常见问题整理(代码片段)

1、页面数据不允许修改实现页面中修改数据，若数据不允许被修改，有两种实现方式：1、将type改为type="hidden";(隐藏)2、加上属性：readonly="readonly"  查看详情

硅谷外卖前端部分-shoplist组件(静态)(代码片段)

一、图片资源二、components/ShopList/ShopList.vue<template><divclass="shop_container"><ulclass="shop_list"><liclass="shop_liborder-1px"><a><divclass="shop_left"><imgclass 查看详情

前端知识碎片整理(代码片段)

好久没用记事本写网页，今天用记事本编辑了一个，然后……乱码了解决办法：用记事本打开——另存为——将下方的编码手动改成utf-8——保存ul-li标签完成列表，ul-li是没有前后顺序的信息列表。<ul><li>一、努力</li... 查看详情

前端片段整理(代码片段)

更好阅读移步这里1.ES61.1.箭头函数：函数内的this对象，是定义时所在的对象，不是使用时所在的对象不可当构造函数用rest代替argumentthis指向一般可变，但在箭头函数中固定简单，单行，不会复用的函数建议使箭头函数复杂，行... 查看详情

vue后台管理系统实践方案总结(代码片段)

这个是一个电商管理系统的前端项目的笔记，这个项目主要包括登录/退出功能、主页布局、用户管理模块、权限管理模块、分类管理模块、参数管理模块、商品管理模块、订单管理模块等功能，我把里面部分的功能进行... 查看详情