vue 踩坑笔记（持续更新）

$nextTick

Vue 在更新 DOM 时是异步执行的。

this.$nextTick()：等待DOM更新完成

// 给 tree 的数据赋值
this.treeData = data;
// 如果有数据，那么选中第一个 tree 节点
if (this.treeData.length > 0) {
    this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.treeData[0].id);
    });
}

watch

1. 不要用箭头函数，因为 this 指向会出错

2. 设置 immediate:true 的话，回调函数中不能有 DOM 操作。

   如上图，第一次触发回调的时候，页面还没有开始渲染，所以不能进行 DOM 操作（ $refs 是取不到的）

记得关掉定时器、监听事件

某一个组件中开启了定时器（如系统监控），那么在访问了这个组件后，定时器就开启了。
这时切换到其他的组件，定时器不会自动关闭。

beforeRouteLeave(to, from, next) {
    clearInterval(this.timer);
    next();
},

provide 和 inject 不支持响应式

provide 和 inject 的写法不支持响应式。

所以，如果值可能变化，就不能这么传递。