从一个todo-list体验Vue3.0

开始之前

目前Vue3.0处于beta2阶段，官方为体验新特性的小伙伴准备了vue-next-webpack-preview（一个webpack的运行环境）， clone下仓库按README运行即可。

初印象

src/main.js

创建实例由2.x的new改为createApp 。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue

首先，template最外层可以由多个节点组成了。

然后，组件的形式发生了变化，setup是CompositionApi的写法。CompositionApi提供了新的组织组件逻辑的方式，相比mxin在可读性上有了提升。同时也兼容2.x的写法。

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    inc() {
      this.count++;
    }
  }
}

尝试todo-list

效果图.png

需要实现input输入，enter创建列表条目清空input，点击条目删除。

ref和reactive是在从底层响应式处理暴露的方法，ref用于处理基础类型，reactive用于处理对象，两者都会返回有响应能力的Proxy。ref返回的为{value: 原值}结构，不过在template中自动展开value。setup方法返回对象属性可在template中引用。

重组

CompositionApi的写法使得对列表的操作可以更紧凑的抽象出来。而且在由多部分混合时，相比mixin的写法，读者可以清晰地看到视野外声明的变量的来源，不必在mixins数组中查找。
因此在3.0中mixin不建议使用。

let thingsList = () => {
  const list = reactive([]);
  return {
    list,
    push(item) {
      list.push(item);
    },
    remove(index) {
      list.splice(index, 1);
    }
  }
}

export default {
  setup() {
    const txt = ref('');
    let {push, ...others} = thingsList();
    const enter = () => {
      if (txt.value) {
        push(txt.value);
        txt.value = '';
      }
    };

    return {
      txt,
      enter,
      ...others
    }
  }
}