vue中的export default和new Vue({})

vue中的export default和new Vue({})

Vue 是什么？ 相当于一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

1.export default

export default ：相当于提供一个接口给外界，让其他文件通过 import 来引入使用

name: 			相当于全局id
components:
component: 	    组件
computed: 
methods:
data:

import Confirm from '../sub/Confirm';
export default {
        name : "First",//全局id
        // components 组件注册
        components: {
            Confirm
        },
        // 注册属性
        props: {
            name: {
                type: String,
                default: "父组件"
            },
        },
        created() {
            // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
        },
        mounted() {
            // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
        },
        // data() 为变量赋值等
        data() {
            return {
                msg: "Welcom to FirstApp"
            };
        },
        // methods 编写js函数
        methods: {
            getMessage(val) {
                alert(val);
            }
        }
}

2. new Vue({})

渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面
new Vue({})， 是创建一个Vue的实例 相当于创建一个根组件

el: 绑定元素
data： 存放数据
methods: 方法
watch: 监听
computed: 这里面也有方法
最后两个都是监听vue属性，但是computed属性中需要一个返回值，而且代码是同步执行；
watch则不需要，代码也可以是异步的

参考这里.
了解更多
一般会定义一个vm
vm对象详解

new Vue({
 el: '#app',
 data: {
   message: 'message'
 }
})

var vm = new Vue({

})

3.data()与data

export default{
   data(){
       return {
          message: 'message'
       }
   }
}

new Vue({
 el: '#app',
 data: {
   message: 'message'
 }
})

在大型项目中data会造成数据污染（data是全局的）
将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染，没有直接操作源数据，推荐这样用。