本篇博客主要记录本人对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我没接触过，可能项目的业务需求没达到，在这里就不做过多的解释了。下篇博客再接着叙述！
附语：最近很多小伙伴一直鼓励我说要坚持！我最近状态确实不太好，多谢大家的关心，我会挺下来的，大家一起加油！！！
晚安
原文地址：https://www.cnblogs.com/sweet-ice/p/11192508.html