Vue中的选项/数据(data、props、computed、methods、watch)

前言:一直在看vue代码,对于vue的选项/数据一直不是很理解。现在进行简单的总结下(官方解释很好,进行归纳)。

data

Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data的属性能够响应数据变化。data必须只能是数据。实例创建之后,可以通过vm.data访问原始对象。Vue实例也代理了data对象上所有的属性,因此访问vm.a等于访问vm.data.a

props

props可以使数组或对象,用于接收来自父组件的数据。porps可以使简单的数组,或者使用对象作为代替,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。
示例:

Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法,提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

props写在子组件之中,里面存放的是父组件传递过来的数据。在父组件中,通过import导入子组件进行使用,在<子组件名 v-bind:子组件props中的属性="父组件中的数据">。这样子组件中props中的属性就得到了父组件传递过来的数据。

Vuex与props和data的区别:
Vuex是为了保存组件之间共享数据而诞生的,如果组件之间有共享的数据,可以直接挂载到Vuex中,而不必通过父子组件之间传值了,如果组件的数据不需要共享,此时,这些不需要共享的私有数据,没有必要放到vuex中;
1)只有共享的数据,才有权利放到Vuex中;
2)组件内部私有的数据,只要放倒组件的data中即可;
3)Vuex是一个全局的共享数据存储区域,相当于一个数据的仓库

computed

计算属性将混入到Vue实例中。所有getter和setter的this上下文自动地绑定Vue实例。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。

methods

methods将被混入到Vue实例中。可以直接通过VM实例访问这些方法,或者在指令表达式中使用。方法中的this自动绑定为Vue实例。

watch

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以使方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。

computed 与 methods 的区别

1.computed定义的方法我们是以属性访问的形式调用的。computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值。
2.methods定义的方法是以函数的形式调用的。

computed 与 watch 的区别

1.computed特性:
1.1是计算值,
1.2应用:简化tempalte里面{{}}计算和处理props或$emit的传值
1.3具有缓存性:页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
2.watch特性:
2.1是观察动作
2.2应用:监听props和emit或本组件的值执行异步操作
2.3无缓存性:页面重新渲染时值不变化也会执行

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容