为什么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区别
- 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;
- Vue.component
全局注册组件,第一个参数时调用组件时写的组件名,第二个参数时引入组件时引入组件写入的名称,可用于注册自定义组件。比如说轮播图,分页器、自定义按钮什么的。
import Carousel from '@/components/Carousel'
Vue.component(Carousel.name, Carousel);
- Vue.use
常用语注册第三方插件:
// 引入图片懒加载的包
import VueLazyload from 'vue-lazyload'
import atm from '@/assets/1.jpg'
Vue.use(VueLazyload, {
// 懒加载默认的图片
loading: atm
});