vue--为什么data属性必须是一个函数

pingink 发布于2019-08-23 15:30 / 2244人阅读

摘要：所以，组件中的属性必须是一个函数。资源地址为什么属性必须是一个函数我的博客地址如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

欢迎访问我的个人博客：http://www.xiaolongwu.cn

前言

老规矩，我们还是先说为什么。

问题描述：为什么在vue组件中，我们的data属性必须是一个函数,new Vue()中的data除外，因为new Vue中只有一个data属性。

原因：因为我们能抽离出来的组件，肯定是具有复用性的，它在项目中会存在多个实例。如果data属性值是一个对象时，那么它所有的实例都会共享这些数据，这是很麻烦的事情，你不能确保你的所有实例中的属性值都不会重复。

我们的期望是，组件的每个实例都能独立的维护自己的数据。

解决方案

我们都知道，在JavaScript中，函数具有独立作用域快的特点，外部是无法访问其内部的变量。

试想一下，如果我们组件中的data属性是一个函数，他的每个实例就会有自己的作用域空间，也就是独立的数据，每个实例之间不会相互影响。

所以，组件中的data属性必须是一个函数。

github资源地址：vue--为什么data属性必须是一个函数

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com

云服务器 GPU云服务器 vue是什么 vue是什么软件 data属性 vue实例属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102144.html

VUE

摘要：注意指令前面需要加，对指令传递数据赋值使用例如约定速成加上，表示自定义指令不要使用驼峰式命名。需要通过方法实现自定义指令注册完成。 vue Vue.js 构建数据驱动的web界面库。集中实现MVVM 的 VM层。容易与其他库或项目整合通过尽可能简单的API实现相应的数据绑定和组合的视图组件核心：相应的数据绑定系统，数据与DOM保持同步数据驱动的视图，普通的HTML模板中使用特殊的语...

bergwhite 2019-08-19 18:39 评论0 收藏0
JavaScript从初级往高级走系列————MVVM-Vue

摘要：原文博客地址如何理解如何实现是否解读过的源码与框架的区别实现实现独立初始化实例两者的区别数据和视图的分离，解耦开放封闭原则，对扩展开放，对修改封闭在中在代码中操作视图和数据，混在一块了以数据驱动视图，只关心数据变化，原文博客地址：https://finget.github.io/2018/05/31/mvvm-vue/ MVVM 如何理解 MVVM 如何实现 MVVM 是否解读过 ...

codercao 2019-08-23 13:46 评论0 收藏0
javascript高级学习总结（二）

摘要：那个率先改变的实例的返回值，就会传递给的回调函数。函数对函数的改进，体现在以下四点内置执行器。进一步说，函数完全可以看作多个异步操作，包装成的一个对象，而命令就是内部命令的语法糖。中的本质就是没有的隐藏的组件。 1、原型 - jquery使用showImg(https://segmentfault.com/img/bVbwNcY?w=692&h=442);注释 : 实例虽然不同，但是构...

Songlcy 2019-08-26 10:58 评论0 收藏0
Vue组件定义

摘要：组件结构基础知识属性属性维护一个组件内部状态，其余组件正常情况下不可见。方案选择单文件一行的简单结构常规的选择前边两种方案解决不了时候的选择灵活性高注意不论选择哪一种方案，定义模板时，一定要有一个非标签元素作根，有且仅有一个。简介组件是可复用的 Vue 实例。本质上是一个对象，该对象包含data、computed、watch、methods、filters以及生命周期钩子等成员属...

imtianx 2019-08-23 10:41 评论0 收藏0
Vue.js非常重要之组件

摘要：它们之间必然需要相互通信父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这是由使用的父组件决定的。 Vue.js的组件注册组件全局注册要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

ysl_unh 2019-08-21 16:16 评论0 收藏0