关于vue、vuex的一些初步小结

一、Vue组件的创建

一般语法:

Vue.component(tagName, options)
  • 务必在根组件实例化之前注册组件

组件options说明:

  • data: 必须是一个函数,目的在于返回独立的对象,保证组件之间的数据不互相影响
  • components: 局部注册一个组件,仅在当前组件作用域内可用
  • props: 用于父组件向子组件传递数据时使用,可传静态属性,也可传动态的(数据绑定,父组件数据变化引起子组件数据相应变化),一次性传递所有属性可采用v-bind指令
  • computed: 计算属性,在部分情况下可以代替watch的功能,也可用于:class的动态绑定
  • watch: 即属性侦听器,接受参数newData, oldData,含义顾名思义
  • methods: 定义组件内的方法
  • 生命周期函数:beforeCreate, created, beforeMount, mounted, updated, beforeDestroy, destroyed,其具体含义可参照官方文档

二、组件间数据传递

来看看文档里一段值得参考的语法(位置:组件-自定义事件-.sync修饰符):

<comp :foo="bar" @update:foo="val => bar = val"></comp>
  • :foo="bar"即父组件向子组件传递属性foo,vue中采用单向数据流,这里是为了让父组件的数据和数据的改动(若有的话)传递到子组件上,供子组件使用
  • update为vue生命周期函数,在数据变化前调用
  • 这里update部分事实上为v-on的缩写,作用是监听子组件中foo的改变并调用对应的处理器
  • 子组件向父组件发布事件(emit)会触发父组件设置的监听器(如果你设置了的话)

好了,这里涉及的概念可能比较多,所以再多解释一下吧~为了逻辑上更加清新,vue是不推荐子组件改变父组件的数据的,主要是出于维护成本的考虑,这就是所谓的单向数据流。父组件可以通过改变prop影响子组件数据,而子组件可以通过emit触发父组件方法。

但是,如果这样的数据传递不仅仅限于父子组件之间,而是祖先与后代组件或是兄弟组件呢?显然这会是一件很麻烦的事,为了处理这种多状态、多通信的情形,我们引入了vuex。

三、vuex的使用

如果你之前使用过flux、redux等状态状态管理工具的话,那么应该会很容易理解这个工具是要做什么~

下面依次介绍一下state、mutation和action这三个核心概念:

state

是一个持久化存储的状态,不归属于vue的某个特定组件,除非刷新页面,否则数据不会消失~

在根实例中注册store,下发到所有子组件,使用如下:

computed: {
  count () {
    return this.$store.state.count
  }
}

如果想要简化定义,使用mapState辅助函数就可,使用时从vuex引入该方法就可。

mutation

state的值不能直接被操作,想要改变它必须通过提交mutation的形式进行,方式为:

store.commit('something', payload)

注意一下第二个参数,这是以载荷形式提交参数,参数最多一个,想传多个参数的话必须以对象的形式提交。

mutation只能是同步函数,原因是devtool无法捕捉异步函数的快照。

action

为了执行异步操作,vuex引入了action来完成这一工作,调用方式是用dispatch方法,简化写法与state和mutation是类似的,值得看看的是将它和es6的promise和es7的async与await结合起来的工作原理:

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

这个action返回了一个Promise对象,可以在后续进行处理,同时action中也可以调用其他异步action。

除了这三个概念外,还有getter(类比计算属性,用于从state派生出一些值)、module(分割较大的状态树,便于管理)。

处理表单可手动监听input、change或是使用带setter的双向绑定计算属性。


前端开发
我的前端学习之路
79 声望
2 粉丝
0 条评论
推荐阅读
BFF初探
在前后端联调时,有些麻烦出现的频率不低而且可能会较大程度影响开发效率,其中就包括前后端对接口数据格式设计的差异。两者一是基于领域模型,一是基于用户交互,因此设计出来的数据结构经常有差异,使得前端从...

太子长琴7阅读 9.1k

Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.7k评论 81

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

79 声望
2 粉丝
宣传栏