猫说

vue3版本初尝

2020/04/19 vue

vue3版本beta版出来了，体验一下。

1、创建项目

vue3api说明文档：https://vue-composition-api-rfc.netlify.app/

创建vue项目

$ vue create vue3-test

创建完毕之后升级到3

$ vue add vue-next

这个时候查看package.json就会看到下面内容

  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^3.0.0-beta.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "vue-cli-plugin-vue-next": "~0.1.2"
  },

2、生命周期函数

生命周期函数前后对比

beforeCreate ->使用 setup()
created ->使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

3、setup

vue3定义了setup方法，接受两个参数props, context

props：定义当前组件允许外界传递过来的参数

context: 上下文，因为setup里面拿不到this，vue3认为一些事件里面用this比使用js还魔幻。

<template>
  <div class="hello">
    <div>我是，我有元</div>

    <input type="button" value="赚钱" @click="money">
  </div>
</template>

import { reactive, computed } from 'vue'
export default {
  setup(props, context) {
    // reactive 相当于2.x里面的data
    const state = reactive({name: 'catsaid', money: 1});
    
    function money(){
      state.money ++ ;
    }

    return {state, money}
  }
};

vue3生命周期注册方法只能在setup钩子调用期间使用

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('component is mounted!')
    })
  }
}

Search

    Table of Contents