Vue 3 Composition API Preview All In One

Vue 3 组合 API 预览版 / early adopter version

setup

调用时机

创建组件实例，然后初始化 props ，紧接着就调用setup 函数;

从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用;

~~https://composition-api.vuejs.org/zh/api.html~~

https://cn.vuejs.org/guide/extras/composition-api-faq.html

`ref` vs `reactive`


<!-- <script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script> -->

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <hr>

  <select v-model="id" @change="handleChangeId" >
    <option v-for="item in items"
      :key="item.id"
      :value="item.id">
      {{ item.name }} ❓ {{ item.price }}
    </option>
  </select>

  <select v-model="obj" @change="handleChange" >
    <option v-for="item in items"
      :key="item.id"
      :value="item">
      {{ item.name }} ❓ {{ item.price }}
    </option>
  </select>
  <p>This is selected Product list name = <mark>{{ form.name }}</mark></p>
  <p>This is selected Product list price = <mark>{{ form.price }}</mark></p>
</div>

<script>
  // import { h, toRefs, toRef, ref, reactive, } from 'vue'
  // const { h, toRefs, toRef, createApp, ref, reactive, }  = Vue
  const { createApp, ref, reactive } = Vue

  createApp({
    // `setup` is a special hook dedicated for the Composition API.
    setup() {
      const message = ref('Hello Vue3!')
      const name = ref('?');
      const price = ref(0);
      const id = ref(1);
      const obj = ref({
        id: 1
      });
      // ref
      // const form = ref({
      //   name,
      //   price
      // })
      // ❌
      // There is another way to declare reactive state, with the reactive() API.
      // Unlike a ref which wraps the inner value in a special object, reactive() makes an object itself reactive:
      const form = reactive({
        name: '',
        price: 0,
      })
      const items = [
        { id: 1, name: 'apple' , price: 100 },
        { id: 2, name: 'banana' , price: 80 },
      ];
      function handleChangeId(e) {
        console.log(`e`, e)
        console.log(`form`, form)
        console.log(`id`, id)
        // ✅
        const item = items.find(item => id.value === item.id);
        form.name = item.name
        form.price = item.price;
      }
      function handleChange(e) {
        console.log(`e`, e)
        console.log(`form`, form)
        console.log(`obj`, obj)
        // ✅
        form.name = obj.value.name
        form.price = obj.value.price;
        // console.log(`form.value.name =`, form.value.name)
        // console.log(`form.value.price =`, form.value.price)
        // ✅
        // const item = items.find(item => obj.value.id === item.id);
        // form.name = item.name
        // form.price = item.price;
      }
      // function handleChange(e) {
      //   console.log(`e`, e)
      //   console.log(`form`, form)
      //   console.log(`obj`, obj)
      //   console.log(`id`, id)
      //   // ✅
      //   // const item = items.find(item => obj.value.id === item.id);
      //   const item = items.find(item => id.value === item.id);
      //   form.name = item.name
      //   form.price = item.price;
      //   // 😂
      //   // form.name = e.target.innerText;
      //   // form.price = e.target.innerText;
      //   // ❓
      //   // console.log(`form.name =`, form.name)
      //   // console.log(`form.price =`, form.price)
      // }
      // function handleChange(e) {
      //   // console.log(`e`, e)
      //   console.log(`form`, form)
      //   // ✅ value
      //   console.log(`form.value.name =`, form.value.name)
      //   console.log(`form.value.price =`, form.value.price)
      //   // ✅ _rawValue
      //   console.log(`form._rawValue.name =`, form._rawValue.name)
      //   console.log(`form._rawValue.price =`, form._rawValue.price)
      //   // ❌
      //   // console.log(`form.name =`, form.name)
      //   // console.log(`form.price =`, form.price)
      // }
      // expose the ref to the template
      return {
        message,
        obj,
        id,
        form,
        items,
        handleChange,
        handleChangeId,
      }
      // return () => h('div', [name.value, price.value, form.name, form.price])
    },
  }).mount('#app')
</script>

https://codepen.io/xgqfrms/pen/KKbzLGM?editors=1111

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive

https://stackoverflow.com/questions/77012612/how-to-get-other-json-value-using-composition-api-v-model-select-box

https://vuejs.org/guide/quick-start.html

https://github.com/xgqfrms/Vue-3.x/blob/master/v3-app/src/components/ChildTest.vue

https://github.com/xgqfrms/Vue-3.x/blob/master/composition-api/setup.vue

tempalte

如果 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文


<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // export 给模板
      return {
        count,
        object,
      }
    },
  }
</script>

注意 setup 返回的 ref 在模板中会自动解开，不需要写 .value;

function / jsx

setup 也可以返回一个函数，函数中也能使用当前 setup 函数作用域中的响应式数据

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    return () => h('div', [count.value, object.foo])
  },
}