vue里的数据

sugarmo 发布于2019-08-23 12:34 / 2870人阅读

摘要：本文主题里数据的处理存放数据我们先看里哪里能存放数据单个文件里。官方插件，作为一个集中管理经常复用的数据很有用。数据传递数据传递也分几种情况全局传递。数据的修改有以下几个别去修改，本身就是基于依赖，但是是个很好的展示数据容器。

背景：

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

GPU云服务器云服务器 html里的常用数据 js里的数据格式 js获取里的数据 java里的数据结构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98758.html

酷狗音乐- Vue / React 全家桶的两种实现

摘要：引言两个月前用全家桶实现过一次酷狗音乐，最近又用全家桶重构了下，最终成果和的实现基本一致，放个图手机预览戳版本版本。的行为结构表现分离，很明显，而的分离虽然不是很明显，但实际上也是有的。发送指令，最终会到里合并数据，与中的类似。引言两个月前用 Vue 全家桶实现过一次酷狗音乐，最近又用 React 全家桶重构了下，最终成果和 Vue的实现基本一致，放个图： showImg(htt...

hot_pot_Leo 2019-08-23 14:57 评论0 收藏0
【干货】vue源代码简单解析

摘要：解析器的状态机设计首先要说文件夹里有各种财宝等着大家挖掘认真看一看一定不会后悔的主要的职责是可以把一个数据里的某一个路径下的数据取出来，比如所以对字符串的解析成为了它的关键。最近饶有兴致的又把最新版 Vue.js 的源码学习了一下，觉得真心不错，个人觉得 Vue.js 的代码非常之优雅而且精辟，作者本身可能无 (bu) 意 (xie) 提及这些。那么，就让我来吧：）程序结构梳理 s...

ccj659 2019-08-21 11:55 评论0 收藏0
Vue.js 源码学习笔记

摘要：实际上，我在看代码的过程中顺手提交了这个，作者眼明手快，当天就进行了修复，现在最新的代码里已经不是这个样子了而且状态机标识由字符串换成了数字常量，解析更准确的同时执行效率也会更高。最近饶有兴致的又把最新版 Vue.js 的源码学习了一下，觉得真心不错，个人觉得 Vue.js 的代码非常之优雅而且精辟，作者本身可能无 (bu) 意 (xie) 提及这些。那么，就让我来吧：）程序结构梳...

darkbaby123 2019-08-23 13:44 评论0 收藏0
Vue.js 源码学习笔记

摘要：实际上，我在看代码的过程中顺手提交了这个，作者眼明手快，当天就进行了修复，现在最新的代码里已经不是这个样子了而且状态机标识由字符串换成了数字常量，解析更准确的同时执行效率也会更高。最近饶有兴致的又把最新版 Vue.js 的源码学习了一下，觉得真心不错，个人觉得 Vue.js 的代码非常之优雅而且精辟，作者本身可能无 (bu) 意 (xie) 提及这些。那么，就让我来吧：）程序结构梳...

jsdt 2019-07-25 14:34 评论0 收藏0