背景:


一个项目完工在即,鉴于此,前端使用了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里的数据的更多相关文章

  1. vue里不同数据的循环,其中的数组对象

    用产品的属性数据说明 页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上 产品属性数据为: properties: &q ...

  2. Vue 核心之数据劫持

    前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现 ...

  3. vue里的渲染以及computed的好处

    如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...

  4. React对比Vue(01 数据的定义,使用,组件的写法,目录结构等)

    1.脚手架对比 两个都需要安装node node自带npm 然后安装cnpm yarn(有时候 npm会丢包,所以) npm install -g cnpm --registry=https://re ...

  5. vue实现对数据的增删改查(CURD)

    vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...

  6. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

  7. 深入解析Vue里函数的调用顺序介绍

    今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...

  8. Django数据操作F和Q、model多对多操作、Django中间件、信号、读数据库里的数据实现分页

    models.tb.objects.all().using('default'),根据using来指定在哪个库里查询,default是settings中配置的数据库的连接名称. 外话:django中引 ...

  9. TreeView树形控件递归绑定数据库里的数据

    TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...

随机推荐

  1. windows installer cleanup utility - Windows下卸载神器

    https://windows-installer-cleanup-utility.soft32.com

  2. Django框架之MVT(2)

    Django框架之MVT 1.        MVT模型 -     module:模型,和数据库相关的 -     template:模板,存放html文件,模板语法(目的是将变量如果巧妙的嵌入到h ...

  3. Codeforces 1175E(倍增)

    要点 与cf 1168C相似的一点都是看某点x最远能拓展到哪里 看数据想要在logn内查询,考虑倍增步数 const int maxn = 2e5 + 5, X = 5e5 + 5, LOG = 25 ...

  4. 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest A. Toda 2 贪心 + 暴力

    A. Toda 2 time limit per test 2 seconds memory limit per test 512 megabytes input standard input out ...

  5. Oracle ERP Interface堵住--Request Running too long time,查找Request执行的Sql

    Request Running too long time 堵住了INV Manager 导致INV Interface Pending 很多笔资料 Review 发现Request 实际执行SQL ...

  6. web APP到底和跨平台APP开发有什么区别?

    什么是web app? WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能. 说的浅显易懂点儿就是因为移动互联网特别火爆,很多企业公司也都想拥有一个属于自己的ap ...

  7. PHP 解决同一个IP不同端口号session冲突的问题

    在项目的开发阶段,我们经常会遇到几个站点共用同一个IP用不同端口号区分的形式!但是,这样很容易导致一个问题,session冲突丢失!即两个站点具有相同的session变量,清除session的时候即全 ...

  8. 数据库之游标过程-- 基于MySQL

    实例如下: DROP PROCEDURE IF EXISTS pr_change_station_user_acct_his; -- 如果存在存储过程,即删除存储过程 create procedure ...

  9. 关于火狐浏览器在ubuntu和安卓手机上的同步

    最近在ubuntu使用火狐浏览器,感觉还不错.我想着,如果在我的安卓手机上装一个火狐浏览器,我就可以在手机上查看电脑上所收藏的网站了.然后我就去安卓应用市场下载了最新版的火狐浏览器.令人奇怪的是,我在 ...

  10. ArrayList 源码分析(JDK1.8)

    ArrayList简介  ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess ...