近期工作以来对vue的新认知及使用心得（一）

标签：方法   api文档   使用   改变   store   htm   style   一点   before   

本篇博客主要记录本人对Vue使用很顺畅的几个方面

一、深入浅出响应式原理

在这块你要去理解这几个词语，数据劫持（数据代理），依赖收集 ，发布订阅模式。

vue 让我感触最深的是 数据驱动带来的魅力，那种牵一发而动全身，一变则万变的那种妙不可言！

在这里想问一问小伙伴在vue里那些选项中的数据可以直接被当前的 this 去调用呢？

首先60%的人会毫不犹豫的说 data 里定义的数据。嗯一看就是刚接触vue不深的小伙伴

其次就是会有一些经验的小伙伴会说computed中计算好了的数据（在这里一定有一个常见的坑，关于你对computed和watch这两个选项的认知和区别，这一点我会后面带小伙伴脱坑，先别急往下看）

还有就是一些老司机了父组件中传来的props中的数据（这里面也涉及了一个常用的考题就是父子组件如何传值，那么慢慢往深的地方开始拓展vue 传值又有哪几种方式呢？）

最后一种回答应该大家也能想到就是vuex中保存到state中的值（哈哈哈vuex你值得拥有强烈建议）

二、路由（vue-router）

在这里直接聊路由进阶了哈！！！（关于路由的基础，重定向、懒加载、路由元信息等这些我曾经都写过相关博客，自行翻阅，如若未找到请私信我因为会涉及公司机密）

这块只想谈以下几点（也是工作中会用到的频率最高的几点）：

• 路由的全局守卫

const router = new VueRouter({ ... })

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

• 路由的后置钩子

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

• 路由组件内的守卫

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

使用详情请参考官网api文档

三、Vuex（数据的状态管理库）

（在这儿不免笑了起来当初就是因为对vuex的深刻理解才拿到了这份offer，总之机会是留给有准备的人，然后你才能笑着对别人说自己运气很好）

插入一段代码让小伙伴看的更加清晰哈，可直接复制粘贴在实际的开发过程中去运用，拿走不谢哈

• 在对应的模块文件中写入对应的state、mutation、getters，然后再这Moudle中去注册该模块即可

const app = {
    state: {  //存放数据
        list: []
    },
    mutations: {  // 改变数据（通常拿到后台数据然后通过this.$commit()存入state中）
        changeList (state,data) {
            state.list = data
        }
    },
    getters: {  // 通常与computed和辅助函数结合，下面会有实例
        getList: state=> state.list 
    }
}                

• 记得显式添加状态到vuex中，this.$store.commit()
• 取vuex中的数据的时候要用到 this.$store.state 这个方法
• 经常用computed这个属性去拿getters的数据 (...mapGetters这个辅助函数)

computed: {
  ...mapGetters {
            list: ‘getList‘
    }      
}

  另外actions我没接触过，可能项目的业务需求没达到，在这里就不做过多的解释了。下篇博客再接着叙述！

附语：最近很多小伙伴一直鼓励我说要坚持！我最近状态确实不太好，多谢大家的关心，我会挺下来的，大家一起加油！！！

晚安

近期工作以来对vue的新认知及使用心得（一）

标签：方法   api文档   使用   改变   store   htm   style   一点   before   

原文地址：https://www.cnblogs.com/sweet-ice/p/11192508.html