這篇文章主要為大家展示了“js中如何實(shí)現(xiàn)vue.watch”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js中如何實(shí)現(xiàn)vue.watch”這篇文章吧。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),雙清企業(yè)網(wǎng)站建設(shè),雙清品牌網(wǎng)站建設(shè),網(wǎng)站定制,雙清網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,雙清網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

getter和setter

getter 是一種獲得屬性值的方法，setter是一種設(shè)置屬性值的方法。
屬性被賦值 a = 1的時(shí)候, a 的原型內(nèi)的setter就會(huì)被觸發(fā)；
而 console.log(a) 的時(shí)候，a 的原型內(nèi)的getter就會(huì)被觸發(fā)。

實(shí)現(xiàn)getter和setter

我們不能直接給變量的setter和getter 綁定事件函數(shù)，為了實(shí)現(xiàn)綁定我們要借助Object對(duì)象來(lái)構(gòu)造帶有setter和getter的屬性。

這里有前輩總結(jié)的 幾種實(shí)現(xiàn)getter和setter的方法，而且他還總結(jié)了一些Object.prototype內(nèi)控制屬性枚舉的特性的隱式屬性。

我這里選用了比較好構(gòu)造的一種 Object.defineProperty

概要
Object.defineProperty() 方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性， 并返回這個(gè)對(duì)象。
語(yǔ)法
Object.defineProperty(obj, prop, descriptor)
參數(shù)
obj
需要定義屬性的對(duì)象。
prop
需被定義或修改的屬性名。
descriptor
需被定義或修改的屬性的描述符。

1. 第一個(gè)參數(shù)，被構(gòu)造的屬性的this指向的對(duì)象

2. 第二個(gè)參數(shù)，被構(gòu)造的屬性名

3. 第三個(gè)參數(shù)，構(gòu)造的規(guī)則（上面的文字鏈接最后面有介紹）

(function () {
  var o = { a : 1}//聲明一個(gè)對(duì)象,包含一個(gè) a 屬性,值為1
  Object.defineProperty(o,"b",{
    get: function () {
      return this.a;
    },
    set : function (val) {
      this.a = val;
    },
    configurable : true
  });

  console.log(o.b);//==> 1
  o.b = 2;
  console.log(o.b);//==> 2
})();

configurable是指 "b" 是否可以被再配置，默認(rèn)是false。false的話
Object.defineProperty(o,"a",{set : function(val){}} );

再修改時(shí)會(huì)不起作用或者報(bào)錯(cuò)，一般默認(rèn)false。

構(gòu)造我們的vue.watch

目標(biāo)實(shí)現(xiàn)，以下是我們想要的達(dá)到的效果

import watcher from './watcher.js';
let wm = new watcher({
  data:{
    a: 0 
  },
  watch:{
    a(newVal,oldVal){
      console.log('newVal:'+newVal);
      console.log('oldVal:'+oldVal);
    }
  }
})
vm.a = 1 
// newVal:1
// oldVal:0

創(chuàng)建構(gòu)造對(duì)象

class watcher{
  constructor(opts){
    this.$data = opts.data;
    for(let key in opts.data){
      this.setData(key,opts.data[key])
    }
  }

  setData(_key,_val){
    Object.defineProperty(this,_key,{
      get: function () {
        return this.$data[_key];
      },
      set : function (val) {
        const oldVal = this.$data[_key];
        if(oldVal === val)return val;
        this.$data[_key] = val;
        return val;
      },
    });
  }
}

export default watcher;

添加 watch事件觸發(fā)

/**
 * @desc 屬性改變監(jiān)聽(tīng)，屬性被set時(shí)出發(fā)watch的方法，類似vue的watch
 * @author Jason
 * @date 2018-04-27
 * @constructor 
 * @param {object} opts - 構(gòu)造參數(shù). @default {data:{},watch:{}};
 * @argument {object} data - 要綁定的屬性
 * @argument {object} watch - 要監(jiān)聽(tīng)的屬性的回調(diào) 
 * watch @callback (newVal,oldVal) - 新值與舊值 
 */
class watcher{
  constructor(opts){
    this.$data = this.getBaseType(opts.data) === 'Object' ? opts.data : {};
    this.$watch = this.getBaseType(opts.watch) === 'Object' ? opts.watch : {};
    for(let key in opts.data){
      this.setData(key)
    }
  }

  getBaseType(target) {
    const typeStr = Object.prototype.toString.apply(target);
  
    return typeStr.slice(8, -1);
  }

  setData(_key){
    Object.defineProperty(this,_key,{
      get: function () {
        return this.$data[_key];
      },
      set : function (val) {
        const oldVal = this.$data[_key];
        if(oldVal === val)return val;
        this.$data[_key] = val;
        this.$watch[_key] && typeof this.$watch[_key] === 'function' && (
          this.$watch[_key].call(this,val,oldVal)
        );
        return val;
      },
    });
  }
}

export default watcher;

• 為了函數(shù)內(nèi)部的健壯性，getBaseType是用來(lái)做類型校驗(yàn)的。

• Object.defineProperty(this),this把上下文指向當(dāng)前對(duì)象。

• this.$watch[_key].call(this,val,oldVal),把監(jiān)聽(tīng)事件的上下文頁(yè)綁定到當(dāng)前對(duì)象，方便在watch內(nèi)通過(guò)this獲取對(duì)象內(nèi)的值，如下

let wm = new watcher({
  data:{
    a: 0,
    b: 'hello'
  },
  watch:{
    a(newVal,oldVal){
      console.log(this.b);
    }
  }
})

總結(jié)

有人可能會(huì)問(wèn)為什么不直接用vue呢。你也知道vue是一個(gè)工程級(jí)別的框架，做比較大的項(xiàng)目當(dāng)然是用vue，react；但是單單做一個(gè)展示性的官網(wǎng)或者做個(gè)移動(dòng)端的H5宣傳頁(yè)也用上vue嗎？那當(dāng)然是沒(méi)有必要的。
用上這一個(gè)watcher類，可以讓你頁(yè)面的狀態(tài)控制有條理、有跡可循。
比如幾個(gè)按鈕聯(lián)動(dòng)一個(gè)或幾個(gè)視圖的改變和動(dòng)效的時(shí)候，你就不用在每個(gè)按鈕的click時(shí)都觸發(fā)一下修改

 btn1.onclick=function(){
  var a = 'haha';
  document.getElementById('id').innerHTML = a;
 }
 btn2.onclick=function(){
  var a = 'xixi';
  document.getElementById('id').innerHTML = a;
 }
let wm = new watcher({
  data:{
    a: "",
  },
  watch:{
    a(newVal,oldVal){
      document.getElementById('id').innerHTML = newVal;
    }
  }
})

btn1.onclick=function(){
  wm.a = 'haha';
 }
 btn2.onclick=function(){
  wm.a = 'xixi';
 }

以上是“js中如何實(shí)現(xiàn)vue.watch”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！