近期工作以来对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的新认知及使用心得的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0之监听属性的使用心得及搭配计算属性的使用

正则表达式基础及使用心得

心得编写服务端的相关设计心得及体会

领域设计及实现的心得

Android 颜色(不)透明度的使用及项目开发中的心得总结

Android 颜色(不)透明度的使用及项目开发中的心得总结