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 要加油呀 哈哈