vue3.0 beta初體驗

檢查vue版本

➜  vue -V
@vue/cli 4.2.3

版本若是是舊的 => 安裝(mac) vue-cli：

➜  sudo npm i - g @vue/cli
...
/* 再次檢查vue版本 */
➜  vue -V

@vue/cli 4.3.1 /* 美滋滋 成了 */

建立項目 -> 根據項目勾選本身須要的
在這裏我選了這幾個比較經常使用的
--> Router, Vuex, CSS Pre-processors, Linter / Formatter

➜  vue create vue-next3.0
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

項目建立完畢後的目錄結構

├── README.md
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
        ├── About.vue
        └── Home.vue

目前vue-cli 尚未直接支持建立 Vue 3.0 項目
須要經過插件升級的方式來實現，升級項目

cd vue-next3.0
vue add vue-next

能夠看到packjson.json

"dependencies": {
    "core-js": "^3.6.4",
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.5",
    "vuex": "^4.0.0-alpha.1"
  },

能夠看到路由 router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

咱們在 /src/views 目錄下建立 intro/index.vue：

const routes = [
...
{
    path: "/intro",
    name: "Intro",
    component: () =>
      import(/* webpackChunkName: "intro" */ "../views/intro/index.vue")
  }
]

跟着例子，試寫了下vue3.0-beta
貼一下 intro/index.vue的code
html代碼

<div class="intro-cntr">
    <h1>test count: {{ count }}</h1>
    <h1>test computed: {{ dobuleCount }}</h1>
    <div @click="add">click me method => add</div>
    <h1>state from vuex {{ a }}</h1>
    <div @click="updated">click me method => updated</div>
  </div>

js代碼

import { ref, computed, watch, getCurrentInstance } from "vue";
export default {
  // Vue 3.0 中初始化狀態經過 setup 方法
  setup() {
    // Vue 3.0 中經過 getCurrentInstance 方法獲取當前組件的實例
    const { ctx } = getCurrentInstance();
    // 而後經過 ctx 屬性得到當前上下文，ctx.$router 是 Vue Router 實例
    console.log(ctx.$router.currentRoute.value, "router");
    // 定義狀態須要調用 ref 方法
    const count = ref(0);
    // 定義一個事件
    const add = () => {
      count.value++;
    };
    // 定義一個監聽器
    // 監聽器 watch 一樣是一個方法，它包含 2 個參數，2 個參數都是 function
    watch(
      () => count.value,
      val => {
        console.log(val, "val");
      }
    );
    // 定義一個計算屬性
    const dobuleCount = computed(() => count.value * 2);
    // 經過計算屬性使用 Vuex 狀態： state.caseNum.a
    const a = computed(() => ctx.$store.state.caseNum.a);
    // 更新 Vuex 狀態仍然使用 commit 方法，這點和 Vuex 3.0 版本一致：
    const updated = () => {
      ctx.$store.commit("setCaseNum", count);
    };
    return { count, add, dobuleCount, a, updated };
  }
};

setCaseNum 是 vuex 在store/index.js 寫了一個簡單的updated

import  Vuex  from  "vuex";

export  default  Vuex.createStore({
  state: {
    caseNum: { a:  1}
  },
  mutations: {
    setCaseNum(state, value) {
      state.caseNum.a = value;
    }
  },
  actions: {},
  modules: {}
});

借鑑demo:
做者：sam9831
連接：https://juejin.im/post/5e99c2... 來源：掘金