Vue组件里面data必须是个函数

**首页我们先了解一个原形和原型链，每个js对象和js方法都有一个原形，js对象的是隐式原形 proto，而方法中的是显示原形prototype，下面举个例子:

export default {name:'component',data: {a: 1,b: 2},methods:{}
}
// 其实底层是
component._proto_.data={a:1,b:2
}
//而var obj = {}底层是var obj = new Object()
//所以component._proto_._proto_，第一个是继承data，第二个继承Object，data不只是有data属性还包含Object属性

**因为咱们封装的组件是可复用的，如果一个地方用到这个组件，其他地方也用这个组件，那样大家的继承都是一样的，只要一个地方的组件属性修改了，其他地方也会被修改，这个肯定不是我们想要的，也是很恐怖的，那用函数之后会是什么样的那，看下面一个例子：

export default {name:'component',data: function () {return {a: 1,b: 2}},methods:{}
}
//其实底层是这样的
var component=function(){this.data=this.data();//每次调用这个函数生成新的js对象
}
component.prototype.data=function(){return {a:1,b:2,}
}

**这个才是我们想要的效果，所以组件的data必须要用函数

为什么Vue组件里面data必须是个函数相关推荐

vue中的data为什么是一个函数？起到什么作用？
前言在学习vue的时候,我们一直在思考的一件事: 组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢? 一.data为什么是一个函数面试回答: 如果data是一个函数的话, ...
vue中组件的data为什么是一个函数
组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制 ...
Vue组件中data的使用方式
全局组件中的data使用方式: js中写法: Vue.component("mycom1",{template:'<h1>这是全局组件--{{msg}}</h1& ...
组件中data为什么是个函数
总结: 1.vue中组件是用来复用,为了防止data复用,将它定义成一个函数. 2.当我们将组件中的data写成一个函数,数据是以函数返回值形式定义的,这样每复用一次data,都会返回一份新的data ...
Vue组件的生命周期以及钩子函数的作用
什么叫做生命周期一个组件从创建到销毁的过程叫做组件生命周期. Vue在生命周期中提供了一些函数可以在其内部实现一些业务逻辑并且这些函数会在一些特定的场合下执行. 组件的生命周期钩子函数大致可以分为三 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
Vue 组件 data为什么是函数
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', {te ...
为什呢vue组件中的data必须是函数？
类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; 关于JS中的数据类型:https://blog.c ...
灵活的Vue组件——原来这么简单
本篇学习目标能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例 1. vue组件 1.0_为什么用组件以前做过一个折叠面板需求: 现在想要多个收起展开 ...

为什么Vue组件里面data必须是个函数

Vue组件里面data必须是个函数

为什么Vue组件里面data必须是个函数相关推荐

最新文章

热门文章