代码写在export里和外面的区别

在vue中，包括我们自己使用mvc实现模块化的时候，往往需要将每个js或者vue作为独立的模块，然后将js代码写在export里面导出，然后在需要使用的地方import引入，但是直接把代码写在export里和外面究竟有什么区别？
区别就是

当我们写在export外面的时候，我们直接通过import引入这个文件，这个文件里的代码就会预解析一遍，export外面的代码就会直接执行；然后把export里面的代码返回给我们的import相关的对象，也就是说我们import的文件拿到的代码其实就是export里面的代码，所以写在export里面的代码还需要你通过相应的属性来把你import的这个文件添加到这个属性下面才能执行，因此如果你要想通过vue的属性和指令使用相关的代码，那么相关的代码必须写在export里；
写在export里的代码你每添加到一个属性下就会执行一次

比如1.：

• one.js

document.addEventListener('click',()=>{console.log('a')})

• two.vue

<script>
import one form './one.js'
</script>

这时候因为one.js里的代码没有写在export里，所以只要一import就会直接执行，当页面加载完我们点击document就会打印出a

• one.js

export default {
   bind: function (el,binding,vnode) {
    document.addEventListener('click',()=>{
      console.log('b')
    })
  }
}

上面这种写法我们通过export导出一个对象，对象里面的代码不会直接运行，需要添加到对应的属性下才会调用，这里需要通过directives属性

• two.vue

template>
    <div class="one" v-two>
        aaa
    </div>
</template>
<script>
import two from './two.js'

export default {
    directives: {two}
}

像上面这样import完之后添加到directives下面这时候再点击docuemnt就会执行了，你每使用一个v-two指令export里的代码就会执行一次也就是就会添加一个docuemnt监听，而写在export外只有import的时候添加了一个监听