javascript-从浏览器的控制台触发VueJs $watch无法正常工作

我有这个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

在我的视图实例内部,我正在观察数据的任何变化.

上的任何更改都应触发监视并写入控制台.当我通过在main.js文件中更改a的值(例如app.a = 23)来触发它时,该手表工作正常.但是当我从浏览器控制台触发它时,这是行不通的.

每当更改a时,如何从浏览器控制台触发观看？

PS：我刚刚开始使用VueJS.

解决方法:

这里有几个问题.

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

其次,您在名为app的变量中捕获了新Vue()的结果.但是,由于您非常清楚地使用了构建系统(因为您正在使用导入),因此该应用程序在全局范围内不可用,因为几乎所有构建系统都将其编译的javascript包装在闭包中.

结果是您无法访问要更改的应用程序,但看起来好像是因为在全局范围内有一个完全独立的变量称为app可供您使用.

如果您想做您想做的事情,建议您将脚本更改为：

window.myApp = new Vue(...)

然后,您将可以转到控制台并键入

myApp.a = 23

并查看您期望的结果.

标签：vue-js,vuejs2,javascript
来源： https://codeday.me/bug/20191026/1932747.html