背景:
一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅,
会涉及到我所运用到的vue相关知识,需要一定的js基础。
默认vue的single-file-components(单文件组件开发)既sfc。
本文主题
vue里数据的处理
存放数据
我们先看vue里哪里能存放数据:
1.单个vue文件里。
2.官方插件vuex,作为一个集中管理经常复用的数据很有用。
3.直接声明在vue实例上,用$号标识。
第一种情况下存放数据对于单个文件又分这几种属性
1.1 data(常规使用,默认函数返回:忘记为啥了)
1.2 computed(计算,也就说,这是一个基于其他属性的属性)
1.3 watch(监听属性,官方推荐在此分类下的属性用于触发异步函数)
1.4 props(特殊,用来接收父组件向子组件传递的属性)
1.5 propsData(特殊,貌似是用来测试的)
第二种情况下数据存放都在state里
第三种情况是特别特别特别的,不讨论(都有vux,还用什么$号啊)。
数据传递
数据传递也分几种情况
1.全局传递。
2.父向子传递。
3.子向父传递。
第一种情况,请使用vuex,注意刷新会清空
第二种情况,子声明props,父在子组件上声明这个属性,就能传递下去
第三种情况,一般情况就用事件提交,父监听子声明的事件,然后就能接收到了
这里对props和事件做个特殊说明,假如运用了第三方的vue框架,你可能就是封装一下
对方的组件使其变成专用的子组件,这个时候,方法啊,属性啊,都在第三方组件上
而你封装的木有。如果一个个在去声明,第三方组件的props或者event着实累,自然有
简便的api啦。vm.$attrs,vm.$listener,然后你封装的子组件就把所有事件和属性都会被
第三方的组件所监听。vm.$listener,除法你开发了特殊的指令,否则,不用官网那样声明,第三方声明的事件都会被监听。
数据的修改
有以下几个note:
1.computed
别去修改,本身就是基于依赖,但是computed是个很好的展示数据容器。它原本是只有get方法,但是可以声明set方法。
2.watch
有两个属性,deep和immediate,一个是深度检测,一个是立即执行,相当于任务队列的第一个触发,deep不如直接用"foo.bar"的形式来监视.
如果同时监视N个属性,而这几个属性又都有关联性,个人推荐,这个时候,不要用watch,不如去监听事件,用switch语句更加方便,尤其是在有异步方法存在的时候,异步队列搞得心都碎了。
3.props
最好有默认值
4.比较简单便捷的方式,是引用某个组件,参开api里的ref。
原文地址:https://segmentfault.com/a/1190000016820628