标签: vue-composition-api

所以我一直在学习 Vue Composition API 并且想知道“watchEffect”和“watch”之间的区别是什么。Watch 说它和 Vue 2 watch 一样，所以我猜 watchEffect 就像 2.0 一样？我想知道是否有任何特定情况下一个比另一个有很大的优势，比如在停止 watchEffect 然后重新激活它而不是在常规手表中使用布尔值的情况下......或者它们只是基本上不同的方式写同样的东西。

谢谢！

参考：

观察效果：https ://vue-composition-api-rfc.netlify.com/api.html#watcheffect

观看：https : //vue-composition-api-rfc.netlify.com/api.html#watch

我正在使用新的 Vue 插件来使用组合 API 和 TypeScript，但有些我不太理解。

我应该如何键入计算属性？

import Vue from 'vue'
import { ref, computed, Ref } from '@vue/composition-api'

export default Vue.extend({
  setup(props, context) {

    const movieName:Ref<string> = ref('Relatos Salvajes')
    const country:Ref<string> = ref('Argentina')

    const nameAndCountry = computed(() => `The movie name is ${movieName.value} from ${country.value}`);

    return { movieName, country, nameAndCountry }
  }
})

在这个简单的例子中，我声明了两个引用和一个计算属性来连接两者。VSC 告诉我计算属性正在返回ReadOnly类型......但我无法让它工作。

问题

我在 Vue.js 3 中使用 async setup()，但我的 HTML 内容消失了。我的组件模板没有插入到 HTML，但是当我删除 async 和 await 前缀时，我的 HTML 内容又回来了。我怎样才能解决这个问题？

async setup () {
    const data = ref(null)
    try {
        const res = await fetch('api')
        data.value = res.json()
    }
    catch (e) {
        console.error(e)
    }
    return {
        data
    }
}

我试过了

1. 我检查了 fetch，它返回了正确的响应
2. 我试过<Suspense>标签，但仍然是同样的问题

如何app.config.globalProperties 访问<script setup lang="ts">？

我已经寻找了几种方法：就像这篇 SO post 一样，并尝试组合以下元素：

\\ main.ts

import mitt from 'mitt'
const emitter = mitt()

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    emitter: typeof mitt
  }
}

app.config.globalProperties.emitter = emitter

尝试过在composition-api中使用包装..也不走运

\\ bus.ts

import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const bus = app.appContext.config.globalProperties.emitter // app is undefined

export const useBus = () => ({ bus })

代码笔：https ://codepen.io/codingkiwi_/pen/XWMBRpW

假设你有一堂课：

class MyClass {
  constructor(){
    this.entries = ["a"];

    //=== example change triggered from INSIDE the class ===
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

在组件中，您可以获得该类的一个实例：

const { reactive } = Vue;

const App = {
  setup() {
    const myobject = reactive(new MyClass());

    //=== example change triggered from OUTSIDE the class ===
    setTimeout(() => {
      myobject.entries.push("b");
    }, 500);
    
    return {
      myobject
    };
  }
}

DOM 中的 myobject.entries 数组将显示条目"a"和"b"，但不显示"c"

考虑以下使用 Vue 3 中的组合 API 的简单示例。我试图test在我的组件的函数中拥有可用的实例。

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'Test',
  setup(){
    let test = ref()
    
    onMounted(() => {
      doSomething()
    })

    return{
      test,
      doSomething
    }
  }
})

function doSomething(){
  console.log(test) //<-- undefined
  console.log(this.test) //<-- undefined
}
</script>

我如何进入test内部doSomething()？我的理解是，返回的任何内容都setup()应该在整个组件中可用，就像data()选项 API 中的属性一样。

我正在尝试使用 Vue3 组合 API 访问子组件中的引用，但我不确定如何执行此操作。我想向其中添加一个滚动事件，mainContentRef以便我可以执行获取请求以获取父组件中的更多数据，但我似乎无法访问父组件中的引用以向其添加事件侦听器

这是我的代码（由于本示例不需要某些部分而被删除）：

<!-- MAIN COMPONENT -->
<template>
    <PageWrap>
        <template v-slot:content>
            <MainContent>
                <template v-slot:content />
            </MainContent>
        </template>
    </PageWrap>
</template>

<script setup>

//access mainContentRef here because this is where the fetch request will be

</script>


<!-- MAIN CONTENT COMPONENT -->
<template>
    <div id="main-content" ref='mainContentRef'>
        <slot name='content'></slot>
    </div>
</template>

<script setup>

    import { defineProps, ref } from 'vue';

    const mainContentRef = ref(0);

</script>

当 prop 更新时如何调用函数？

父容器：

<div>     
  <Maintable :type="typeRef" :country="countryRef" />
</div>

子容器：

    export default{

    props: ['type'],
    
    setup(props)
    {   
        watch(props.type, () => {
            console.log('hello')
        })
    }

此代码收到错误：无效的监视源...我如何侦听道具的更新？

希望有人可以帮助我！:-)

我正在尝试使用 TypeScript 学习 Vue 3 Composition API，特别是如何使用严格类型化的有效负载发出事件。

我在下面有一个例子，但我不确定这是否是正确的方法。所以我的问题是是否还有其他方法可以发出具有严格类型负载的事件？

例子

我使用了这个包： https: //www.npmjs.com/package/vue-typed-emit并使其与下面的示例一起使用，其中我将布尔值从子组件传递到父组件：

子组件：

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { CompositionAPIEmit } from 'vue-typed-emit'

interface ShowNavValue {
  showNavValue: boolean
}
interface ShowNavValueEmit {
  emit: CompositionAPIEmit<ShowNavValue>
}

export default defineComponent({
  name: 'Child',
  emits: ['showNavValue'],

  setup(_: boolean, { emit }: ShowNavValueEmit) {
    let showNav = ref<boolean>(false)

    watch(showNav, (val: boolean) => {
        emit('showNavValue', val)
    })

    return {
      showNav
    }
  }
})
</script>

父组件

<template>
  <div id="app">
    <Child …

我正在将应用程序从 vue 2 升级到 vue 3，但在可组合项方面遇到了一些问题。我想在可组合项中使用道具，但它似乎不起作用。代码示例是从工作组件中提取的，当我将其留在组件中时，它可以正常工作。

我认为defineProps可组合项不支持，但我不清楚如何处理它。当我传递src参数时，它会失去反应性。

// loadImage.js
import { defineProps, onMounted, ref, watch } from 'vue'

// by convention, composable function names start with "use"
export function useLoadImage() {
  let loadingImage = ref(true)
  let showImage = ref(false)
  const props = defineProps({
    src: String,
  })
  const delayShowImage = () => {
    setTimeout(() => {
      showImage.value = true
    }, 100)
  }
  const loadImage = (src) => {
    let img = new Image()
    img.onload = (e) => …