Vue的组件中data必须是函数,其返回值是一个对象

Vue.component({
  template:"
全局组件
", data:function(){ return { name:"css3html5", date:"20190223" } } })

es6函数简写为

Vue.component({
  template:"
全局组件
", data () { return { name:"css3html5", date:"20190223" } } })

对比,new Vue中的data

var vm = new Vue({  //  构造函数一般大写字母开头
  el:"#element",
  data:{
    name:"css3html5",
    date:"20190223"
   }
})

vue的全局组件会被多处引用喧染,js中引用对象的复制不是“真实的”复制,而是在栈中复制了指针,
当组件被多处引用时,如果引用类型数据(这里指data)只被复制了指针,会导致多处组件只用了同一个“数据源”,会导致一处数据改变,是所有的组件数据都改变了,所以,用函数返回一个新的数据,避免数组在多处引用的情况发生。

你可能感兴趣的:(Vue)