Subscribe on changes!

非响应式变量也随响应式变量一起变化，是设计如此还是bug呢？

avatar
caohenghu
Oct 11th 2022

Vue version

https://sfc.vuejs.org/vue.runtime.esm-browser.js

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UMtOwzAQ/JWVL23VJlZzjJIKxG/4kqYbSIkfsp1wiHzhwjchvgfxG6wbi/KQuO2OxzOzM7NbY/JpRFayyrW2Nx4c+tEchOql0dbDDBY7CNBZLWFF1JVQQrVaOQ+tHpXfQx0p6/1GqAETWBC4vxK1uhv69pHA9QbqA8xCAaTv+dQMI263V6iISxCq4kskCkOLR2mGxiNtANWpny4DjcfRe63gpo0WtWDJTLBEAPh4fn1/eUt0vvDT4zwvKULIsh9IEShBpC9OFf/yZzu2dJPJxuRnpxW1d7lIpAcnWJluJIw6i7tgD94bV3LuujZ2fna5tvecptySYS8xRyezo9VPDi0JC7b7psEJnNBmFtUJLdr/NH9R/+hGWTovsPAJa1qv4g==

Steps to reproduce

可查看演练场的例子，点击按钮

image

What is expected?

非响应式变量不应该响应

What is actually happening?

非响应式变量也响应了

System Info

No response

Any additional comments?

我看了编译后的代码，能理解，但为什么这样设计呢？而选项式的setup则不会这样，对应的例子是

https://sfc.vuejs.org/#eNplUktuwjAQvcrIG0CQRLBEAbXiGt6EMGlDE9uyHVop8qabnqnqeapeo2PHAZpuMp/35s14Jj17VCq9dMi2LDelrpXdc1G3SmoLPWisVnDCqhZ4kJQUKCw4qLRsYUZVMy64AMC3wCdi0TXB3hfMe88BMGg7NV9ADAFKKYylbyfsGna+2Xy9GMEGI7QhaD30uRVJcWjq8oUgEtztb5qe4PXSS9F0uFxO8ptbxo3OaDXNp8V/qdVU4y4R55hoBuPoKXl23SkFFlvVFBYpAshP9SU45B47a6WAh9Jr7TgbVVkkAPy8f35/fEV6NvAj2PfDmM4lyZ/MxoU58mzolGfX/mzFhhMnbaHSs5GCzh/ezSNgONuOm+CMLu1jzp6tVWabZaYq/U9zNqnUTxl5qaaGdYspmjY5avlqUJMwZ2ETXDjmfgEnXsP8

1
avatar
luke358
Oct 11th 2022

切换编译环境会有不同的结果 image

avatar
liulinboyi
Oct 11th 2022

在render函数中，直接取值，而未通过$setup.xx或者_ctx.xx取值，在render函数重新执行来更新界面时，未响应的值会搭响应值的顺风车，渲染出最新的值到界面。正如https://github.com/vuejs/core/issues/6850#issuecomment-1273994466 所说，不同的编译环境也会选择是否通过$setup.xx取值或者_ctx.xx取值或者直接取值。

就像下面这样：

/* Analyzed bindings: {
  "ref": "setup-const",
  "count1": "setup-ref",
  "count2": "setup-let",
  "onClick": "setup-const"
} */
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, unref as _unref, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

import { ref } from 'vue'


const __sfc__ = {
  __name: 'App',
  setup(__props) {

const count1 = ref(1)
let count2 = 1

const onClick = () => {
   count1.value++
   count2++
}

return (_ctx, _cache) => {
  return (_openBlock(), _createElementBlock("div", null, [
    _createElementVNode("button", { onClick: onClick }, " 点击 "),
    _createTextVNode(" " + _toDisplayString(count1.value) + "-- " + _toDisplayString(_unref(count2)), 1 /* TEXT */)
  ]))
}
}

}
__sfc__.__file = "App.vue"
export default __sfc__

Playground demo

avatar
zhangzhonghe
Oct 11th 2022

我也有疑惑，生产环境和开发环境的编译结果不一致是出于什么考虑的呢？

avatar
sxzz
Oct 11th 2022

@zhangzhonghe I guess it's designed for DevTools in dev mode. There's return __returned__, and it lost reactivity. image

But in production mode, there's no return __returned__. The render function referenced the variables directly.

avatar
posva
Oct 11th 2022

This is working as expected. When returning the number, it’s being copied. Refs are not. Use a ref if you need it to be reactive

avatar
caohenghu
Oct 11th 2022

@posva so, why dev mode is different with build mode?

GitHub Track