vue——computed,watch,methods之间的区别以及各自的使用场景

原创 minsong 随笔 Vue 284阅读 2018-05-04 14:02:06 举报

1.computed

1.computed是一个计算属性,对绑定到view的数据进行处理,并监听变化,如下案例:

fullName不可在data里面定义,如果定义会报错,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值

计算属性的 setter
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

2.watch

watch和computed很相似,watch用于观察和监听页面上的vue实例,当然在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。

如果在data中没有相应的属性的话,是不能watch的,这点和computed不一样。
watch监听对象及对应值的变化详解
1.主要有三种情况,第一个是简单的数据类型,第二个是复杂数据类型,第三个是监听对象的单个属性

a是一个普通的值,当a的值变化时会被监听到,b是一个对象,不能直接像a那么写,需要深度监听才能捕捉到,但是当我想去捕捉b对象中某一个值的变化时却发现,打印出来的两个值是不一样的,这样就只能知道对象发生变化却不知道具体哪个值发生了变化,如果想监听对象某一个值得变化可以利用计算属性

用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化。watch如果想要监听对象的单个属性的变化,必须用computed作为中间件转化,因为computed可以取到对应的属性值

3.methods

方法,跟前面的都不一样,我们通常在这里面写入方法,只要调用就会重新执行一次,相应的有一些触发条件,在某些时候methods和computed看不出来具体的差别,但是一旦在运算量比较复杂的页面中,就会体现出不一样。
需要注意的是,computed是具有缓存的,这就意味着只要计算属性的依赖没有进行相应的数据更新,那么computed会直接从缓存中获取值,多次访问都会返回之前的计算结果。

4.computed的原理介绍(晕)——内容是:链接标题

先来看一下官网的一个例子:

data 属性初始化 getter setter:

computed 计算属性初始化

无论是属性还是计算属性,都会生成一个对应的 watcher 实例。

上面多出提到了 dep.depend, dep.notify, Dep.target,那么 Dep 究竟是什么呢?
Dep 的代码短小精悍,但却承担着非常重要的依赖收集环节。

总结一下依赖收集、动态计算的流程:

  1. data 属性初始化 getter setter
  2. computed 计算属性初始化,提供的函数将用作属性 vm.reversedMessage 的 getter
  3. 当首次获取 reversedMessage 计算属性的值时,Dep 开始依赖收集
  4. 在执行 message getter 方法时,如果 Dep 处于依赖收集状态,则判定 message 为 reversedMessage 的依赖,并建立依赖关系
  5. 当 message 发生变化时,根据依赖关系,触发 reverseMessage 的重新计算
    Vue 是一个设计非常优美的框架,使用 Getter Setter 设计使依赖关系实现的非常顺其自然,使用计算与渲染分离的设计(优先使用 MutationObserver,降级使用 setTimeout)也非常贴合浏览器计算引擎与排版引擎分离的的设计原理。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复