精华内容
下载资源
问答
  • Vue - data

    2019-11-07 21:55:44
    参考:深入响应式原理、data、数组更新检测 var vm = new Vue({ el: '#app', data: { name: 'jn', items: [1, 2, 3], ...1.Vue是一个响应式框架,只有在data中提前声明的变量,才能在视图中响应。如果你...

    参考:深入响应式原理data数组更新检测

    var vm = new Vue({
      el: '#app',
      data: {
        name: 'jn',
        items: [1, 2, 3],
        person: {
          firstName: 'chan'
        }
      }
    })

    1.Vue是一个响应式框架,只有在data中提前声明的变量,才能在视图中响应。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。

    2.为什么组件的data是一个函数?如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。每个组件都会各自独立维护它的数据,因为你每用一次组件,就会有一个它的新实例被创建。

    3.由于 JavaScript 的限制,Vue 不能检测以下数组的变动:

    1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如:vm.items.length = newLength

    解决方法

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    
    // 你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:
    vm.$set(vm.items, indexOfItem, newValue)
    
    // 为了解决第二类问题,你可以使用 splice:
    vm.items.splice(newLength)

    4.还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除。对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

    添加一个新的 age 属性到嵌套的 person对象:

    Vue.set(vm.userProfile, 'age', 23)
    
    // 还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:
    vm.$set(vm.userProfile, 'age', 23)

    一次性添加多个新的响应式属性

    vm.person= Object.assign({}, vm.person, {
      age: 23,
      job: 'it'
    })

     

    展开全文
  • 浅谈vue组件data

    2020-04-03 21:49:35
    vue对象里面的data与组件里面的data,明明都是加载数据可一个组件是data(){return {}}一个是data:{},组件之所以是函数而不是对象,正好也是函数的特性,调用完就释放互不干扰,而对象修改就会影响,所以函数正好是...

    可能刚刚学习vue的时候,vue对象里面的data与组件里面的data,明明都是加载数据可一个组件是data(){return {}}一个是data:{},组件之所以是函数而不是对象,正好也是函数的特性,调用完就释放互不干扰,而对象修改就会影响,所以函数正好是组件高内聚低耦合,而且都可以分开维护调用,组件也分两种一个全局组件一个是局部组件。

    展开全文
  • 如果data是一个函数的话,这样每复用一次组件,就会返回一个新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据,而单纯的写成对象形式,就使得所有的组件实例共用了一份data,就...

    vue中data为什么是一个函数

    如果data是一个函数的话,这样每复用一次组件,就会返回一个新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据,而单纯的写成对象形式,就使得所有的组件实例共用了一份data,就会造成一个变了全都会变得结果。

    所以说vue组件中的data必须是函数,这都是因为js的特性带来的。

    js本身的面对对象变成也是基于原型链和构造函数应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。

    展开全文
  • vue项目中引用其它框架时在某些页面老是崩溃和卡顿,一般Vue项目内存泄露常发生在某些地方我们引用的第三方库自己创建和维护了DOM,所以Vue在页面卸载时虽然这些对象的引用都释放了,但是因为这些对象自身关联了DOM...

    vue项目中引用其它框架时在某些页面老是崩溃和卡顿,一般Vue项目内存泄露常发生在某些地方我们引用的第三方库自己创建和维护了DOM,所以Vue在页面卸载时虽然这些对象的引用都释放了,但是因为这些对象自身关联了DOM所以内存无法释放,但是我们项目中已经在destroyed 阶段做了内存释放。

    • 不要轻易把框架中的对象放在data中监听,因为在data中的变量 ,vue会劫持数据 ,导致迟缓。
    • vue组件的data选项,只存储和UI关联的数据,没关联的一定不要存储在data选项里面,提出Vue对象作用域
    • 考虑使用Vuex或者bus事件
    展开全文
  • 会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各 自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果. ...
  • Vuedata为何以函数形式返回

    千次阅读 2020-06-27 10:03:16
    在使用Vue构建组件化应用时,每个组件的data属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。 Vue简单实例 在一个Vue简单实例中...
  • VUE data传值

    2019-01-22 09:41:19
    data 必须是一个函数 上面例子中,可以看到 button-counter...这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝,如果 data 是一个对象则会影响到其他实例,如下所示: <!DOCTYPE html> ...
  • 在开发可重用组件的时候Vuedata作为函数return其他的对象。 将data作为对象将导致全局变量污染,即一个组件修改data后另一个组件的data也被修改。 而将data设定成返回对象的函数时,每个实例可以维护被返回对象的...
  • Vue 的组件都是可复用的,一个组件创建好后,可以在多个地方复用,而不管复用多少次,组件内的data都应该是相互隔离,互不影响的,所以组件每复用一次,data就应该复用一次,每一处复用组件的data改变应该对其他复用...
  • 该项目已停止更新和维护 开发文档 请访问 简介 DataView是一个基于Vue的数据可视化设计框架 提供用于可拖拽的控件 提供常用的图表如折线图等 表格,图片,文字组件 一键生成数据大屏 集成高级查询语法 截图 / ...
  • vue 组件的data属性

    2020-11-26 19:46:45
    取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝: data: function () { return { count: 0 } } 案例: Vue.component("zidingyi", { template: "#tpl",
  • 组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有...
  • 组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有...
  • Vue组件中data的使用方式

    千次阅读 2019-05-31 09:38:47
    全局组件中的data使用方式: ...Vue.component("mycom1",{ template:'<h1>这是全局组件--{{msg}}</h1>', data:function () { return { msg:'这是全局组件中的data定义的数据' } } }); var...
  • 1、 vuedata为什么是返回一个函数呢 从原型链开始讲 var MyComponent = function() {} MyComponent.prototype.data = { a: 1, b: 2, } 上面是一个虚拟的组件构造器,真实的组件构造器方法很多 var component1 =...
  • Vue初始化data流程

    2020-09-09 10:48:13
    初始化data流程如下 将data中的属性,挂载到实例vm下的_data属性。如果data是函数,会首先对data函数求值 对vm._data做代理工作。遍历_data中的每一个key执行proxy(vm, '_data', key) 核心proxy的代码如下 ...
  • 在 new Vue() 中, data 是可以作为一个对象进行操作的,然而在 component 中, data 只能以函数的 形式存在,不能直接将对象赋值给它。 当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,...
  • 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性。 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它在项目中会存在多个实例。如果data属性值是一...
  • vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。 上面解释了data不能为对象...
  • 为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象? // data data() { return { message: "子组件", childName:this.name } } // new Vue new Vue({ ...
  • Vue实例选项之【data

    2021-02-22 11:17:28
    建议所有会用到的数据都预先在 data 内声明,这样不至于将数据散落在业务逻辑中,难以维护。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例...
  • data是私有数据,主要供组件内部访问。 vue作为一种前端开发框架,组件是其中的主角吧。其实任何一种前端框架,除了vue,还有react,组件都应该是主角。为啥呢,因为组件最能体现面向对象思想,单一职责,良好的封装...
  • Vue组件中data为什么必须是函数? data组件都是vue的实例 组件共享data实例,如果data的值是同一个引用类型的值的时候,改变一个就会影响其他 组件内的data写成函数的形式,数据以函数返回值的形式定义,这样每复用...
  • 请看官网 data 必须是一个函数 ...一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝 我为什么要水一篇文章呢?? 因为我忘了data为啥是个函数了 就酱! ...
  • 组件中为什么data必须是一个函数 一、实例和组件定义data的区别 vue文档在声明式渲染这一节中...在这个demo中data是一个对象,通过 new Vue 创建的 Vue 实例中,我们直接把data上的message属性通过模板渲染到页面上去了
  • 在new Vue()中,data是可以作为一个对象进行操作的,然而在component中,data只能以函数的形式存在,不能直接将对象赋值给它。 当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个...
  • vue中 组件是可以共用的,如果一共用,就会出现多个页面共用一个对象数据,如果是以函数return返回值的方式,没每个实例可以维护一份被返回对象的独立拷贝,数据达到不共用目的 例如 const ob...
  • vue组件中data为什么必须是一个函数

    千次阅读 2020-03-21 18:11:57
    综上可知,如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,511
精华内容 9,404
关键字:

vue维护data

vue 订阅