码迷,mamicode.com
首页 > Windows程序 > 详细

Vue3.0 之 Composition-API

时间:2021-02-18 13:34:13      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:nbsp   reac   lang   mic   利用   this   get   rop   param   

前沿

学习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实际上是ctxproxy

技术图片

 

 

 值得注意的是: setup()执行的时间点是很早的,甚至早于created,因此foo和bar的访问如果没有特意放到onMounted里面会没有

派发自定义事件?

不能用this.$emit()派发事件了,但是提供了方法:

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

所以我们要用到setup函数的第二个参数:

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

当然,还能把emit直接解构出来使用更方便:

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

reactiveref之间做选择

  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
}

 

watchEffectwatch有啥不同?

这俩方法很相似,都是观察响应式数据,变化执行副作用函数,但有如下不同:

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


 

Vue3.0 之 Composition-API

标签:nbsp   reac   lang   mic   利用   this   get   rop   param   

原文地址:https://www.cnblogs.com/yf-html/p/14407136.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!