Axios 请求的数据在调用时显示为null

如题, 在 created 时使用 axios 请求数据并保存 ( 使用log确认过数据确实保存了 ) .
但是在正常调用时却显示初始值. 同样尝试了const jsoon, 提示该变量未定义 ( not defined ) .
百思不得其解, 所以来论坛询问.
这是我第一次使用Vue写页面, 但我寻思没啥错的地方啊. 请各位大佬指教.

Vue.js v2.6.10
HBuilder+Chrome

<html>
  <!-- 引入vue与axios -->
  <div id="app">
  <buttom @click="output">输出</buttom>
  <!-- .... -->
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data{
      jsoon: null
    },
    created () {
      axios
        .get('http://xxx/xxx.json')
        .then(function (response) {
          this.jsoon = response.data;
          console.log(this.jsoon); //输出为 {id: 1,....}
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    methods: {
      output() {
        console.log(this.jsoon) //输出为 null
      }
    }
  })
  </script>
</html>

直接学习vue3吧,vue2太麻烦了。

vue2多好,vue3麻烦

恰恰相反,vue2,我连个工程化的项目都跑不起来,各种报错,烦死了。

多使用vue devtool