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... 来源：掘金