Vue.js计算属性calcWidth未调用及styleObj.width始终undefined问题

先直接点出核心问题：你在data里直接用this.calcWidth赋值的方式完全错误，这既无法正确引用到计算属性，也触发不了Vue的响应式机制。

疑问1：为什么calcWidth函数从未被调用？ #

有两个关键原因：

• 初始化时的上下文错误：当你定义data对象的时候，Vue还没有完成实例化过程，此时this指向的是外层的全局上下文（浏览器环境下就是window对象），根本不是Vue实例，所以this.calcWidth完全不存在，自然不会调用到你定义的计算属性。
• computed的惰性求值特性：Vue的计算属性是惰性执行的，只有当它被响应式地引用时（比如在模板中使用、在另一个计算属性中引用、被watch监听），才会触发计算逻辑。你只是在data里赋值了一个不存在的属性，既没有触发依赖收集，后续修改num时，因为没有任何地方在使用calcWidth，所以它也不会被重新计算。

疑问2：为什么styleObj.width始终为undefined？ #

这和第一个问题的第一个原因直接相关：初始化styleObj.width时，你用的this不是Vue实例，而是全局的window，window上没有calcWidth这个方法，所以赋值的结果就是undefined。而且后续即使num变化，因为calcWidth从未被调用过，也不会有值更新到styleObj.width上。

正确的实现方式 #

要实现动态更新元素宽度的需求，有两种常见的正确做法：

方案1：将styleObj转为计算属性 #

把styleObj也定义成计算属性，让它依赖calcWidth，这样Vue会自动处理响应式更新：

var vm = new Vue({
  el: '#app',
  data: {
    num: 100
  },
  computed: {
    calcWidth() {
      console.log('computed')
      return this.num + 'px'
    },
    styleObj() {
      return {
        width: this.calcWidth
      }
    }
  }
})

setTimeout(() => {
  vm.num = 200
}, 2000)

方案2：直接在模板中绑定计算属性 #

如果你不需要单独的styleObj，可以直接在模板里把calcWidth绑定到style上：

<div id="app" :style="{ width: calcWidth }"></div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    num: 100
  },
  computed: {
    calcWidth() {
      console.log('computed')
      return this.num + 'px'
    }
  }
})

setTimeout(() => {
  vm.num = 200
}, 2000)
</script>

这两种方式都会让Vue正确收集calcWidth的依赖，当num变化时，自动重新计算calcWidth并更新元素样式，你也能看到console.log('computed')在初始化和num修改时各执行一次。

内容的提问来源于stack exchange，提问作者Archsx