computed，watch

computed: 在初始化子组件构造器的时候，会判断是否有computed属性，然后如果有，就对其进行处理，将对应computed的属性设置在原型上，并且拦截了他的get为createComputedGetter返回值，在原型上定义是为了多组件共享

初始化执行init时，会执行initState，然后执行initComputed，然后创建一个watcher，然后将computed对用的函数传入，赋值给watcher的getter，然后把watcher放在vm._computedWatchers下

然后再render过程，会访问到对应的computed内定义的变量，由于最开始说了get被拦截，所以会走到createComputedGetter，首先我们会拿到初始化的时候定义的watcher

然后执行watcher.evaluate();求值，走到this.get()，然后首先执行pushTarget(this)，将Dep.target改为computed Watcher，然后执行this.getter,即computed对应的函数，然后函数里会有对应的响应式变量，所以会走到对应的get逻辑，添加computed Watcher为他的订阅者

然后执行watcher.depend，往watcher里添加订阅者，即组件的渲染watcher

当数据发生变化时，会触发notify，通知变化，同之前，会走到watcher.run，执行this.get()，重新收集依赖等，然后判断值是否改变了，然后更新

watch: watch流程较为简单，初始化执行init时，执行initState，然后执行initWatcher，然后执行createWatcher逻辑，其实就是执行了一次vm.$watch，然后执行new Watcher，注意此时expOrFn可能是一个string，然后执行parsePath逻辑，将返回的函数赋值getter，然后有执行get，然后再去执行getter，执行getter会将vm传入，然后这个时候obj就是vm，所以后面会访问到obj上的变量，所以触发getter以来收集，由于之前执行get（）时，Dep.target为userWatcher，所以就会收集这个userWatcher，然后变化的时候，在通知更新

function parsePath (path) {if (bailRE.test(path)) {return}var segments = path.split('.');return function (obj) {for (var i = 0; i < segments.length; i++) {if (!obj) { return }obj = obj[segments[i]];}return obj}
}

computed，watch相关推荐

vue，computed，计算属性
vue,computed,计算属性用法: computed: {didiFamily: {// getterget: function () {return this.data_i + ' ' + ...
ts watch路由参数变化_TypeScript基础（六）：TS 在 Vue 中的用法，data，生命周期，methods，computed，props，watch，$emit...
其实 ts 在 vue 的环境下,我们经常用的一个东西就是上一篇博客讲的装饰器. 装饰器一般情况下有三种用途: 1,装饰整个类. 2,装饰某一个方法. 3,装饰某一个属性. 而这三种用途对 vue 来 ...
computed set 自定义参数_完全理解Vue的渲染watcher、computed和user watcher
作者:Naice https://segmentfault.com/a/1190000023196603 这篇文章将带大家全面理解vue的watcher.computed和user watcher,其 ...
input js 离开事件_听说你熟练使用Vue.js，这9种Vue技术你掌握了吗？
现在,Vue.js已成为前端开发的热门框架.有很多工程师利用Vue.js的便利性和强大功能.但是,我们完成的某些解决方案可能未遵循最佳做法.好吧,让我们看一下那些必备的Vue技术. 1. 函数组件函 ...
10分钟，快速使用VUE-VUEX
2019独角兽企业重金招聘Python工程师标准>>> vuex 主要服务于中大型的单页应用(比较小的就没必要了),是一个类似于 Flux 的一个数据管理框架,让我们的应用内的的 ...
computed vs methods
computed vs methods 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. ...
js 数组修改watch_前端面试：专注Vue.js常见的问题答疑，掌握了基本上Vue就过关了...
v-show 与 v-if 区别第一题应该是最简单的,提这个问题,也是想让候选人不那么紧张,因为但凡用过 Vue.js,多少知道 v-show 和 v-if 的区别,否则就没得聊了.不过这最简单的一 ...
vue深究第一弹：computed与watch的异同
最近在开发vue的过程中,不断用到了计算属性(computed)和观察者(watch),从逻辑上感觉它们很相似,但是尝试混用它们的时候,又出现了一些问题,那么它们到底有什么异同呢? 1. comput ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...

computed，watch

computed，watch相关推荐

最新文章

热门文章