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

Posted 2021-09-24 前端扎啤

传说前端江湖有一篇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文件

2. 使用异步组件

component: resolve => 
     require(['@/components/index'],resolve)

3. 使用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实例中间件
在需要通信的组件中都引入这个中间件
利用$emit和$on进行发送和接收

第十二式 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的区别

未完待续 待各路高手完善