Vue使用watch监听一个对象中的属性

问题描述

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
        },
    }
}

 

分类至 Vue
0条评论

VSCode断点调试Vue项目

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,也可以看到相同的断点调试信息。

分类至 Vue
0条评论

vue-cli 3.0 前后端API接口联调时跨域处理

vue项目开发阶段,使用npm run dev 或npm run serve 启动本地调试,请求后端的API接口时提示跨域。因为vue是Node.js运行(端口8080),后端是PHP开发(端口9090),地址都是127.0.0.1,但端口号不一样,所以造成了跨域请求。
vue-cli官方文档提示,我们可以在 vue.config.js 配置文件里设置代理,文档链接:https://cli.vuejs.org/zh/config/#devserver-proxy

分类至 Vue
0条评论