javascript - 从浏览器的控制台触发 VueJs $watch 不起作用

Question

我有这个 main.js 文件来引导我的 Vue 应用程序。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

var model = {
  a: 1,
  name: 'Abdullah'
}

var app = new Vue({
  el: '#app',
  data: model,
  router,
  template: '<App/>',
  components: {
    App
  },
  watch: {
    a: function(val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
});

app.a = 23; //This triggers the watch function

在我的 View 实例中，我正在观察数据 a 的任何变化。

a 上的任何更改都应触发 watch 并写入控制台。当我通过从 main.js 文件中更改 a 的值触发它时，这个 watch 工作正常，就像 app.a =23; 但是当我从浏览器控制台触发它时同样不起作用。

每当 a 发生变化时，如何从浏览器的控制台触发 watch？

PS:我刚刚开始使用 VueJS。

Answer 1

这里有几个问题。

首先，您有一个div，其id 为app。所有浏览器都将具有 id 属性的 HTML 元素用作全局变量。因此，您有一个名为 app 的全局变量，它指向具有 app 的 id 的 div。

其次，您将 new Vue() 的结果捕获到名为 app 的变量中。但是，由于您非常清楚地使用了构建系统(因为您正在使用 import)that app 在全局范围内不可用，因为漂亮几乎所有构建系统都将其编译的 javascript 包装在一个闭包中。

结果是您无法访问要更改的 app，但看起来是因为有一个名为 app 的完全独立的变量可供您使用在全局范围内。

如果您想做您想做的事，我建议您将脚本更改为:

window.myApp = new Vue(...)

然后你就可以去你的控制台输入

myApp.a = 23

并查看您期望的结果。