Vue3.0 之 Composition-API

前沿

學習Vue3.0也有一段時間啦，現在就是整理下關於Vue3.0，

假期在家 晚上用1-2個小時看下代碼然后整理下，說實在的，真的完全太喜歡春節了，好了

先看下關於Vue3.0的知識點吧

 

要怎么獲取組件實例

 

setup里面this指向window，composition的文檔中沒有提到怎么獲取組件實例呀：

可以通過getCurrentInstance()這個接口獲取組件實例：

setup() {
  // getCurrentInstance()可以獲取組件實例
  const instance = getCurrentInstance()
  console.log(instance);
  onMounted(()=>{
    // 組件實例的上下文才是我們熟悉的this
    console.log(instance.ctx.foo); // 'foo'
    console.log(instance.ctx.bar()); // '我是bar方法'
  })
  return {}
}

 

vue3中組件實例結構如下，各個選項中的this實際上是ctx或proxy

 

 

 值得注意的是： setup()執行的時間點是很早的，甚至早於created，因此foo和bar的訪問如果沒有特意放到onMounted里面會沒有

派發自定義事件？

不能用this.$emit()派發事件了，但是提供了方法：

setup() {
  getCurrentInstance().emit('ooxx') 
}

所以我們要用到setup函數的第二個參數：

setup(props, ctx) {
    ctx.emit('ooxx')
}

當然，還能把emit直接解構出來使用更方便：

setup(props, { emit }) {
    emit('ooxx')
}

reactive和ref之間做選擇

  1.如果是單值，建議ref，哪怕是個單值的對象也可以

const counterRef = ref(1)
const usersRef = ref(['tom', 'jerry'])

      一個業務關注點有多個值，建議reactive

const mouse = reactive({
    x: 0,
    y: 0
})

  降低Ref心智負擔的方法：利用unref、isRef、isProxy等工具方法，利用一些命名約定。

setup(props) {
  const foo = unref(props.foo) // foo是我們要的值
  // 等效於
  const foo = isRef(props.foo) ? props.foo.value : props.foo
}

 

watchEffect和watch有啥不同？

這倆方法很相似，都是觀察響應式數據，變化執行副作用函數，但有如下不同：

watch需要明確指定監視目標

watch(() => state.counter, (val, prevVal) => {})

watchEffect不需要

watchEffect(() => {
    console.log(state.counter)
})

watch可以獲取變化前后的值

watch是懶執行的，它等效於vue2中的this.$watch()，watchEffect為了收集依賴，要立即執行一次

生命周期鈎子能寫多個

setup() {
  onMounted(() => {})
  onMounted(() => {})
  onMounted(() => {})
}

甚至還能拆分出多個相同生命周期鈎子到獨立函數中呢，有點東西呀

function fun1() {
  // 這里可以用onMounted執行代碼
  onMounted(() => {})
}
function fun2() {
  // 這里還可以用onMounted執行代碼
  onMounted(() => {})
}

setup() {
  fun1()
  fun2()
  onMounted(() => {})
}


用了點春節假期時間整理下關於composition API，

2021 要加油呀 哈哈