vue中变量的访问有关问题

由于特殊情况，需要在export default{ }外部但同时又在script标签的内部，访问data()中的z值，{{ z }}这种方法不能使用，想知道如何打印出z的值

   
<script>
import * as THREE from "three";
const scene = new THREE.Scene();

console.log("z:"+ )

export default {
  data() {
    return {
      z: 10
    }
  },
  methods: {
    init() {

    }
  },
  mounted() {
    this.init();
  },
  scene

}

script>

<template>
  <div>{{ message }}</div>
</template>
 
<script>
    var vm = null; 
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    },
    created(){
        vm = this;
    }
  }
  setTimeout(function() {console.log(vm.message) });
</script>

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：Vue中的export default 和带返回值的data()以及@符号的作用
• 除此之外, 这篇博客: vue export default模块中的 data 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• data主要是关于数据方面的，其中包含的类型有Number, String, Boolean, Array, Function, Object，也是js中的数据类型

  export default {
    name: 'app',
    data () {
      return {
        message:"hi vue !"
      }
    }
  }
  

尝试一下监听数据吧，可以参考下这个

// 组件内部
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`new message: ${newValue}, old message: ${oldValue}`)
    }
  },
  created() {
    this.$root.$data.reversedMessage = this.reversedMessage;
    this.$root.$data.messageWatcher = this.$watch('message', (newValue, oldValue) => {
      console.log(`new message: ${newValue}, old message: ${oldValue}`);
      this.$root.$data.message = newValue;
    });
  },
  beforeDestroy() {
    this.$root.$data.messageWatcher();
  }
}
// export之后在外部使用
console.log(vm.$root.$data.reversedMessage); // 输出: "olleH"
console.log(vm.$root.$data.message); // 输出: "Hello"