精华内容
下载资源
问答
  • vuegetter和setter的原理
    千次阅读
    2020-06-02 10:26:02

    vue渐进式框架

    如果采用原生js来对dom元素进行操作,需要获取元素再获取相关内容然后添加一系列事件,这样操作繁琐
    MV*就是将js分为三个部分,model(数据) (逻辑控制) view(视图)
    model只负责数据,view负责更改页面样式,
    逻辑层用来联系model和view,这样当对应的版块发生改变时,只需要修改相应版块就可以了

    UI=VM(state)

    vue双向绑定原理是由数据劫持结合发布者-订阅者模式实现的
    vue的数据劫持是通过Object.defineProperty()来对对象的setter和getter属性进行操作,在数据变动时,进行你想要的操作

    
        Object.defineProperty(obj , prop , descriptor)
    
    
    • 参数
      obj 要在其上定义属性的对象
      prop 要定义或修改的属性的名称
      descriptor 将被定义或修改的属性描述
    • 返回值
      被传递给函数的对象

    也就是说它可以控制一个对象属性的一些特有操作,比如读写或是否可枚举等,这里主要看set和get

    
        var obj = {};
        obj.name = 'yz';
        console.log(obj.name);
    
        // 通过Object.defineProperty()的set和get方法,使打印出来的name名前后都加上长长的*********
        var obj = {};
        var temp = '';
        Object.defineProperty( obj , 'name' , {
            set : function(value){
                temp = value;
                console.log('名字是' + value)
            },
            get : function(){
                console.log('get监听');
                return `***** ${temp} *****`
            }
        })
        obj.name = 'dddd';
        console.log(obj.name);
    
    


     

    更多相关内容
  • 主要介绍了Vue getter setter,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue引发的getter和setter

    千次阅读 2020-11-04 14:09:42
    Vue引发的getter和setter 看着文档研究了一下vue的双向数据绑定,打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的getset方法,我觉的这是多此一举的,于是去网上查...

     

    Vue引发的getter和setter

    看着文档研究了一下vue的双向数据绑定,打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情:

    它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图。而Vue使用的发布订阅模式,是点对点的绑定数据。

    Vue的数据绑定只有两个步骤,compile=>link。

    我一直在想,vue是通过什么去监听用户对Model的修改,直到我发现Vue的data里,每个属性都有set和get属性,我才明白过来。

    在平时,我们创建一个对象,并修改它的属性,是这样的:

        var obj = {
            val:99
        }
        obj.val = 100;
        console.log(obj.val)//100

    没有任何问题,但是如果要你去监测,当我修改了这个对象的属性时,要去做一些事,你会怎么做?

    这就要用到getter和setter了。

    假设我现在要给一个码农对象添加一个name属性,而且每次更新name属性时,我要去完成一些事,我们可以这样做:

    复制代码

        var Coder = function() {
            var that = this;
            return {
                get name(){
                    if(that.name){
                        return that.name
                    }
                    return '你还没有取名'
                },
                set name(val){
                    console.log('你把名字修成了'+val)
                    that.name = val
                }
            }
        }
        var isMe = new Coder()
        console.log(isMe.name)
        isMe.name = '周神'
        console.log(isMe.name)
        console.log(isMe)

    复制代码

    输出:

    你会发现这个对象和最上面的Vue中的data对象,打印出来的效果是一样的,都拥有get和set属性。

    我们来一步步分析下上面的代码,很有趣。

    我们先创建一个对象字面量:

    var Coder = function() {...}

    再把this缓存一下:

    var that = this;

    接下来是最重要的,我们return了一个对象回去:

    {

      get name(){...},

      set name(val){...}

    }

    顾名思义,get为取值,set为赋值,正常情况下,我们取值和赋值是用obj.prop的方式,但是这样做有一个问题,我如何知道对象的值改变了?所以就轮到set登场了。

    你可以把get和set理解为function,当然,只是可以这么理解,这是完全不一样的两个东西。

    接下来创建一个码农的实例,isMe;此时,isMe是没有name属性的,当我们调用isMe.name时,我们会进入到get name(){...}中,先判断isMe是否有name属性,答案是否定的,那麽就添加一个name属性,并给它赋值:"你还没有取名";如果有name属性,那就返回name属性。

    看到这里你一定知道get怎么使用了,对,你可以把get看成一个取值的函数,函数的返回值就是它拿到的值。

    我感觉比较重要的是set属性,当我给实例赋值:

    isMe.name="周神"

    此时,会进入set name(val){...};形参val就是我赋给name属性的值,在这个函数里,我就可以做很多事了,比如双向绑定!因为这个值的每次改变都必须经过set,其他方式是改变不了它的,相当于一个万能的监听器。

    还有另一种方法可以实现这个功能。

    ES5的对象原型有两个新的属性__defineGetter__和__defineSetter__,专门用来给对象绑定get和set。可以这样书写:

    复制代码

      var Coder = function() {
        }
        Coder.prototype.__defineGetter__('name', function() {
            if (this.name) {
                return this.name
            }else{
                return '你还没有取名'
            }
        })
        Coder.prototype.__defineSetter__('name', function(val) {
            this.name = val
        })
        var isMe = new Coder()
        console.log(isMe.name)
        isMe.name = '周神'
        console.log(isMe.name)
        console.log(isMe)

    复制代码

    效果是一样的,建议使用下面这种方式,因为是在原型上书写,所以可以继承和重用,最近想写点小框架,才发现知识不够用,大家一起加油吧!

     

    展开全文
  • <div id="app"> <...script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName:'kobe', lastName:'bryant' }, computed:{
    <div id="app">
      <h2>{{fullName}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          firstName:'kobe',
          lastName:'bryant'
        },
        computed:{
          // 这种写法只是简写
          fullName:function () {
            return this.firstName+' '+this.lastName
          }
          /*这种属于一个属性,如果是计算属性的话应该里面有get和set方法,
          而在我看来就有点像JAVASpringMVC中对数据层处理事的getter和setter方法。
          在java中这两个方法也是可以自动生成
          计算属性一般是没有set方法的,只是只读属性,
          因为计算属性的话就相当于计算之后返回一个结果的,那么set方法当然是可以省略的
          所以既然相当于是只有get的方法的话,每次都这样写的话也麻烦,索性就按照最简单的方法写
          这也是为什么每次我们调用的时候不用加上()的原因,
          就是因为调用的是属性名,然后系统解析的时候会根据这个属性名去找里面的get方法
          */
          /*fullName:{
           /!* set:function (value) {
    
            },*!/
            get:function () {
              return 'abc'
            }
    
          }*/
        }
      })
    </script>
    
    展开全文
  • vue的计算属性computed中getter和setter的使用 vue官方:计算属性默认只有 getter,不过在需要时你也可以提供一个 setter getter是用来获取的,setter是用来设置的 <div class="home"> <input type="text...

    vue的计算属性computed中getter和setter的使用

    vue官方:计算属性默认只有 getter,不过在需要时你也可以提供一个 setter
    个人理解:getter是用来获取的,setter是用来设置的
    例如:

    <div class="home">
    	 <input type="text"  v-model="nameone"/>
    	 <input type="text"  v-model="nametwo"/>
    	 <input type="text"  v-model="namethree"/>
      </div>
    
    data(){
    	  return{
    		  nameone:"",
    		  nametwo:"",
    	  }
      },
    computed:{
    	  namethree:{
    		  get(){
    			 return this.namethree=this.nameone+" "+this.nametwo
    		  },
    		  set(value){
    			 var name=value.split(" ")
    			  this.nameone=name[0]
    			  this.nametwo=name[1]
    		  }
    	  }
    	  
      }
    

    get()获取nameone和nametwo的值,拼接成为namethree的值;
    set()设置namethree的发生变化时,nameone和nametwo的值也会更新。

    展开全文
  • 对象有两种属性: 数据属性: 就是我们经常使用的属性 访问器属性: 也称存取器属性(存取器属性就是一组获取设置值的函数) ...set对应的方法为setter,负责设置值,在它的函数体,一切的return都是无效的。 ...
  • 计算属性的setter和getter <script src="../vue.js"> {{fullName}} var vm = new Vue({ el: '#app', data: { firstName: 'Dell', lastName: 'lee' }, computed: { fullName: { get: function()...
  • 最近因为公司的新项目决定使用Vue.js来做,但在使用的过程发现了一个有趣的事情,因为发现的这个事情展开了一些对于getter和setter的思考,具体是什么下面通过这篇文章来一起看看吧,有需要的朋友们可以参考学习。
  • 计算属性 (computed) 的 getter setter 目录计算属性 (computed) 的 getter setter一、getter二、setter 一、getter 正常情况下,computed 默认只有 getter,写法一般是:属性名(), computed:{ //计算属性 ...
  • 计算属性的getter和Setter一、getter和setter二、代码 一、getter和setter 当我们取计算属性值的时候会执行get方法,设置的时候会执行set方法 二、代码 <!DOCTYPE html> <html> <head> <...
  • vue中computed以及getter和setter Vue ,computed 的属性可以被视为是 data 一样,可以读取设值。 因此在 computed 可以分成 getter(读取) setter(设值), 一般情况下是没有 setter 的,computed 预设...
  • Vue之计算属性getter和setter

    千次阅读 2018-06-09 12:30:36
    Vue({ el: '#app' , data:{ firstName: 'Quincy' , lastName: 'Cui' }, computed:{ fullName:{ get: function () { return this .firstName+ ' ' + this .lastName }, set: function (val) {...
  • 每一个计算属性都包含一个getter和一个setter 一般情况,我们只是使用getter来读取。 在某些情况下,你也可以提供一个setter方法(不常用) <div id="app"> <h2>{{firstName}}</h2> <h2>...
  • 1、默认写法:函数 computed: { test1() {}, }, 2、完整写法:对象 computed: { test2: { get() { return this.firstName + " " + this.lastName;//需要有返回值 }, ... this.firstNa
  • 计算属性默认只有 getter,不过在需要时你也可以提供一个 setter getter的使用,如下: <template> <div class="page"> <p>{{firstName}}</p> <p>{{lastName}}</p> <...
  • Getter/Setter是一个万恶的概念,其实就是一个规定好参数context的函数标准。 let obj = { a:1, b:0 } 取a的值 obj.a 就是getter 设置a的值obj.a=10 就是setter 如果我想统计 a被访问了多少次,把次数统计到b...
  • 本文实例讲述了js中getter和setter用法。分享给大家供大家参考,具体如下: 在学习Vue计算属性时,有一句“计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter”。 getter和setter到底是什么?于是我...
  • 每个计算属性都包含一个getter跟一个setter 当你没有set方法的时候那么你的计算属性就只有只读属性,不能被更改,set方法可以省略,当你计算属性设为只读属性的时候,get也可以省略。 <!DOCTYPE html> <...
  • 计算属性的setter和getter: 使用插值表达式的时候,会先去data里找,找不到的话再去计算属性里找。 计算属性computed里的属性可以写成对象的形式,然后在这个对象里定义两个方法setget,get返回这个属性,set设置...
  • 2、computed包含getter(取值)和setter(监听,主动改变) 截图1原本是这样 在这里插入图片描述 3、setter部分,是主动设置, 即运行 vm.fullName = ‘dddd’ 时,setter 就会被调用 get() 获取firstName...
  • 应该声明一个计算属性,该计算属性不用挂载到Vue实例的data上,而是在Vue实例的computed上。程序员编写的函数将作用与 property.vm.reversedMessage 的 getter函数 具体看https://cn.vuejs.org/
  • 本文主要给大家介绍的关于Javascript中getter和setter的相关内容,第一次听说这个东西的时候是vue.js里面的数据绑定,只要绑定了数据,修改对象属性可以自动反馈到dom上,很神奇,后面也看到了文档里面实现是对对象...
  • 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的...
  • vue 双向绑定 getter setter

    千次阅读 2018-01-30 14:27:12
    它的每个属性都有两个相对应的getset方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测...
  • 关键词:computed(gettersetter)注意:split()方法用于把一个字符串分割成字符串数组一、原始的Vue实例computed{{fullName}}var vm = new Vue({el: "#app",data: {firstName: "miya",lastName: "Wang"},computed: ...
  • class China{ get province(){ console.log('--已经进入了这个方法--') return '北京市'; } set province(city){ console.log('省份已经更改'); } } let country = new China(); const d = country.......
  • Getter和Setter方法作用

    千次阅读 2019-06-05 12:25:22
    gettersetter是个很好的中间层。 这两个方法可以方便增加额外功能(比如验证)。 内部存储外部表现不同。 可以保持外部接口不变的情况下,修改内部存储方式逻辑。 任意管理变量的生命周期内存存储方式。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,461
精华内容 7,384
关键字:

vue中getter和setter