首页 > 其他分享 >vue中的data为什么是函数

vue中的data为什么是函数

时间:2022-10-24 14:25:30浏览次数:47  
标签:vue 函数 复用 实例 组件 data

1.vue中组件是用来复用的,为了防止data复用(同一个组件被复用多次会创建多个实例)。

2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回一个对象作为组件的状态。

3.当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。

4.当我们组件的data单纯的写成对象形式,这些实例用的是同一个构造函数,由于JavaScript的特性所导致,所有的组件实例共用了一个data,就会造成全局污

标签:vue,函数,复用,实例,组件,data
From: https://www.cnblogs.com/qFire/p/16821290.html

相关文章

  • Vue 中 nextTick 的实现原理是什么
    vue中有一个较为特殊的API,nextTick。根据官方文档的解释,它可以在DOM更新完毕之后执行一个回调,用法如下://修改数据 vm.msg = 'Hello' //DOM还没有更新 Vue.......
  • vue这些原理你都知道吗?(面试版)
    前言在之前面试的时候我自己也经常会遇到一些vue原理的问题,我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来,欢迎大家一起学习交流,有更好的方法......
  • 一文梳理vue面试题知识点
    Vue3.0和2.0的响应式原理区别Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。相关代码如下imp......
  • vue组件通信方式有哪些?
    vue组件通信方式一、props(父向子传值----自定义属性)/$emit(子向父传值-----自定义事件)父组件通过props的方式向子组件传递数据,而通过$emit子组件可以向父组件通信......
  • vue create xxx创建项目过程中报错的解决方法
    vuecreatexxx创建项目过程中报错的解决方法​​报错图例​​​​解决办法​​报错图例解决办法首先检查电脑里是否安装node.js检查方法:命令行输入node-v还要再输入一个......
  • npm -v报警告的解决方法(此警告不处理的话后续在用vue脚手架vue create xxx创建vue项
    npm-v报警告的解决方法​​警告图例​​​​第一条警告​​​​npmWARNconfigglobal'--global','--local'aredeprecated.Use`--location=global'instead.​​​......
  • npm 安装vue脚手架报错警告npm WARN deprecated
    来吧,困扰我好几天的问题解决了,直接上干货警告实例虽然没有报错,但是输入vue-V之后告诉我‘vue’不是内部或外部命令,也不是可运行的程序解决方法步骤一首先,我们因为要给vue......
  • vue3引入onMounted后使用onMounted方法后控制台报错分析(Uncaught (in promise) TypeEr
    报错截图报错中已经大致的提示了,onmounted不是一个函数(方法),所以分析是vue没有找到,所以是引入的时候出了问题。Uncaught(inpromise)TypeError:(0,vue_reactivity__WEB......
  • 函数用法
    平方函数——pow平方根函数——sqrt查找字符出现的次数——count万用类型——auto实现数组翻转——reverse取最大/最小值——max/min平方函数——pow函数:pow(x,......
  • HowToImpleteINotifyDataErrors
    howtoimplementINotifyDataErrorInfoMVVM目前实现datavalidation有两种方式,一种是通过xaml,还有就是通过viewmodel.xaml的实现方式如下。这种情况下,viewmodel不......