精华内容
下载资源
问答
  • 浅谈vue组件data

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

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

    展开全文
  • 在开发可重用组件的时候Vuedata作为函数return其他的对象。 将data作为对象将导致全局变量污染,即一个组件修改data后另一个组件的data也被修改。 而将data设定成返回对象的函数时,每个实例可以维护被返回对象的...

    原因

    在开发可重用组件的时候Vue的data作为函数return其他的对象。
    data作为对象将导致全局变量污染,即一个组件修改data后另一个组件的data也被修改。
    而将data设定成返回对象的函数时,每个实例可以维护被返回对象的独立拷贝。即每次都会有新的对象生成,即内存栈中的引用地址不一样,也就不会有全局变量污染。

    举个例子

    	//当data作为对象时
    	data{
    		count:0	
    	}
    	//当data作为返回对象的函数时
    	data = function(){
    		return {
    			x : 0
    		}
    	}
    
    展开全文
  • 在使用Vue构建组件化应用时,每个组件的data属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。 Vue简单实例 在一个Vue简单实例中...

    data为何以函数形式返回

    在使用Vue构建组件化应用时,每个组件的data属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。

    Vue简单实例

    在一个Vue简单实例中,也就是不使用组件化实现的时候,data可以是一个对象,因为本身也只有一个实例,就不存在多个实例共享的问题。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue</title>
    </head>
    <body>
        <div id="app">
            <div>{{msg}}</div>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue Instance'
            }
        })
    </script>
    </html>
    

    组件化实例

    如果是使用Vue的组件化实例,那么data属性就必须以函数的形式返回,如果不使用函数的形式返回,可能会出现一些意料之外的情况,比如下面的例子中,按钮组件是复用的,在点击第一个按钮时本身应该只有第一个按钮+1,但是所有的按钮都跟随+1。请注意,在此处仍然是使用函数的形式返回,这是因为如果在组件化实现中如果不使用函数的形式返回Vue会直接报错,但是实现的效果是相同的,虽然是以函数的形式返回,但是返回的对象中count属性都是指向了对于counter对象的引用,本质上依旧是多个组件实例共享一个对象,实际效果与以对象的形式直接返回相同。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue</title>
    </head>
    <body>
        <div id="app">
            <button-counter></button-counter>
            <button-counter></button-counter>
            <button-counter></button-counter>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script type="text/javascript">
        var counter = {
            count: 0
        }
        Vue.component('button-counter', {
          data: function(){
              return counter;
          },
          template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        var vm = new Vue({
            el: '#app'
        })
    </script>
    </html>
    

    所以为了规避这种现象,在组件化实现的时候,data属性必须以函数的形式返回,以便每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue</title>
    </head>
    <body>
        <div id="app">
            <button-counter></button-counter>
            <button-counter></button-counter>
            <button-counter></button-counter>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script type="text/javascript">
        Vue.component('button-counter', {
          data: function(){
              return {
                count: 0
              }
          },
          template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        var vm = new Vue({
            el: '#app'
        })
    </script>
    </html>
    

    每日一题

    https://github.com/WindrunnerMax/EveryDay
    

    参考

    https://segmentfault.com/a/1190000019318483
    https://cn.vuejs.org/v2/guide/components.html
    https://blog.csdn.net/fengjingyu168/article/details/72900624
    
    展开全文
  • Vue 的组件都是可复用的,一个组件创建好后,可以在多个地方复用,而不管复用多少次,组件内的data都应该是相互隔离,互不影响的,所以组件每复用一次,data就应该复用一次,每一处复用组件的data改变应该对其他复用...

    Vue 的组件都是可复用的,一个组件创建好后,可以在多个地方复用,而不管复用多少次,组件内的data都应该是相互隔离,互不影响的,所以组件每复用一次,data就应该复用一次,每一处复用组件的data改变应该对其他复用组件的数据不影响。

    为了实现这样的效果,data就不能是单纯的对象,而是以一个函数返回值的形式,所以每个组件实例可以维护独立的数据拷贝,不会相互影响。

    展开全文
  • VUE data传值

    2019-01-22 09:41:19
    data 必须是一个函数 上面例子中,可以看到 button-counter...这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝,如果 data 是一个对象则会影响到其他实例,如下所示: &lt;!DOCTYPE html&gt; ...
  • vue 组件的data属性

    2020-11-26 19:46:45
    取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝: data: function () { return { count: 0 } } 案例: Vue.component("zidingyi", { template: "#tpl",
  • 组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有...
  • 但是表达式如果过长,或逻辑更为复杂时,就会变得雕肿甚至难以阅读和维护如:{{ text.split ( ’,’ ) •reverse () . join (’,’)}}这里的表达式包含 3 个操作,并不是很清晰,所以在遇到复杂的逻辑时应该使用 ...
  • 在new Vue()中,data是可以作为一个对象进行操作的,然而在component中,data只能以函数的形式存在,不能直接将对象赋值给它。 当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个...
  • 因为vue中的组件是为了复用的,且 JS 里对象是引用关系,如果组件中 data 是一个对象,那么这样作用域没有隔离,子组件中的 data 属性值会相互影响,如果组件中 data 选项是一个函数,那么每个实例可以维护一份被返回...
  • 官方文档的解释:当我们定义这个 <...复制代码取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:data: function () { return { count: 0 }复制代码...
  • 综上可知,如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份...
  • Vue实例选项之【data

    2021-02-22 11:17:28
    建议所有会用到的数据都预先在 data 内声明,这样不至于将数据散落在业务逻辑中,难以维护。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例...
  • 什么时候用计算属性?官方解释:当模板中放入太多的逻辑,模板过重且难以维护时,你都应当使用计算属性通俗表达:当你要渲染到页面的数据需要通过大量的计算才可以得到,这时候就应该使用计算属性代码案例:##...
  • 一.Vue计算属性——快速入门1、什么是计算属性我们知道,Vue.js提供了完全的 JavaScript 表达式支持,所以可以在模版的 {{ }} 花括号或者属性绑定内书写JavaScript 语句。那么问题来了,在模板中放入太多的逻辑会让...
  • 那么每个实例可以维护一份被返回对象的独立的拷贝, 组件实例之间的 data 属性值不会互相影响;而 new Vue 的实例, 是不会被复用的,因此不存在引用对象的问题。 例子一: function Component() {} Component....
  • 写在前面:vue-resource可以发送ajax,实现异步加载,但是Vue官方已经不再维护这个库了。 vue-resource依赖于vue,因此要先引入vue,再引入vue-resource。正确引入vue-resource后,再vue全局上会挂载一个$http方法...
  • 赞一下vue.js的维护人员,我会按照官方的API里整合的目录分模块进行学习 本章内容是有关vue的数据处理,主要介绍data,computed,method,watch,有关props值传递,会单独开一章玩一下。ok,进入正题。(如对数据操作感...
  • 请看官网 data 必须是一个函数 ...一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝 我为什么要水一篇文章呢?? 因为我忘了data为啥是个函数了 就酱! ...
  • Vue中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们会使用计算属性基本...
  • vue中 组件是可以共用的,如果一共用,就会出现多个页面共用一个对象数据,如果是以函数return返回值的方式,没每个实例可以维护一份被返回对象的独立拷贝,数据达到不共用目的 例如 const ob...
  • 如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难。因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。{{message.split('').reverse().join('')}}在这种情况...
  • 在模板中放入太多的逻辑会让模板过重且难以维护。例如: {{ message.split('').reverse().join('') }}在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符...
  • 在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题。computed原理computed的属性...
  • (防止模板中的过多逻辑难以维护){{ message.split('').reverse().join('') }}在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串。当你想要在模板中多次...
  • 一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝: data: function () { return { count: 0 } } 我自己的理解是: JS里面的原型链和原型继承导致必须使用函数而不能使用...
  • 一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝 <div id="app"> <my-button></my-button> </div> <script> Vue.component('my-button', { ...
  • 组件是可复用的Vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后...
  • 规范与每个团队和个人都是息息相关的,...提高代码阅读性、降低代码维护成本等,本文是记录一些在项目code review中常见的规范,仅供参考JS部分和渲染无关的数据vuedata的数据默认便会进行双向数据绑定,若是将...
  • 组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 373
精华内容 149
关键字:

vue维护data

vue 订阅