# Vue 作品實戰 2022 春季班_week3_直播筆記

###### tags: `六角學院_Vue直播班_直播筆記`

## 目錄
[ToC]

---

## 物件參考

### call by sharing

// 如果改物件內的屬性
function add(obj) {
  obj.number++;
}

var o = { number: 10 };
add(o);
console.log(o.number); // 11

//如果直接指向新物件;
function add(obj) {
// 讓 obj 變成一個新的 object
  obj = {
    number: obj.number + 1
  };
}

var o = { number: 10 };
add(o);
console.log(o.number); // 10


如果在 function 裡面對物件重新賦值， 裡面的 obj 會指向新的物件，外面的 o 並不會。

const person1 = { name: "小明" };
function fn(item) {
  item = {};
  item.name = "小美";
}
fn(person1);
console.log(person1.name); // 值為 小明

### function 被執行一定會回傳，就算沒有 return，因為執行 function 是表達式

### 淺層拷貝

var a = { name: "a" };
function changeData(param) {
  // 方法一：Object assign
  // const newData = Object.assign(param, {});
  // console.log('Object.assign', newData); // 淺層複製

  // 方法二：展開
  const newData = { ...param };
  console.log("Spread syntax", newData); // 淺層複製
  return newData;
}
var b = changeData(a);
console.log(a === b);

### 深層拷貝


let obj1 = { foo: "bar", arr: [0, 1] };
let obj3 = JSON.parse(JSON.stringify(obj1));

### 物件重新賦值

const people = [
  {
    name: "卡斯伯",
    like: "鍋燒意麵",
    price: 95,
    imageUrl:
      "https://images.unsplash.com/photo-1569562211093-4ed0d0758f12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
  },
  {
    name: "瑞",
    like: "炒麵",
    price: 80,
    imageUrl:
      "https://images.unsplash.com/photo-1612929633738-8fe44f7ec841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8ZnJpZWQlMjBub29kbGVzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60"
  },
  {
    name: "小明",
    like: "黑胡椒燴飯",
    price: 120,
    imageUrl:
      "https://images.unsplash.com/photo-1637362520022-81292a4bff4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
  },
  {
    name: "喬伊",
    like: "生菜沙拉",
    price: 80,
    imageUrl:
      "https://images.unsplash.com/photo-1505253716362-afaea1d3d1af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
  }
];
people.forEach((person) => {
  if (person.name === "卡斯伯") {
    person = {
      name: "杰倫",
      like: "香菜",
      price: 180
    };
  }
});
console.log(people); // Ｑ：請問卡斯伯是否有被替換？ A : 沒有


people.forEach((person,key) => {
  if (person.name === "卡斯伯") {
    people[key] = {
      name: "杰倫",
      like: "香菜",
      price: 180
    };
  }
});
console.log(people); //這樣才有改到


## Vue 起手式

### watch 和 debounce

使用 debounce 避免有改動的時候狂打 api

import { debounce } from 'https://cdn.jsdelivr.net/npm/@esm-bundle/lodash@4.17.21/esm/index.js';

watch: {
  seed: debounce((current) => {
    axios.get(`https://randomuser.me/api/?seed=${current}`).then((res) => {
      console.log(res.data);
    });
  }, 1000);
}

如果 debounce callback function 裡面要用到 this ，不要用箭頭函式，不然會指到 window

<iframe height="300" style="width: 100%;" scrolling="no" title="debounce 使用箭頭函式的 this" src="https://codepen.io/jason60810/embed/zYPOBqa?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jason60810/pen/zYPOBqa">
debounce 使用箭頭函式的 this</a> by jason (<a href="https://codepen.io/jason60810">@jason60810</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>