标签：psd   直接   基于   前端   背景   专用   watch   media   switch语句   

背景：

一个项目完工在即，鉴于此，前端使用了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

vue里的数据

标签：psd   直接   基于   前端   背景   专用   watch   media   switch语句   

原文地址：https://www.cnblogs.com/lalalagq/p/9900945.html