天涯海角异孤星
Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如
queryData: {
name: '',
creator: '',
selectedStatus: '',
time: [],
},
现在我需要监听这个queryData，我可以这样做：
watch: {
queryData: {
handler: function() {
//do something
},
deep: true
}
}
里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如name，这个时候可以这样
watch: {
'queryData.name': {
handler: function() {
//do something
},
}
}
或者还可以这样巧用计算属性
computed: {
getName: function() {
return this.queryData.name
}
}
watch: {
getName: {
handler: function() {
//do something
},
}
}
1、VSCode安装插件：Debugger for Chrome，并确保你的电脑上安装了 Chrome 浏览器；
2、VSCode菜单“调试-->打开配置”（即 .vscode\launch.json 文件），把 webRoot 配置项改成 "${workspaceFolder}/src"。注，原来的值是 "${workspaceFolder}"，因为Vue项目源代码是在 src 目录，所以要改。我的配置内容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src"
}
]
}
3、编辑Vue的配置文件 vue.config.js （如果没有则自己新建一个），添加 configureWebpack 的配置项 devtool ，值为 "source-map" 。我的 vue.config.js 内容如下：
module.exports = {
publicPath: "/",
outputDir: "dist",
assetsDir: "static",
lintOnSave: process.env.NODE_ENV === "development",
productionSourceMap: false,
devServer: {
port: 8080,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: "http://127.0.0.1:90/admin",
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
}
}
},
configureWebpack: {
devtool: "source-map"
}
};
4、启动vue项目：npm run serve 或 npm run dev 。如果之前已经启动过了，要关掉重新启动，因为我们改了配置文件；
5、关闭正在运行的Chrome浏览器（以防有干扰），VSCode菜单“启动-->启动调试”，这时候VSCode会以管理员身份打开一个Chrome窗口，并自动打开项目首页；
6、在VSCode中的代码设置断点，浏览器执行，遇到断点时，VSCode会高亮显示。同时，Chrome浏览器按F12，也可以看到相同的断点调试信息。