《vue武林秘籍》(这篇全看懂,vue横着走)

Posted 前端扎啤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《vue武林秘籍》(这篇全看懂,vue横着走)相关的知识,希望对你有一定的参考价值。

传说前端江湖有一篇vue秘籍,看懂全篇,vue界即可横行霸道,共有X式招数。

第一式 v-if v-for

传说v-if与v-for不可以同时使用,主要是因为v-for的优先级高于v-if。

第二式 懒加载路由

传说在路由较多的时候,打包出现资源较多,进入单页面较慢等问题。则需要对路由进行按需加载,也称为懒加载,懒加载在江湖中主要有三种途径:

  1. 使用import
   component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue')

不指定webpackChunkName
组件会各自打包成一个js文件 指定后组件会打包成一个js文件

  1. 使用异步组件
component: resolve => 
     require(['@/components/index'],resolve)
  1. 使用webpack的ensure方法
component: resolve=> 
require.ensure([], () => resolve(require('@/components/index')), 'demo')

第三式 vue无法监测数组变化

通过索引修改数组的值,并不会使vue视图进行刷新

data() {
	return {
		test:[1,2,3]
	}
}


this.$set(this.test,0,4); //三个参数分别为 目标,索引,值   

第四式 vuex的表单处理

对vuex的state中定义数据使用双向绑定时,v-model会试图直接修改其值,但是state的数据必须在mutation中执行修改,否则会抛出异常。

有两种解决方案:

  • 第一种就是不用v-model 了改为 对input 进行监听 或者valuechange的变化
<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}
  • 第二种就是继续使用v-model 但是需要在计算属性中对其的set方法进行指定
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

第五式 vue-router的导航守卫

导航守卫都有哪些层次的?
一共有三种层次的,全局级,路由级和组件级。

  • 全局前置守卫 beforeEach
//为登录即为false
let isAuthenticated = false;
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

from 是从哪儿来 to是到哪儿去
如果去登录和注册页 则显示登录和注册页
如果不是则跳转到登录页

  • 全局解析守卫 beforeResolve

步骤:在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后。调用。

  • 全局后置钩子 afterEach
router.afterEach((to, from) => {
  // ...
})
  • 路由独享守卫 beforeEnter 与全局前置守卫的参数相同
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

-组件内守卫 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
  },
  beforeRouteUpdate(to, from, next) {
  },
  beforeRouteLeave(to, from, next) {
  }
}

第六式 为什么vue中的data必须是一个函数

反向思考一下如果data是一个对象的话。
在组件引入过程中,其实都是在操作同一个对象,由于组件的共享,data也在共享,所以data需要用函数返回一个对象的独立拷贝,以保持数据解耦。

第七式 嵌套路由

主要是children属性,详细看一下嵌套路由的demo:

{
    path: '/user/:id',
    component: User,
    children: [
      {
        path: '', // /user/:id
        component: userIndex
      },
      {
        path: 'others', // /user/:id/others
        component: userOthers
      },
      {
        path: 'detail',// /user/:id/detail
        component: userDetail
      }
    ]
  }

第八式 vue混入 Mixins

混合进入

混入在文档里的概念不容易理解,但在文档中提到了一个混合进入的概念。没错,其实mixins就是把自己的数据和方法混合进入到引入它的组件里。
在键名相同的比较过程中,优先组件的键值显示。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

第九式 vue项目中引入插件

引入element
引入echarts
引入vuex
引入vue-router

第十式 v-model的原理

v-model 是vue双向绑定的指令。可以将页面输入的值同步更新到相关绑定的data属性上,也会在data属性更新时,更新页面控件的值。这里可以详见双向绑定的原理,问v-model的原理即是问complie指令解析器的过程。

第十一式 组件间传值

父传子:props,子传父:$emit,非父子组件:bus事件总线法。

bus事件总线法的步骤:
首先创建一个bus的vue实例中间件
在需要通信的组件中都引入这个中间件
利用 e m i t 和 emit和 emiton进行发送和接收

第十二式 keep-alive

<keep-alive>
      <router-view></router-view>
</keep-alive>

使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

第十三式 vue中key的作用

key的主要作用是高效的 更新虚拟DOM
其原理是vue在patch过程中通过key可以精准的判断两个vnode节点是不是同一个,从而避免频繁更新不同元素,让整个过程更加高效,减少DOM操作量,提高性能。

第十四式 虚拟dom及vue中diff算法

什么是虚拟dom

当状态更新时,将新的javascript对象和旧的JavaScript对象进行比较(即diff算法),运算出两者的差异,将差异应用到真正的DOM,以此减少了DOM的操作

移步查看diff算法

第十五式 nextTick解决

  this.$nextTick(() => {
        const listRef = this.$refs.list;
        console.log(listRef.childNodes.length);
  });

nextTick的作用:将回调延迟到DOM 更新循环之后执行。 在修改数据时立即使用它,然后等待 DOM 更新,便可达到获取更新后的节点。

第十五式 基本功

单向数据流,MVVM,SPA单页应用,生命周期等
移步基本功解析

第十六式 VueX数据持久化

移步 vuex数据持久化

第十七式 route和router的区别

移步 route和router的区别

未完待续 待各路高手完善

以上是关于《vue武林秘籍》(这篇全看懂,vue横着走)的主要内容,如果未能解决你的问题,请参考以下文章

这些SQL优化技巧握在手,面试可以横着走……

Qt武林秘籍学习笔记摘要

Qt武林秘籍学习笔记摘要

HTML武林秘籍-上卷

武林秘籍之python接口测试

手把手这篇全链路压测实践教程