在Vue.data已定义的变量，运行时却找不到变量

报错1：Property or method "xxx" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: 属性或方法“xxxx”未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中或在基于类的组件中是反应性的。通过初始化属性，可以在data选项中，也可以在基于类的组件中。

报错2：The "data" option should be a function that returns a per-instance value in component definitions.

可以先查看查看官方文档vue2：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

问题:没有其他拼写错误，但是已经定义的变量还是在控制台中显示没有定义，个人判断如果当前文件是在组件 (component) 里，data 必须声明为有返回一个初始数据对象的函数

解决方法：将data的定义和其他方法塞到    export default中，data中的变量定义方法要修改一下加一个function

修改前代码：

<script>
    // 连接服务器
    ws = new WebSocket('ws://10.10.10.238:9687/msg')
    // 接收消息
    ws.onmessage = function (data) {
        // 将服务器每次发来的消息存放在vue实例中
        app.messages_list.push(JSON.parse(data.data))
    }
	// 实例化一个vue对象
    var app = new Vue({
        el: '#app',
        data: {
            // 发送给服务器的内容，与发送表单绑定
            sends: '',
            // 存放服务器与客户端聊天数据
            messages_list: []
        },
        watch: {
            // 监听聊天数据，每次有变化将聊天区域滚动条定位到底部
            messages_list: function (newQuestion, oldQuestion) {
                var content = document.getElementsByTagName('ul')[0];
                content.scrollTop = content.scrollHeight;
            }
        },
        methods: {
            // 发送给服务端消息
            sendMessage: function () {
                // 现将要发送的消息存放到聊天数据中心
                this.messages_list.push({
                    id: 1,
                    user: 'https://pic.qqtn.com/up/2018-2/15175580428030394.gif',
                    msg: this.sends
                })
                // 发送给服务器消息
                ws.send(this.sends)
                // 发送消息后置空发送消息框
                this.sends = ''
            }
        }
    })
</script>

修改后

<script>
    import Vue from 'vue'
    Vue.config.productionTip = false; //关闭浏览器的生产提示
      // 连接服务器
      var ws = new WebSocket('ws://localhost:xxx/xxx')
      // 当接收到服务器消息时调用

    export default{
        data:function(){
          return{
                 sends: '',
                messages_list: []
          };
        },
        watch: {
            // 监听聊天数据，每次有变化将聊天区域滚动条定位到底部
            messages_list: function (newQuestion, oldQuestion) {
                var content = document.getElementsByTagName('ul')[0];
                content.scrollTop = content.scrollHeight;
            }
        },
        methods: {
            // 发送给服务端消息
            sendMessage: function () {
                // 现将要发送的消息存放到聊天数据中心, uesr是头像
                this.messages_list.push({
                    id: 1,
                    user: 'https://res.wx.qq.com/mmspraiweb_node/dist/static/openaiplugin/img/answerImage.png',
                    msg: this.sends
                })
                console.log('this.sends::',this.sends)
                console.log('this.messages_list::',this.messages_list)
                // 发送给服务器消息
                ws.send(this.sends)
                // 发送消息后置空发送消息框
                this.sends = ''
            }
        },
    };
          ws.onmessage = function (event) {
          // 将服务器每次发来的消息存放在vue实例中
          console.log(event.data.size);
          this.messages_list.push(JSON.parse(event.data))
          console.log('return his.messages_list::',his.messages_list)

      }
</script>