Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://npmjs.com/vue-function-api below:

vue-function-api - npm

Vue Composition API

vue-function-api provides a way to use Vue3's Composition api in Vue2.x.

中文文档

• Installation
• Usage
• TypeScript
• Limitations
• API
• Changelog

npm

npm install vue-function-api --save

yarn

yarn add vue-function-api

CDN

<script src="https://unpkg.com/vue-function-api/dist/vue-function-api.umd.js"></script>

By using the global variable window.vueFunctionApi

You must explicitly install vue-function-api via Vue.use():

import Vue from 'vue';
import VueFunctionApi from 'vue-function-api';
 
Vue.use(VueFunctionApi);

After installing the plugin you can use the Composition API to compose your component.

To let TypeScript properly infer types inside Vue component options, you need to define components with createComponent:

import Vue from 'vue';
 
const Component = createComponent({
});
 
const Component = {
};

Unwrap is not working with Array index.

const state = reactive({
  list: [ref(0)],
});
state.list[0].value === 0; 
 
state.list.push(ref(1);
state.list[1].value === 1; 

const a = {
  count: ref(0),
};
const b = reactive({
  list: [a], 
});
 
b.list[0].count.value === 0; 

const b = reactive({
  list: [
    {
      count: ref(0), 
    },
  ],
});
 
b.list[0].count.value === 0; 

const a = reactive({
  count: ref(0),
});
const b = reactive({
  list: [a],
});
b.list[0].count === 0; 
 
b.list.push(
  reactive({
    count: ref(1),
  })
);
b.list[1].count === 1; 

onTrack and onTrigger are not available in WatchOptions.

✅ Support     ❌ Not Support

✅ String ref && return it from setup():

<template>
  <div ref="root"></div>
</template>
 
<script>
  export default {
    setup() {
      const root = ref(null);
 
      onMounted(() => {
        
        console.log(root.value); 
      });
 
      return {
        root,
      };
    },
  };
</script> 

✅ String ref && return it from setup() && Render Function / JSX:

export default {
  setup() {
    const root = ref(null);
 
    onMounted(() => {
      
      console.log(root.value); 
    });
 
    return {
      root,
    };
  },
  render() {
    
    return () => <div ref="root" />;
  },
};

❌ Function ref:

<template>
  <div :ref="el => root = el"></div>
</template>
 
<script>
  export default {
    setup() {
      const root = ref(null);
 
      return {
        root,
      };
    },
  };
</script> 

❌ Render Function / JSX in setup():

export default {
  setup() {
    const root = ref(null);
 
    return () =>
      h('div', {
        ref: root,
      });
 
    
    return () => <div ref={root} />;
  },
};

If you really want to use template refs in this case, you can access vm.$refs via SetupContext.refs.

⚠️Warning: The SetupContext.refs won't existed in Vue3.0. Vue-function-api provide it as a workaround here.

export default {
  setup(initProps, setupContext) {
    const refs = setupContext.refs;
    onMounted(() => {
      
      console.log(refs.root); 
    });
 
    return () =>
      h('div', {
        ref: 'root',
      });
 
    
    return () => <div ref="root" />;
  },
};

You may also need to augment the SetupContext when wokring with TypeScript:

import Vue from 'vue';
import VueFunctionApi from 'vue-function-api';
 
Vue.use(VueFunctionApi);
 
declare module 'vue-function-api/dist/component/component' {
  interface SetupContext {
    readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
  }
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4