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)
 
 
效果是一样的，建议使用下面这种方式，因为是在原型上书写，所以可以继承和重用，最近想写点小框架，才发现知识不够用，大家一起加油吧！
 
 

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 预设只有 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')

 
 
 
<!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>