【前端面试题之VUE】为什么data为什么是一个函数而不是一个对象？

为什么data为什么是一个函数而不是一个对象？

原因是因为如果data是一个对象的话，两个组件中设置的data都会引用同一个内存地址，而用函数的话，则会在每次引用的时候返回一个新的地址。

如果使用对象形式定义data的话，就会导致创建的对象身上的data属性会指向同一个地址：

var Component = function () {};
Component.prototype.data = {
            message: '10'
}
var component1 = new Component(), component2 = new Component(); 
component1.data.message = '20'; 
console.log(component2.data.message);
输出是：20

注意：prototype是什么？ 是一个对象，可以共享方法。每个构造函数都可以new出来很多个实例，每个实例都会继承原型上的方法或属性。vue的data数据其实是vue原型上的属性。

如果将data作为函数进行返回，构造不同对象，同时修改一个属性值会发生什么？：

var Component = function () {
//将data方法赋值给Component作用域下的data
     this.data = this.data()
}
//这里的data定义的是一个方法，返回的是message:'10'
Component.prototype.data = function () {
    return { message: '10' }
}
var component1 = new Component();
component1.data.message = '20';
console.log(component2.data.message);
这时输出的值是10

实例和组件定义data的区别：

vue实例定义data属性既可以是对象，也可以是函数。而组件中定于data属性，就只能是一个函数。组件中如果改成函数形式的话会报错的。

 <div id="app">
        <counter></counter>
    </div>

Vue.component('counter',
{
    data() {
         return {
             count: 1,
         }
     },
     template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
})
new Vue({
    el: '#app',
    //这个是函数形式
    data: function () { return { message: 'Love' } },
    //这个是对象形式
    // data: {
    //     message: 'Love'
    // },
    template: `<p>It’s great to {{this.message}} cakes. <counter></counter></p>`
})

再次产生一个新问题：这里由prototype引发了一个问题，Vue.prototype可以在上面定义属性，对象或者方法，然后就可以全局进行调用了，但是这样的话，他跟Vue.component和Vue.use的区别是什么呢？

Vue.prototype、Vue.component和Vue.use区别

1. Vue.prototype
   在多个地方都需要使用但不想污染全局作用域的情况下去定义的话，每个Vue实例都可以用到。

// 引入Element-ui
import { MessageBox } from 'element-ui';
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;

2. Vue.component
   全局注册组件，第一个参数时调用组件时写的组件名，第二个参数时引入组件时引入组件写入的名称，可用于注册自定义组件。比如说轮播图，分页器、自定义按钮什么的。

import Carousel from '@/components/Carousel'
Vue.component(Carousel.name, Carousel);

3. Vue.use
   常用语注册第三方插件：

// 引入图片懒加载的包
import VueLazyload from 'vue-lazyload'
import atm from '@/assets/1.jpg'
Vue.use(VueLazyload, {
  // 懒加载默认的图片
  loading: atm
});