美文网首页
计算属性及data为什么是函数

计算属性及data为什么是函数

作者: Betterthanyougo | 来源:发表于2019-10-08 18:28 被阅读0次

计算属性:computed

compute是一个计算属性,主要用在监听页面中变动的元素,以及要计算的地方,比如要用过单价算总价钱,以及通过两个字符串拼接成一个新的字符串,搜索框中通过输入的值来进行查询,等等。

比如在拼接字符串的时候,给了firstName.lastName.要求出fullName,一下分别对应了三种不同的操作,都可以实现拼接字符串。但是明显第一种方法是比较麻烦的,第三种方法中命名是一个值,但是写的却是一个函数,不易理解,第二种方法最符合体验,就是一个值的表达式。

computed因为内部有一个get方法,该方法返回的是一个值,所以computed即是是一个函数,到页面却是一个值得原因。

    {{firstName+""+lastName}}    {{fullName}}     {{fullName1()}}

,

computed和methods的对比

在执行方法时,computed会保存计算出来的结果,直至这个结果被改变。所以在执行同一个操作时,该方法只会被调用一次,而methods每调用一次都会重新查询。看下图,分别执行三次computed和methods,computed只被调用了  一次,而methods被调用了三次。

computed实现原理:

computed内部有两个方法,set,get.set用于在属性改变时触发,该方法一般用不到,所以computed的主体内容就是get,用于获取计算后的结果。如下图:

在改变了fullName的时候,就会触发这个set方法。因为一般set不用,所以computed基本就是一个get属性,因此简写成了上述的模式,直接就是fullName

data为什么是函数

组件讲究的是复用性,所以各个组件的引用值必然不能相互影响。如果这里的data像父组件中的data那样直接返回一个对象,那么如果有一处调动并修改了data的值,那么所有引用这个data的地方都会受到影响,这是不合理的。因此,data是一个函数,函数里返回一个对象。

这样各个地方在调用的时候,就相当于实例化了这个对象,我们知道,实例化的对象,每个对象都不会影响到其他的对象里的值,所以这就是为什么data是一个函数。

相关文章

  • 计算属性及data为什么是函数

    计算属性:computed compute是一个计算属性,主要用在监听页面中变动的元素,以及要计算的地方,比如要用...

  • vue 数据

    props 中声明的数据,和组件data函数return 的数据,都可以在模板 template 及计算属性com...

  • vue中的computed计算属性

    计算属性普通函数赋值或简易成员函数 赋值 都可以,不要使用箭头函数 特点 计算属性关联的data如果发生变化,会重...

  • 初识 vue 常见方法,属性

    生命周期钩子函数 beforeCreate 组件实例刚被创建,组件属性计算之前,如data属性等created ...

  • 组件避免冲突

    组件中data为什么是一个函数 子组件中的 data 属性值会相互影响,如果组件中 data 选项是一个函数,那么...

  • 适合初学者的Vue-1.0教程(三)

    计算属性 计算属性和data对象属性都是可以直接在DOM上直接使用的 但计算属性可以获取data对象属性,根据获取...

  • 03.vue3-组合API(下篇)

    组合API-computed函数 定义计算属性: computed函数,是用来定义计算属性的,计算属性不能修改。基...

  • Vue3.x computed函数----计算属性

    基础用法:(只读)----computed是个函数 computed函数,是用来定义计算属性的,计算属性是不能被修...

  • Vue笔记

    mint-ui vue生命周期钩子函数/beforeCreate 组件实例刚被创建,组件属性计算之前,如data属...

  • vue技术点

    基础 data为啥使用函数返回一个对象防止多个组件实例共享状态。 计算属性vs侦听器computed属性具有缓存效...

网友评论

      本文标题:计算属性及data为什么是函数

      本文链接:https://www.haomeiwen.com/subject/gnhipctx.html