vue2.6中，为什么这段代码会被执行两次

Question

Answer 1

访问了tag又修改了tag，引发vue重渲，试下去除this.tag;就没有了


看vue中的依赖收集可知【第一张图是仅修改数据的依赖情况，第二张图是访问并修改】，如果你在方法里访问该属性，又修改该属性，那么就会触发重渲，vue认为你的方法对此数据有依赖。所以，如果你没有访问该数据-tag,或者访问其他数据，那么你修改tag就不会有两次输出。因为没有对修改的数据有依赖，但是非常不建议在模板中使用的函数内对数据进行修改。

Answer 2

不要这样操作！！！
不要这样操作！！！
不要这样操作！！！
重要的事情说三遍
不要在渲染中修改，可能会触发无限渲染
渲染数据 -> test -> 修改数据 -> 渲染 -> test -> 因为tag此时是2所以tag = 2不会触发渲染
你把 test 函数换成 this.tag++ 就触发无限渲染了

就跟在监听自身的回调里又修改自身一个道理

如果去掉 test 里的 this.tag;：
render -> test -> this.tag = 2 -> 结束，因为tag没有用到(get)所以修改tag不会触发观察者回调

加上 this.tag：
render -> test -> this.tag（加入观察者） -> this.tag = 2（触发观察者回调） -> render -> this.tag（已经有依赖） -> this.tag = 2（未修改） -> 结束