Vue的$refs属性不能再计算属性中使用

为了得到搜索组件的显示状态，在计算属性中写入：

computed:{
    searchFlag: function(){
        return this.$refs.search.show
    }
}

代码报错：

Error in render: "TypeError: Cannot read property 'show' of undefined"

原因：计算属性在created阶段之后，mounted之前执行；

​ $refs项在mounted之后才存在（组件渲染完成后才填充，非响应式，为了方便直接操作子组件），导致了undefined。

并且refs的变更并不会驱动计算属性的重新计算，并不是我想要的效果。

如果希望跟随着 this.$refs.search.show 值的变化而变化，可将代码写在mounted里，如下：

mounted() {
    // 监听this.$refs.search.show ，并赋值给searchFlag
    this.$watch(
      function() {
        return this.$refs.search.show;
      },
      val => {
        this.searchFlag = val;
      }
    );
  },