摘要：定義是一個計算屬性類似于過濾器對綁定到的數(shù)據(jù)進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應的作為計算屬性定義并返回對應的結果給這個變量變量不可被重復定義和賦值和用法回調(diào)函數(shù)當需要讀取當前屬性值是執(zhí)行，根據(jù)相關數(shù)據(jù)計算并返回當前

是一個計算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進行處理

  data: {
    firstName: "Foo",
    lastName: "Bar"
  },
  computed: {
    fullName: function () {
      return this.firstName + " " + this.lastName
    }
  }

fullName不可在data里面定義,
如果定義會報如下圖片的錯誤,因為對應的computed作為計算屬性定義fullName并返回對應的結果給這個變量,變量不可被重復定義和賦值

data: {
    firstName: "Foo",
    lastName: "Bar"
  },
  computed: {
  fullName：{
   get(){//回調(diào)函數(shù) 當需要讀取當前屬性值是執(zhí)行，根據(jù)相關數(shù)據(jù)計算并返回當前屬性的值
      return this.firstName + " " + this.lastName
    },
   set(val){//監(jiān)視當前屬性值的變化，當屬性值發(fā)生變化時執(zhí)行，更新相關的屬性數(shù)據(jù)
       //val就是fullName的最新屬性值
       console.log(val)
        const names = val.split(" ");
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

watch是一個觀察的動作

  data: {
    firstName: "Foo",
    lastName: "Bar",
    fullName: "Foo Bar"
  },
  watch: {
     firstName: function (val) {
     this.fullName = val + " " + this.lastName
  },
  lastName: function (val) {
     this.fullName = this.firstName + " " + val
   }
   }

上面是監(jiān)聽firstName和lastName的變化，但是僅限簡單數(shù)據(jù)類型

data(){
      return{
        "first":2
      }
    },
    watch:{
      first(){
        console.log(this.first)
      }
    },

1.監(jiān)聽復雜數(shù)據(jù)類型需用深度監(jiān)聽

data(){
      return{
        "first":{
          second:0
        }
      }
    },
    watch:{
      secondChange:{
        handler(oldVal,newVal){
          console.log(oldVal)
          console.log(newVal)
        },
        deep:true
      }
    },

2.console.log打印的結果,發(fā)現(xiàn)oldVal和newVal值是一樣的,所以深度監(jiān)聽雖然可以監(jiān)聽到對象的變化,但是無法監(jiān)聽到具體對象里面那個屬性的變化

3.oldVal和newVal值一樣的原因是它們索引同一個對象/數(shù)組。Vue 不會保留修改之前值的副本
vm.$watch的深度監(jiān)聽

4.深度監(jiān)聽對應的函數(shù)名必須為handler,否則無效果,因為watcher里面對應的是對handler的調(diào)用

方法一：可以直接對用對象.屬性的方法拿到屬性
data(){
          return{
            "first":{
              second:0
            }
          }
        },
        watch:{
          first.second:function(newVal,oldVal){
            console.log(newVal,oldVal);
          }
        },
    

方法二：watch如果想要監(jiān)聽對象的單個屬性的變化,必須用computed作為中間件轉化,因為computed可以取到對應的屬性值

data(){
      return{
        "first":{
          second:0
        }
      }
    },
    computed:{
      secondChange(){
        return this.first.second
      }
    },
    watch:{
      secondChange(){
        console.log("second屬性值變化了")
      }
    },

1.是計算值，
2.應用：就是簡化tempalte里面{{}}計算和處理props或$emit的傳值
3.具有緩存性，頁面重新渲染值不變化,計算屬性會立即返回之前的計算結果，而不必再次執(zhí)行函數(shù)

1.是觀察的動作，
2.應用：監(jiān)聽props，$emit或本組件的值執(zhí)行異步操作
3.無緩存性，頁面重新渲染時值不變化也會執(zhí)行

傳入的值想作為局部變量來使用,直接使用會

props:["listShop"],
    data(){
      return{}
    },
    created(){
      this.listShop=30
}

報錯

這個錯誤是說的避免直接修改父組件傳入的值,因為會改變父組件的值,貼上官網(wǎng)介紹

簡單數(shù)據(jù)類型解決方案:
所以可以在data中重新定義一個變量,改變指向,但是也只是針對簡單數(shù)據(jù)類型,因為復雜數(shù)據(jù)類型棧存貯的是指針,

props:["listShop"],
    data(){
      return{
        listShopChild:this.listShop
      }
    },
    created(){
      this.listShopChild=30
    }
    

這樣就可以愉快的更改傳入的簡單數(shù)據(jù)類型的數(shù)據(jù)啦!不會有任何報錯,也不會影響父組件!

復雜數(shù)據(jù)類型在棧中存貯的是指針,所以賦值給新的變量也會改變原始的變量值.那么應該咋整呢?
1.可以手動深度克隆一個復雜的數(shù)據(jù)出來,循環(huán)或者遞歸都行

數(shù)組深度克隆:

var x = [1,2,3];
var y = [];
for (var i = 0; i < x.length; i++) {
    y[i]=x[i];
}
console.log(y);  //[1,2,3]
y.push(4);
console.log(y);  //[1,2,3,4]
console.log(x);  //[1,2,3]

對象深度克隆:

var x = {a:1,b:2};
var y = {};
for(var i in x){
    y[i] = x[i];
}
console.log(y);  //Object {a: 1, b: 2}
y.c = 3;
console.log(y);  //Object {a: 1, b: 2, c: 3}
console.log(x);  //Object {a: 1, b: 2}

函數(shù)深度克隆

var x = function(){console.log(1);};
var y = x;
y = function(){console.log(2);};
x();  //1
y();  //2

為什么函數(shù)可以直接賦值克隆?
由于函數(shù)對象克隆之后的對象會多帶帶復制一次并存儲實際數(shù)據(jù)，因此并不會影響克隆之前的對象。所以采用簡單的復制“=”即可完成克隆。

2.Object.assign
只會對只是一級屬性復制，比淺拷貝多深拷貝了一層而已,所以還是無法達到深度克隆的目的.
詳請請戳

3.強大的JSON.stringify和JSON.parse

const obj1 = JSON.parse(JSON.stringify(obj));

這是ES5新出來的API,先將對象轉化為字符串,就是簡單數(shù)據(jù)類型賦值,再用JSON.parse轉化

直接用computed改變

computed:{
  listShopChild(){
    return this.listShop
   }
}

注意:此時用computed時,如果是數(shù)組this.$set(arr,1,true)對應的值耶不更新，
這個很坑，這個bug我找個很久
如果傳入的值只是在data定義，并未在methods或生命周期鉤子更改，直接改變也會報錯
所以還是可以先用局部變量接收,再修改，這個坑比較多

監(jiān)聽本組件計算和監(jiān)聽

計算或監(jiān)聽父傳子的props值

分為簡單數(shù)據(jù)類型和復雜數(shù)據(jù)類型監(jiān)聽,監(jiān)聽方法如上watch的使用

監(jiān)聽vuex的state或者getters值的變化

computed:{
    stateDemo(){
        return this.$store.state.demoState;
    }
}
watch:{
    stateDemo(){
        console.log("vuex變化啦")
    }
}

很開心小伙伴們能看到這里,接下來給大家簡單羅列下他們的原理!

深入理解 Vue Computed 計算屬性

分為三個過程:實例化Vue、調(diào)用$watch方法、屬性變化，觸發(fā)回調(diào)
Vue的數(shù)據(jù)依賴實現(xiàn)原理簡析
vue中$watch源碼閱讀筆記

公共類

function defineReactive(data, key, val, fn) {
      let subs = [] // 新增
      Object.defineProperty(data, key, {
        configurable: true,
        enumerable: true,
        get: function() {
          // 新增
       if (data.$target) {
        subs.push(data.$target)
      }
      return val
     },
     set: function(newVal) {
      if (newVal === val) return
      fn && fn(newVal)
      // 新增
      if (subs.length) {
        // 用 setTimeout 因為此時 this.data 還沒更新
        setTimeout(() => {
          subs.forEach(sub => sub())
        }, 0)
      }
      val = newVal
    },
   })
 }

function computed(ctx, obj) {
  let keys = Object.keys(obj)
  let dataKeys = Object.keys(ctx.data)
  dataKeys.forEach(dataKey => {
    defineReactive(ctx.data, dataKey, ctx.data[dataKey])
  })
  let firstComputedObj = keys.reduce((prev, next) => {
    ctx.data.$target = function() {
      ctx.setData({ [next]: obj[next].call(ctx) })
    }
    prev[next] = obj[next].call(ctx)
    ctx.data.$target = null
    return prev
  }, {})
  ctx.setData(firstComputedObj)
}

function watch(ctx, obj) {
  Object.keys(obj).forEach(key => {
    defineReactive(ctx.data, key, ctx.data[key], function(value) {
      obj[key].call(ctx, value)
    })
  })
}

https://segmentfault.com/a/11...
大家如果發(fā)現(xiàn)有什么錯誤,歡迎指正,共同交流。如果覺得篇文章真的對你有點作用。
謝謝親們能看完！