码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-16 09:12:55      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:方法   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!