vue3.0组合API

vue3.0组合API
Ref

Ref是这样的一种数据结构:它有个key为Symbol的属性做类型标识,有个属性value用来存储数据。这个数据可以是任意的类型,唯独不能是被嵌套了Ref类型的类型。

Ref类型的数据,是一种响应式的数据。

Ref写法简单,但也有弊端,它只能监听一些如数字、字符串、布尔之类的简单数据。复杂数据需要用到以后讲的 reactive 。(实际上也可以用 Ref 来封装对象,只不过在访问上多一层 value ,稍微麻烦了一些)。

具体 Ref 数据的结构长这样:

vue3.0组合API

要更改它的数据,主要更改和关注它的 value 值就够了。

setup

setup,就是我们最近老是能听到的 Composition API,组合式 API。关于这个 API 的细节,还请参阅官方文档,这里我只期望说一下简单的内容。

setup 选项应该是一个接受 propscontext 的函数。此外,我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

也就是说,setup 中创建并 return 的所有东西,都将被得到外部的解析,无论是过去在 data 中创建的数据也好,还是在 methods 创建的方法也好,都将变成允许被响应式地使用,仿佛 Vue2 中的这些 API 都被融合在一起了一样,而实际上 Vue3 也是为了实现这个目的。

<template>
<div>
  <p>{{count}}</p>
  <button @click="getClick">button</button>
</div>
</template>

<script>
import { ref } from ‘vue‘;

export default {
  name: ‘App‘,
  setup() {
      //创建一个初始值为0得count
    let count = ref(0);
    function getClick() {
      count.value ++;
    }

    return {
        //记得要把内容暴露出去
      count,
      getClick
    };
  }
}
</script>
用组合 API 来实现 Todo List

通过这种组合 API 的方式,允许我们对数据和方法进行组合的包装,就像这样。

<template>
<div>
  <form>
    <input type="text" v-model="newState.item.name">
    <input type="text" v-model="newState.item.age">
    <input type="submit" @click="addItem">
  </form>
  <ul>
    <li v-for="(item, index) in state.items" :key="item.name" @click="removeItem(index)">
    {{item.name}}:{{item.age}}
    </li>
  </ul>
</div>
</template>

<script>
import { reactive } from ‘vue‘
export default {
  name: ‘App‘,
  setup() {
    let {state, removeItem} = originalData();
    let {newState, addItem} = newData(state);
    return {
      state,
      removeItem,
      newState,
      addItem
    };
  }
}
   //封装显示和删除得部分 
function originalData() {
  let state = reactive({
    items: [
      {
        name: ‘张三‘,
        age: ‘18‘
      },
      {
        name: ‘李四‘,
        age: ‘20‘
      },
      {
        name: ‘王五‘,
        age: ‘22‘
      }
    ]
  });
  function removeItem(i) {
    state.items = state.items.filter((currentValue, index) => index != i);
  };
  return {
    state,
    removeItem
  };
}

    //封装添加得部分
function newData(state) {
  let newState = reactive({
    item: {
      name: ‘‘,
      age: ‘‘
    }
  });
  function addItem(e) {
    e.preventDefault();
    state.items.push(Object.assign({}, newState.item));
    newState.item.name = ‘‘;
    newState.item.age = ‘‘;
  };
  return {
    newState,
    addItem
  };
}
</script>

vue3.0组合API

上一篇:Flink之API的使用(3):Source的使用


下一篇:Flink-DateStreamApi-eventTime