【 vue-next-demo】尝鲜 vue 3.0

前言

vue 3 正式进入 beta 阶段也有一段时间了，网上众说纷纭，所以入手 vue 3.0 ，自己体验一下。

创建 vue3.0 项目

首先把 vue-cli升级到4.3.1以上，然后与往常一样新建 vue 项目

npm update -g @vue/cli

vue create vue-next-demo

项目创建完毕，最后一步也是最关键的一句

vue add vue-next // 升级为vue3

这时候就可以看到 vue3.0了。

TodoList

主要差异是在 script 层，下面是一个大体的结构

<template>
	<div>
	// sth
	</div>
</template>

<script>
// 函数式编程，watch、computed以及生命周期函数等都需要自取
import { ref, reactive,computed, watch, onMounted} from 'vue'
// reactive() 函数接收一个普通对象，返回一个响应式的数据对象。
// ref() 函数创建响应式的数据对象

export default {
// props 与 vue2.0一样
// context 为 执行上下文，相当于 vue2.0的 this
  setup(props, context) {
   const current = ref(0)
   const  list= reactive(
   	{name: '张三'}，
   	{name: '李四'}
   )
   
   // 计算属性
    const noList= computed(() => {
      return [1,2,3]
    })

    // 创建监视，并得到 停止函数
    const stop = watch(
      () => current.value,
      value => {
        // 调用停止函数，清除对应的监视
        if (value === 4) stop()
      }
    )
	
    onMounted(() => {
      console.log('mounted!')
    })

	// 把创建的引用 return 出去
	return {
		noList,
		list
	}
  }
}
</script>

<style>
</style>

体会

相对于 vue2.0， vue-next 给我的感觉更加凝练了，组件拆分合理，代码十分简洁易维护，将 script 层的输入和输出整合起来，大大减低了 ctrl + F 的次数。但是还是不要将太多的功能都给写在一起，不然还是避免不了 意大利面条代码。总的来说，速度感觉不是很明显，毕竟只是一个小 demo，不过 vue2.0 过度 vue3.0 学习成本不会太高，还能学得动😂 ，期待 vue 3.0

源码

github：TodoList 和 幸运抽奖

参考

@su37josephxia：10分钟体验Vue3全家桶(Vue3 + VueRouter4 + Vuex4)
@刘龙彬：尝鲜 vue3.x 新特性 - CompositionAPI