vue的computed如果没有出现在模板里面，当它依赖的响应式属性发生变化，getter会触发吗？

有知乎网友问:

vue的computed如果没有出现在模板里面，当它依赖的响应式属性发生变化，getter会触发吗？

先说答案，不会触发！

原因说穿了其实也很简单，因为你没有在模板中使用该计算属性，所以该计算属性所依赖的的响应式属性不认为你这个计算属性有依赖它，所以它改变了就不会去通知计算属性getter做任何事情。

再往深点说，原因就是因为计算属性watcher在这种情况下没有被作为依赖收集到它依赖的响应属性上，所以就算该响应属性变出了大呲花也不会通知计算属性watcher去触发getter来求值的。

下面会详细点阐述下为什么会这样子？

计算属性的实现是这样子的，举个例子，当我们在我们的组件中写了：

{data: {counter: 1}computed: {twiceCounter: function() {return this.counter * 2;}}

那么vue在初始化组件的时候，会经历以下这些流程

为该计算属性创建一个计算属性watcher，但，问知道计算属性是惰性求值的，所以这时并不会触发任何求值和收集依赖的动作
跟着，vue会在组件实例对象中增加一项叫做‘twiceCounter’的key，然后通过defineProperty重写其getter为computedGetter的方法。这就是为什么我们可以直接通过this.twiceCounter访问我们的计算属性的原因
然后，在这种情况下就真的没有然后了！

如果你页面模板中有引用计算属性如twiceCounter的话，那么我们就有然后：

组件初始化过程中会触发虚拟dom的重新生成，即render方法也就是传奇的h函数调用，期间会分析读取页面引用的data和computed的数据，当然也包括我们这里的计算属性了
一旦访问计算属性，就会触发其getter，也就是我们上面的computedGetter,
这时computedGetter就开始做事情了。computedGetter会调用计算属性watcher来开始调用我们写的计算属性getter求值并进行依赖收集，让计算属性watcher成为依赖响应式属性counter的依赖

所以，这里如果依赖的响应属性发生变化，必然会触发计算属性watcher来调用我们写的计算属性getter求值。

但是，可惜的是，你页面模板没有引用我这个计算属性，导致我这个计算属性的watcher根本没有加入到counter这个响应属性的依赖中，所以，就算我counter改变后想通知你也无门了！

以上回答如果看起来有点吃力的话，建议先看下我其他一些说vue原理的文章：

《Vue源码之计算属性watcher》
《Vue源码分析基础之响应式原理》
《Vue源码实现之watcher拾遗》

我是@天地会珠海分舵，能力一般，水平有限，觉得我说的还有那么点道理的不妨点个赞关注下！

vue的computed如果没有出现在模板里面，当它依赖的响应式属性发生变化，getter会触发吗？相关推荐

HTML5响应式企业集团织梦模板,（自适应手机版）响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化...
名称:(自适应手机版)响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非 ...
html5模板欧美风格,红色欧美风格响应式后台系统网页模板
模板描述:红色欧美响应式后台系统.红色欧美风格响应式后台系统网页模板html模板下载代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Close Search DarkAdmin ...
Vue添加新的响应式属性
vm.userProfile = Object.assign({}, vm.userProfile, {age: 27,favoriteColor: 'Vue Green' }) 转载于:https: ...
大学生个人网页模板简单网页制作作业成品 (响应式明星防弹少年团7页)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |‍个人博客网站 | ‍个人主页介绍 | 个人简介 | 个人博客设 ...
vue中Computed、Methods、Watch区别
一.methods.watch.computed的区别 computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用: methods 方法表示一个具体的操作,主要书 ...
Vue 中 computed ,watch,methods 的异同
methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...
Vue中computed分析
Vue中computed分析在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...
vue中computed和methods区别
1.computed是响应式的,methods并非响应式. 2.调用方式不一样,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用. 3.computed是带缓存的, ...

vue的computed如果没有出现在模板里面，当它依赖的响应式属性发生变化，getter会触发吗？

vue的computed如果没有出现在模板里面，当它依赖的响应式属性发生变化，getter会触发吗？相关推荐

最新文章

热门文章