我在vue项目中遇到的问题总结

1.vue 报错 data functions should return an object: 和 Cannot read property '__ob__' of undefined

 export default {
    name: 'calculatorIndex',
    data() {
      //在data中必须存在return
      return {

      }
    },
}

2. vue 请求返回后的参数带有标签，但是在变量中没有识别

  页面直接定义的变量：

  {{info}}

   返回的结果，呈现在页面上的效果 ：

    查找资料后，发现vue框架默认输出为v-text格式，如果需要识别html标签，需要修改代码为：

   返回的结果，呈现在页面上的效果 ：

3.在完成一个对话框的功能时，发送消息后始终无法定位到最底部，可以通过下面方法：

    
 export default {
    data() {
      return {
        questionsAnswers：[],
      }
    },
    // 实时监测数据变化
    watch: {
         //键为data中的数据，value为要执行的函数
        'questionsAnswers' :'scrollToBottom'
    },
     // 使滚动条始终固定在底部
      scrollToBottom: function(){
        this.$nextTick(() =>{
          var div = document.getElementById('main_content');
          div.scrollTop = div.scrollHeight;
        })
      }
}

其中：

(1)

watch的作用

在vue中，使用watch来响应数据的变化，监听数据的更新变化。

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。

如果我们需要在最初绑定值的时候也执行函数，可以参考：vue中watch的详细用法。

(2)

this.$nextTick：

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 。

因为数据在页面的加载是有延迟，而$nextTick是在下次DOM更新时执行，$nextTick正好符合我们的要求。

4.vue中本身是不支持ajax的，要想进行异步请求，则需要通过axios来进行操作。但是再使用Echarts的时候，则需要获取所有的数据后，在进行更新图标数据。

这是可以通过async/ await来处理异步/同步请求：

（1）async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行

（2）await 的用法，await是等待的意思。它作为一个关键字只能放到async 函数里面，其实它后面可以放任何表达式，上图处等待请求完全执行完毕，数据完全返回后才可放入echarts.series[1].data中。

关于async/ await更为详细的介绍：

http://www.cnblogs.com/SamWeb/p/8417940.html