近期工作以来对vue的新认知及使用心得
Posted sweet-ice
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了近期工作以来对vue的新认知及使用心得相关的知识,希望对你有一定的参考价值。
本篇博客主要记录本人对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的新认知及使用心得的主要内容,如果未能解决你的问题,请参考以下文章