Vue3.0--Vue Composition API使用体验

Souleigh ✨ 等级 976 0 0
标签: apihttps前端

本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写,并介绍一下2.x和3.x之间写法的不同之处。 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的项目,然后进入项目的根目录,执行:

vue add vue-next

然后就会自动安装vue-cli-plugin-vue-next[5]插件,完毕之后,myapp项目就会变成一个基于Vue3.0Beta版本的项目框架。 根实例初始化: 在2.x中通过new Vue()的方法来初始化:

import App from './App.vue'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在3.x中Vue不再是一个构造函数,通过createApp方法初始化:

import App from './App.vue'
createApp(App).use(store).mount('#app')

ref或者reactive代替data中的变量: 在2.x中通过组件data的方法来定义一些当前组件的数据:

...
data() {
  return {
    name: 'test',
    list: [],
  }
},
...

在3.x中通过ref或者reactive创建响应式对象:

import {ref,reactive} from 'vue'
...
setup(){
  const name = ref('test')
  const state = reactive({
    list: []
  })
  return {
      name,
      state
  }
}
...

ref将给定的值创建一个响应式的数据对象并赋值初始值(int或者string),reactive可以直接定义复杂响应式对象。 methods中定义的方法也可以写在setup()中: 在2.x中methods来定义一些当前组件内部方法:

...
methods: {
  fetchData() {

  },
}
...

在3.x中直接在setup方法中定义并return:

...
setup(){
  const fetchData = ()=>{
      console.log('fetchData')
  }

  return {
      fetchData
  }
}
...

无法使用EventBus: 在2.x中通过EventBus的方法来实现组件通信:

var EventBus = new Vue()
Vue.prototype.$EventBus = EventBus
...
this.$EventBus.$on()  this.$EventBus.$emit()

在3.x中移除了$on, $off等方法(参考rfc[6]),而是推荐使用mitt[7]方案来代替:

import mitt from 'mitt'
const emitter = mitt()
// listen to an event
emitter.on('foo', e => console.log('foo', e) )
// fire an event
emitter.emit('foo', { a: 'b' })

由于3.x中不再支持prototype的方式给Vue绑定静态方法,可以通过app.config.globalProperties.mitt = () => {}方案。 setup()中使用props和this: 在2.x中,组件的方法中可以通过this获取到当前组件的实例,并执行data变量的修改,方法的调用,组件的通信等等,但是在3.x中,setup()在beforeCreate和created时机就已调用,无法使用和2.x一样的this,但是可以通过接收setup(props,ctx)的方法,获取到当前组件的实例和props:

export default {
  props: {
    name: String,
  },
  setup(props,ctx) {
    console.log(props.name)
    ctx.emit('event')
  },
}

注意ctx和2.x中this并不完全一样,而是选择性地暴露了一些property,主要有[attrs,emit,slots]。 watch来监听对象改变 2.x中,可以采用watch来监听一个对象属性是否有改动:

...
data(){
  return {
    name: 'a'  
  }
},
watch: {
  name(val) {
    console.log(val)
  }
}
...

3.x中,在setup()中,可以使用watch来监听:

...
import {watch} from 'vue'
setup(){
  let state = reactive({
    name: 'a'
  })
  watch(
    () => state.name,
    (val, oldVal) => {
      console.log(val)
    }
  )
  state.name = 'b'
  return {
      state
  }
}
...

在3.x中,如果watch的是一个数组array对象,那么如果调用array.push()方法添加一条数据,并不会触发watch方法,必须重新给array赋值:

let state = reactive({
    list: []
 })
 watch(
    () => state.list,
    (val, oldVal) => {
      console.log(val)
    }
  )

  state.list.push(1) // 不会触发watch

  state.list = [1] // 会触发watch

此问题不知是否是Vue3.x特意加上的,有待正式版出来后在验证。 computed计算属性: 2.x中:

...
computed: {
    storeData () {
      return this.$store.state.storeData
    },
},
...

3.x中:

