关于 Vue的一些问题小结

1、浏览器控制台报错 An error occurred in hook getInspectorState registered by plugin org.vuejs.vue2-internal

如图：

原因：这是因为 Vue devTools [6.0.0] 扩展程序它捕捉到了一些以前发生过的错误，俗称混淆了历史记录。
解决办法：直接重启一次 Vue devTools 即可解决问题。

issue: https://github.com/vuejs/devtools/issues/1696

2、Vuex 获取数据第一次渲染报错 null 。

原因：这是因为 Vuex 的数据获取是异步的，而页面 render 渲染并不会等待，而导致了首次渲染报错 null。

解决办法：在渲染的元素上先定义 v-if ，当获取到数据之后再进行页面的渲染。

3、与后台交接传输数据时，data 的初始化数据非必须的话，就设定 undefined。

原因：在后续传入接口时，可以根据 JSON.parse(JSON.stringify()) 来动态插入想要传入的字段【它会自动摒弃 undefined 的数据】。

3、在初始渲染值的时候报 undefined。

当 data 中的数据是从后台动态获取到并准备渲染在标签上的时候，需要为其进行初始化的设定，为 Vue 进行初始化的Watcher的绑定，否则一开始在渲染的时候Vue没找到相关的对象参数而报错 undefined。
同时也要使用 v-if 来进行初始化渲染的判定。

4、Vue 的三级路由匹配

vue-element-admin自带的有嵌套路由，不过他的嵌套路由有一个套路，那就是二级路由页面下有个标签

//二级路由

<el-alert :closable="false" title="menu 1">
   <router-view />
</el-alert>

这里说一下，这里的三级路由指向了一个页面，但你点击三级路由的时候，它是作为二级路由页面的一个窗口插入的！！！，直接点就是说，你的第三级路由不能作为一个单独的页面存在，只能想路由一样依附在二级路由页面里面

解决思路：

既然只能在二级路由页面下通过窗口来使用三级路由，那么对二级路由的页面进行修改

//第二级路由页面

<template>
    <div>
       //如果为二级路由就渲染当前HTML文本
       <template v-if="twoRouter">
          <div></div>....
       </template>
 
       //如果为第三级路由，则通过<router-view />指向第三层页面
       <template v-else>
          <router-view />
       </template>
    </div>
</template>

由此可以发现，Vue-Router 是通过 router-view 层层递进来渲染子组件的，相当于是门【.vue 是房间，router-view 是门】。

最后在 watch() 和 beforeRouteEnter 函数中进行对 $route 判断即可。

    watch: {
    	// router 路由路径改变时触发。表示要进入下一个子组件的页面
      $route(to, from) {
        if (to.fullPath === '/article/publish/result') {
          this.secondRouter = false;
        }
      }
    },
    //router 进来之前进行判断
    beforeRouteEnter(to, from, next) {
      next(vm => {
        //注：在这里不能用 this，这里的 vm == this
        if (vm.$route.fullPath === '/article/publish') {
          vm.secondRouter = true;
        }
      })
    },

需要注意的是，在二级组件内部的 <router-view> 不能有任何其他的内容，否则没法渲染。

5、关于 Vue 无法对 appendChild 动态添加的元素设定CSS样式的问题

开发的时候免不了有时候需要向某个节点appendchild，添加子节点，但是如果是在vue中，就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。

二、解决思路
通过查看原始的节点与新增的节点发现，原始节点与新增节点的class都一样，但是原始的节点在class后面还会多出data-v-XXXXXXX这个属性，

然后再去查看引入的css样式同样发现在class名后面也会多加一个**[data-v-XXXXXXX]**的后缀。
原因

通过测试可以发现，这是因为vue文件中的style标签添加了scoped的原因，

而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，

于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。

三、解决办法
1.去掉scoped(不推荐)
把style标签的scoped去掉即可

当然这么做的前提是你得保证当前vue文件(组件)中的样式不会出现与其他组件样式class重名，否则可能会出现样式覆盖的情况。

2.：：v-deep渗透(推荐)
完美解决！

::v-deep(#compassContent) {
  height: 28px;
  width: 28px;
}