Vue在监听到数据改变或者dom元素渲染完之后执行的回调函数

在使用vue开发时遇到了一个问题，修改玩vue的data数据之后，操作dom，却发现没有改变，操作的dom还是之前的dom，后来在测试延时操作dom发现可以实现操作更新之后的dom了。

从网上查询资料发现是vue对象在更改完值之后然后去渲染dom元素，我执行的代码发生在了vue还没渲染完成的时候，因此会拿不到更新后的dom，解决办法为使用 $nextTick()方法，这是vue在值改变时进行dom渲染完成之后的回调函数。

var myVue = new Vue({
 el:'#app',
 data:{
  	// 最近浏览的项目列表
   historyProjects: []
 },
 methods:{
  reloadHistoryProjects() {
    let data;
    visitPhHisList(data).then(response => {
        if (response.status == 200) {
            this.historyProjects = response.data.data;
            this.$nextTick(function() {
                // 设置第一个历史项目菜单选中
                this.setFirstHistoryProjectMenuSelected()
            })
        } else {
            this.$coralMessage({msg: "读取最近浏览历史项目数据异常", type: "error"})
        }
    }).catch(error => {
        console.log(error);
    });
  },
  setFirstHistoryProjectMenuSelected(){
      let historyCnt = document.querySelectorAll("#historyProjectsGroup ul .el-menu-item").length;
       if (historyCnt > 0) {
           document.querySelectorAll("#historyProjectsGroup ul .el-menu-item").forEach(item =>
               item.classList.remove("is-active")
           )
       }
       // 选中第一个历史浏览项目菜单
       document.querySelector("#historyProjectsGroup>ul>div>li").classList.add("is-active");
   }
}