谈谈VUE种方法观察和计算的区别和联系

　　

<强>从作用机制和性质上看待方法,观察和计算的关系

　　

图片标题(原创):《他三个是啥子关系呢?》

　　

　　计算:{ 　　fullName:函数(){返回。姓+名} 　　} 　　 　　

你在取用的时候,用this.fullName去取用,就和取数据一样(不要当成函数调用! !)

　　

3.看:类似于监听机制+事件机制:

　　

例如: 　　 　　 　　看:{ 　　firstName:函数(val) {。fullName=val +。lastName} 　　} 　　 　　

firstName的改变是这个特殊”事件”被触发的条件,而firstName对应的函数就相当于监听到事件发生后执行的方法

　　

　　

说了这么多,下面先对观察和计算

　　

　　

首先它们都是以Vue的依赖追踪机制为基础的,它们的共同点是:都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生”自动”的变化

　　

我们当然可以自己写代码完成这一切,但却很可能造成写法混乱,代码冗余的情况.Vue为我们提供了这样一个方便的接口,统一规则

　　

但观察和计算也有明显不同的地方:

　　

观察和计算各自处理的数据关系场景不同

　　

1.看擅长处理的场景:一个数据影响多个数据

　　

2.计算擅长处理的场景:一个数据受多个数据影响

　　

　　

,

　　

(具体的看上图就好了,这里不再赘述)

　　

对于手表,我们先从一个场景说起

　　

在《海贼王》里面,主角团队的名称叫做:“草帽海贼团”

　　

所以我们把船员依次称为:

　　

草帽海贼团索隆,草帽海贼团娜美,以此类推…

　　

我们希望:当船团名称发生变更的时候,这艘船上所有船员的名字一起变更! !

　　

例如: 　　

有一天,船长路飞为了加强团队建设,弘扬海贼文化,决定“草帽海贼团”改名为“橡胶海贼团”(路飞是橡胶恶魔果实能力者)

　　

我们代码如下:,

　　 　　 　　var vm=new Vue ({ 　　埃尔:“#应用”,/* 　　选的数据项中的数据: 　　1.haiZeiTuan_Name——比;海贼团名称 　　2.船员的名称=海贼团名称(草帽海贼团)+船员名称(例如索隆) 　　 　　这些数据里存在这种关系: 　　(多个)船员名称数据——比;依赖于——比;(1个)海贼团名称数据 　　一个数据变化——→多个数据全部变化 　　*/数据:{ 　　haiZeiTuan_Name:“草帽海贼团”, 　　suoLong:“草帽海贼团索隆”, 　　naMei:“草帽海贼团娜美”, 　　xiangJiShi:“草帽海贼团香吉士” 　　},/* 　　在观察中,一旦haiZeiTuan_Name(海贼团名称)发生改变 　　选的数据项中的船员名称全部会自动改变(suoLong、naMei xiangJiShi) 　　并把它们打印出来 　　*/看:{ 　　haiZeiTuan_Name:函数(新名称){ 　　这一点。suoLong=新名称+“索隆” 　　这一点。naMei=新名称+“娜美” 　　这一点。xiangJiShi=新名称+“香吉士” 　　console.log (this.suoLong) 　　console.log (this.naMei) 　　console.log (this.xiangJiShi) 　　} 　　} 　　}）//更改看选项中监控的主数据 　　vm。haiZeiTuan_Name='橡胶海贼团的 　　 　　

谈谈VUE种方法观察和计算的区别和联系