...
import {computed} from 'vue'
setup(){
  const storeData = computed(() => store.state.storeData)

  return {
      storeData
  }
}
...

参考资料

[1] 点击体验 [2] Vue.js2.6版本todoList [3] Vue.js3.0版本todoList [4] Vue Composition API [5] vue-cli-plugin-vue-next [6] rfc [7] mitt

收藏
评论区

相关推荐

Vue3.0--Vue Composition API使用体验
本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写,并介绍一下2.x和3.x之间写法的不同之处。 Vue3.x适配大部分Vue2.x的组件配置,也就是说以前我们在Vue2.x针对组件的一些配置项,例如: export default { name: 'test', components: {}, props: {},
Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?
开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要推出Composition Api,解决了什么问题? 通常使用Vue2开发
笔趣阁小说api
笔趣阁api小说api,提供小说相关api接口,目前支持笔趣阁(https://m.bqkan.com/)。ip地址:http://49.234.123.245:8082 笔趣阁(https://m.bqkan.com/) 1. 首页 ip/getHome 2. 小说分类 ip/
Vue3 + Vuex4 构建点餐页面
前言 前进!前进!不择手段地前进!!距离Vue3.0 beta 发布已经过了半个多月了。本来这个东西上个月就应该写了,由于公司上个月赶项目一直没时间。趁着劳动节把这个东西写了一下,也顺便把一些坑过了一下。 介绍页面比较简单,算是把 Composition API 过了一下了 基于Vue3.0 beta 这种页面也比较老套了 涉及了
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
HTTP API网关选择之一Kong介绍
转自 [张开涛的博客](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%2FLIq2CiXJQmmjBC0yvYLY5A) Kong是Mashape开源的高性能高可用API网关和API服务管理层。它基于OpenResty,进行API管理,并提供了插件
API
API ===  Inherits from(继承) =================== 整个类的集成链. 一个类从它的超类继承, 所以要查找的功能信息可能在它的超类里面. 例如,从UIbutton类中找不到 addTarget:action:forControlEvents:方法, 因为那个方法在UIControl 类中. 从UIbutton中也
API 3
![](https://user-images.githubusercontent.com/5669954/55214447-b8dee000-5231-11e9-953a-3a171d96c75a.png) 1. start Orchestra, WebSocket server for KOI App and WebShop just as you
API与API管理
什么是API ====== API全称为应用程序编程接口,通俗来讲就是不需要访问程序的源代码,也不需要理解程序实现的方式,只需要通过访问相应接口的URL并填写需要获得的数据的参数名,来获取需要的参数信息。 一个接口可以是一个简单的应用程序,例如天气预报、快递查询、手机归属地查询等等,这些都可以是接口,并且可以直接填写参数取值。 ![](https://os
API网关正在经历身份危机
_译者:蚊子squirrel_ _https://www.jianshu.com/p/9fab0982c6bb_ 翻译一篇API网关的文章,介绍了其三种角色:API管理、集群ingress网关、API网关模式,最后还讲了与service mesh的关系,通过此文可以更全面的理解API网关的作用。 > 原文:https://medium.com/solo
10个前端8个用Vue的,怎么才能在面试中出彩?
现在但凡出去面试,面试官几乎必问 Vue3.0 。不仅会问一些核心特性,还会问原理层面的问题。 比如: **▶框架层面问题:**Vue3.0 新特性 Composition API 与 React.js 中 Hooks 的异同点? **▶源码、原理层面问题:** Vue3.0 编译做了哪些优化?Vue3.0是如何变得更快的?
RESTClient 用法
[**Wisdom RESTClient**](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fwisdom-projects%2Frest-client) 一款自动化测试REST API的工具,它可以自动化测试RESTful API并生成精美的测试报告,同时基于测
Taro 支持使用 Vue3 开发小程序
![](https://oscimg.oschina.net/oscnet/c2082f6e-88a3-4968-bf7f-3086ca8dc4ca.jpg) 前言— --- 9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,"One Piece" 的代号也昭示了其开拓伟大航路的野心。 Vue3 的新特性主要有 C