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

谁借莪１个温暖的怀抱￠ 2022-09-10 10:15 137阅读 0赞

> 传说前端江湖有一篇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的变化

// ...
    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][element]  
[引入echarts][echarts]  
[引入vuex][vuex]  
[引入vue-router][vue-router]

### 第十式 v-model的原理 ###

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

### 第十一式 组件间传值 ###

父传子：props，子传父：$emit，非父子组件：bus事件总线法。

> bus事件总线法的步骤：  
> 首先创建一个bus的vue实例中间件  
> 在需要通信的组件中都引入这个中间件  
> 利用 e m i t 和 emit和 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算法][diff]

### 第十五式 nextTick解决 ###

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

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

### 第十五式 基本功 ###

单向数据流，MVVM，SPA单页应用，生命周期等  
移步[基本功解析][Link 1]

### 第十六式 VueX数据持久化 ###

移步 [vuex数据持久化][vuex 1]

### 第十七式 route和router的区别 ###

移步 [route和router的区别][route_router]

> 未完待续 待各路高手完善

[element]: https://blog.csdn.net/qq_43277404/article/details/120151817?spm=1001.2014.3001.5501
[echarts]: https://blog.csdn.net/qq_43277404/article/details/120080153?spm=1001.2014.3001.5501
[vuex]: https://blog.csdn.net/qq_43277404/article/details/120059026?spm=1001.2014.3001.5501
[vue-router]: https://blog.csdn.net/qq_43277404/article/details/120053734?spm=1001.2014.3001.5501
[diff]: https://blog.csdn.net/qq_43277404/article/details/118752958?spm=1001.2014.3001.5501
[Link 1]: https://blog.csdn.net/qq_43277404/article/details/118878051?spm=1001.2014.3001.5501
[vuex 1]: https://blog.csdn.net/qq_43277404/article/details/119330549?spm=1001.2014.3001.5501
[route_router]: https://blog.csdn.net/qq_43277404/article/details/119248185?spm=1001.2014.3001.5501