vue里的数据
背景:
一个项目完工在即,鉴于此,前端使用了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里的数据的更多相关文章
- vue里不同数据的循环,其中的数组对象
用产品的属性数据说明 页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上 产品属性数据为: properties: &q ...
- Vue 核心之数据劫持
前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现 ...
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- React对比Vue(01 数据的定义,使用,组件的写法,目录结构等)
1.脚手架对比 两个都需要安装node node自带npm 然后安装cnpm yarn(有时候 npm会丢包,所以) npm install -g cnpm --registry=https://re ...
- vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...
- vue响应式数据变化
vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...
- 深入解析Vue里函数的调用顺序介绍
今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...
- Django数据操作F和Q、model多对多操作、Django中间件、信号、读数据库里的数据实现分页
models.tb.objects.all().using('default'),根据using来指定在哪个库里查询,default是settings中配置的数据库的连接名称. 外话:django中引 ...
- TreeView树形控件递归绑定数据库里的数据
TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...
随机推荐
- windows installer cleanup utility - Windows下卸载神器
https://windows-installer-cleanup-utility.soft32.com
- Django框架之MVT(2)
Django框架之MVT 1. MVT模型 - module:模型,和数据库相关的 - template:模板,存放html文件,模板语法(目的是将变量如果巧妙的嵌入到h ...
- Codeforces 1175E(倍增)
要点 与cf 1168C相似的一点都是看某点x最远能拓展到哪里 看数据想要在logn内查询,考虑倍增步数 const int maxn = 2e5 + 5, X = 5e5 + 5, LOG = 25 ...
- 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 ...
- Oracle ERP Interface堵住--Request Running too long time,查找Request执行的Sql
Request Running too long time 堵住了INV Manager 导致INV Interface Pending 很多笔资料 Review 发现Request 实际执行SQL ...
- web APP到底和跨平台APP开发有什么区别?
什么是web app? WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能. 说的浅显易懂点儿就是因为移动互联网特别火爆,很多企业公司也都想拥有一个属于自己的ap ...
- PHP 解决同一个IP不同端口号session冲突的问题
在项目的开发阶段,我们经常会遇到几个站点共用同一个IP用不同端口号区分的形式!但是,这样很容易导致一个问题,session冲突丢失!即两个站点具有相同的session变量,清除session的时候即全 ...
- 数据库之游标过程-- 基于MySQL
实例如下: DROP PROCEDURE IF EXISTS pr_change_station_user_acct_his; -- 如果存在存储过程,即删除存储过程 create procedure ...
- 关于火狐浏览器在ubuntu和安卓手机上的同步
最近在ubuntu使用火狐浏览器,感觉还不错.我想着,如果在我的安卓手机上装一个火狐浏览器,我就可以在手机上查看电脑上所收藏的网站了.然后我就去安卓应用市场下载了最新版的火狐浏览器.令人奇怪的是,我在 ...
- ArrayList 源码分析(JDK1.8)
ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess ...