精华内容
下载资源
问答
  • 主要介绍了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)

    复制代码

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

     

    展开全文
  • vuegetter和setter的原理

    千次阅读 2020-06-02 10:26:02
    model只负责数据,view负责更改页面样式,逻辑层用来联系modelview,这样当对应的版块发生改变时,只需要修改相应版块就可以了 UI=VM(state) vue双向绑定原理是由数据劫持结合发布者-订阅者模式实现的 vue的数据劫持...

    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中computed以及getter和setter Vue ,computed 的属性可以被视为是 data 一样,可以读取设值。 因此在 computed 可以分成 getter(读取) setter(设值), 一般情况下是没有 setter 的,computed 预设...

    vue中computed以及getter和setter


    Vue 中,computed 的属性可以被视为是 data 一样,可以读取和设值。
    因此在 computed 中可以分成 getter(读取) 和 setter(设值),
    一般情况下是没有 setter 的,computed 预设只有 getter ,也就是只能读取,不能改变设值。

    vue.js计算属性默认只有 getter,因为是默认值所以我们也常常省略不写,如下代码:

    <div id="demo">{{ fullName }}</div>
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
    

    在computed里的代码完整的写法应该是:

    computed: {
       fullName: {
         get(){
            return this.firstName + ' ' + this.lastName
         }
       }
    }
    

    计算属性getter的触发时间:

    <template>
      <div id="demo">
           <p> {{ fullName }} </p>
           <input type="text" v-model="firstName">
           <input type="text" v-model="lastName">
      </div>
    </template>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'zhang',
        lastName: 'san'
      },
      computed: {
        fullName: function () {
          console.log('computed getter...')
          return this.firstName + ' ' + this.lastName
        }
      },
      updated () {
         console.log('updated')
      }
    })
    

    如果我们改变上边代码里的两个输入框的值firstName或者lastName,都会触发computed以及updated (),也就是说会执行: console.log(‘computed getter…’)和console.log(‘updated’) (用来验证是不是执行了,没有其他意思)

    需要注意的是,不是说我们更改了getter里使用的变量,就会触发computed的更新,前提是computed里的值必须要在模板里使用才行。怎么理解呢?

    如下代码,我们把template里的fullName 注释掉:

    <template>
        <div id="demo">
             <!-- <p> {{ fullName }} </p> -->
             <input type="text" v-model="firstName">
             <input type="text" v-model="lastName">
        </div>
    </template>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'zhang',
        lastName: 'san'
      },
      computed: {
        fullName: function () {
          console.log('computed getter...')
          return this.firstName + ' ' + this.lastName
        }
      },
      updated () {
         console.log('updated')
      }
    })
    

    就算我们更改了firstName以及lastName都不会触发computed 中的 getter 中的console.log(‘computed getter…’),而只会触发console.log(‘updated’)

    计算属性settter

    <template>
        <div id="demo">
             <p> {{ fullName }} </p>
             <input type="text" v-model="fullName">
             <input type="text" v-model="firstName">
             <input type="text" v-model="lastName">
        </div>
    </template>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'zhang',
        lastName: 'san'
      },
      computed: {
        fullName: {
          //getter 方法
            get(){
                console.log('computed getter...')
                return this.firstName + ' ' + this.lastName
            },
       //setter 方法
            set(newValue){
                console.log('computed setter...')
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
                return this.firstName + ' ' + this.lastName
            }
          
        }
      },
      updated () {
         console.log('updated')
      }
    })
    

    在template 中,我们可以看到,input 是直接绑 v-model=“fullName”,如果我们这里直接修改了fullName的值,那么就会触发setter,同时也会触发getter以及updated函数。其执行顺序是setter -> getter -> updated,如下:

    console.log('computed setter...')
    console.log('computed getter...')
    console.log('updated')
    

    这里需要注意的是,并不是触发了setter也就会触发getter,他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。也就是说我们如果注释掉上边的setter中修改firstName 和lastName的代码后就不会执行getter,如下:

    set(newValue){
        console.log('computed setter...')
        //var names = newValue.split(' ')
       //this.firstName = names[0]
      // this.lastName = names[names.length - 1]
      return this.firstName + ' ' + this.lastName
    }
    

    会执行,且顺序如下

    console.log('computed setter...')
    console.log('updated')
    
    展开全文
  • 通过getter和setter进行数据绑定的插件 安装 npm install --save vue-setter 用法 输入绑定 <input type="text" v-setter.name="user" :value="user.getName()"> 将在输入时自动调用user.setName 。 捆绑器...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <...scrip...

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <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
                   }*/
                    //计算属性一般没有set方法,只读属性
                    fullName: {
                       /* set: function (newValue) {
                            // console.log("------"+newValue);
                            const names = newValue.split(' ');
                            this.firstName = name[0]
                            this.lastName = name[1]
                        },*/
    
                        get: function () {
                            return this.firstName+' '+this.lastName
                        }
                    },
    
                    /*fullName: function () {
                        return this.firstName+' '+this.lastName
                    }*/
    
                }
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 对象有两种属性: 数据属性: 就是我们经常使用的属性 访问器属性: 也称存取器属性(存取器属性就是一组获取设置值的函数) ...set对应的方法为setter,负责设置值,在它的函数体,一切的return都是无效的。 ...
  • 计算属性的getter和Setter一、getter和setter二、代码 一、getter和setter 当我们取计算属性值的时候会执行get方法,设置的时候会执行set方法 二、代码 <!DOCTYPE html> <html> <head> <...
  • 每个计算属性都包含一个getter跟一个setter 当你没有set方法的时候那么你的计算属性就只有只读属性,不能被更改,set方法可以省略,当你计算属性设为只读属性的时候,get也可以省略。 <!DOCTYPE html> <...
  • </head> <body> <div id="demo">{{ fullName }}</div> <script> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', //fullName: 'Foo Bar', }, computed: { fullName: { // getter get: ...
  • 计算属性的setter和getter: 使用插值表达式的时候,会先去data里找,找不到的话再去计算属性里找。 计算属性computed里的属性可以写成对象的形式,然后在这个对象里定义两个方法setget,get返回这个属性,set设置...
  • 大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法: setter:设置值时触发。 getter:获取值时触发,与setter是没有必然联系的。 <!DOCTYPE html> <html> <head> <...
  •     watch用于观察监听页面上的vue实例,当你需要在数据变化响应时,执行异步操作,或高性能消耗的操作,那么watch为最佳选择 它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个...
  • vue中computed的缓存以及getter和setter

    千次阅读 2020-05-09 10:00:04
    computed会基于它们的依赖进行缓存,如果数据没法改变则computed刷新时不会重新执行 什么意思呢?我们看下面的代码: methods: { methodsNow: function () { console.log('methods...template我们使用methods的me
  • 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的...
  • 计算属性默认只有 getter,不过在需要时你也可以提供一个 setter getter的使用,如下: <template> <div class="page"> <p>{{firstName}}</p> <p>{{lastName}}</p> <...
  • 计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter getter 用于监控属性变化时触发。 set可选,当computed属性自身被赋值时触发 <div id="app"> {{fullName}} </div> <script>...
  • 计算属性其实是非常强大的,这一节深入的学习下计算属性,先看一段代码: &lt;div id="app"&gt; {{fullName}} ...let vm = new Vue({ el: '#app', data: { firstName: 'Dell', la...
  • 最近因为公司的新项目决定使用Vue.js来做,但在使用的过程发现了一个有趣的事情,因为发现的这个事情展开了一些对于getter和setter的思考,具体是什么下面通过这篇文章来一起看看吧,有需要的朋友们可以参考学习。
  • vue 双向绑定 getter setter

    千次阅读 2018-01-30 14:27:12
    它的每个属性都有两个相对应的getset方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测...
  • vue的计算属性computed中getter和setter的使用 vue官方:计算属性默认只有 getter,不过在需要时你也可以提供一个 setter getter是用来获取的,setter是用来设置的 <div class="home"> <input type="text...
  • <div id="app"> <...script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName:'kobe', lastName:'bryant' }, 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) {...
  • 计算属性的 setter getter 方法一: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...
  • Vue ,computed 的属性可以被视为是 data 一样,可以读取设值,因此在 computed 可以分成 getter(读取) setter(设值),一般情况下是没有 setter 的,computed 预设只有 getter ,也就是只能读取,不...
  • 计算属性默认只有 getter,不过在需要时也可以提供一个 setter: <body> <div id="root">{{fullName}}</div> <script> var vm = new Vue({ el:"#root", data:{ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,699
精华内容 6,279
关键字:

vue中setter和getter的作用

vue 订阅