如何构建一个简单的前端监听器 用于监听某个对象

如何在前端定义一个简单的监听器 用于监听某一个对象进行变化
首先 在 前端引入 js 规范

第二步构建 一个 vue 模板

var vm = new Vue({
el: “#app”,
data: {
goodsList: [],
totalPage: 0,
search: {
key: “”,
pageNo: 1
}

},
created() {
    let search = Qs.parse(location.search.substring(1));
    if (!search.key) {
        return;
    }
    if (!search.pageNo) {
        search.pageNo = 1;
    }
    if (!search.pageSize) {
        search.pageSize = 10;
    }
    this.search = search;

    axios({
        url: "http://localhost:2000/search/" + search.key + "/" + search.pageNo + "/" + search.pageSize,
        method: "get"
    }).then(({data}) => {
        this.goodsList = data.items;
        this.totalPage = data.totalPage;
        console.log(this.goodsList)
    })

},
methods: {
    pageNo(i) {
        //1.固定前5页
        if (this.search.pageNo <= 3 || this.totalPage <= 5) {
            return i;
        }
        //2.中间页码
        else if (this.search.pageNo > 3 && this.search.pageNo <= this.totalPage - 2) {
            return this.search.pageNo - 3 + i;
        }
        //3.固定最后5页
        else {
            return this.totalPage - 5 + i;
        }
    },

    searchGoods() {
        let key = this.$refs["key"].value;
        this.search.key = key;
    },
    prePage() {
        let page=this.search.pageNo;
        if (page > 1) {
            page--;
            this.search.pageNo = page ;
        }else{
            alert("这是第一页");
        }
    },

nextPage() {
    let page=this.search.pageNo;
    if (page < this.totalPage) {
        page++;
        this.search.pageNo = page ;
    }
    else {
        alert("这是最后一页");
    }
}
},

    watch:{
        search:{
            deep:true,
            handler(oVal, nVal) {
                if (nVal.key == "") {
                    return ;
                }
                location.href="http://127.0.0.1:55744/seaqiandaunrch.html?"+Qs.stringify(this.search);
            }
        }
    }

})

前端物品的基本数据的基本渲染具体语句：

• ¥ {{goods.price}}

  {{goods.title}}

  已有2000人评价

  加入购物车 收藏

这个是页面的基本的页码进行遍历

• 最后这个是对于数据搜索项目上面进行安排