vue3 watch不生效_Vue3.0Vue Composition API使用体验

作者：吕小鸣

https://zhuanlan.zhihu.com/p/143884250

本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写，并介绍一下2.x和3.x之间写法的不同之处。

点击体验^[1] Github地址：Vue.js2.6版本todoList^[2]，Vue.js3.0版本todoList^[3]

Vue3.x适配大部分Vue2.x的组件配置，也就是说以前我们在Vue2.x针对组件的一些配置项，例如：

export default {
     
  name: 'test',
  components: {},
  props: {},
  data () {
     
    return {}
  },
  created(){},
  mounted () {},
  watch:{},
  methods: {}
}

在Vue3.x中也是可以适配的，对应的相关生命周期方法也可正常执行，但是Vue3.x的一大核心是引入了Vue Composition API^[4](组合式API),这使得组件的大部分内容都可以通过setup()方法进行配置，同时Vue Composition API在Vue2.x也可以使用，需要通过安装@vue/composition-api来使用：

npm install @vue/composition-api
...
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

下面主要介绍一下采用Vue Composition API来改造采用2.x开发的todoList项目时的新老代码对比。

如何创建一个Vue3.0的项目

首先，安装vue cli的最新版本，一般是vue cli 4，安装成功后，调用：

vue create myapp

创建一个基于Vue2.x的项目，然后进入项目的根目录，执行：