vue3.0 上手體驗

npm install -g @vue/cli

npm update -g @vue/cli

vue -V
@vue/cli 4.4.1

vue create vue3-demo

Vue CLI v4.4.1
? Please pick a preset:
 常用設定 (router, vuex, sass, babel, eslint)
 sass (router, vuex, sass, babel, eslint)
 test (less, babel, eslint)
 default (babel, eslint)
❯ Manually select features

Vue CLI v4.4.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

cd vue3-demo
vue add vue-next

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

// Vue2 建立範例

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
})

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
 {
 path: '/',
 name: 'Home',
 component: Home
 },
 {
 path: '/about',
 name: 'About',
 // route level code-splitting
 // this generates a separate chunk (about.[hash].js) for this route
 // which is lazy-loaded when the route is visited.
 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 }
]

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes
})

export default router

// Vue2
export default {
 // ....
 data() {
 return {
 state: {
 count: 0
 }
 };
 },
}

// Vue3
import { ref } from 'vue'
export default {
 setup () {
 const count = ref(0) // 宣告 count，初始值為 0
 const str = ref('hello') // 宣告 str，初始值為 'hello'
 return {
 count,
 str
 }
 }
}

<template>
 <div class="home">
 <p>count: {{count}}</p>
 <p>doubleCount: {{doubleCount}}</p>
 <button @click="add">增加</button>
 </div>
</template>

<script>
import { ref, watch, computed } from 'vue'
export default {
 setup () {
 // 宣告 count 變數，初始值為 0
 const count = ref(0)

 // 定義 add 方法
 const add = () => {
 count.value++
 }

 // 定義 watch，需要手動引入 watch 方法
 watch(
 () => count.value,
 (val, oldVal) => { console.log(`new count: ${val}，old count: ${oldVal}`) }
 )

 // 定義computed，同樣需要手動引入 computed 方法
 const doubleCount = computed(() => count.value * 2)

 return {
 count,
 add,
 doubleCount
 }
 }
}
</script>

<template>
 <div class="home">
 <p>str: {{state.str}}</p>
 <p>count: {{state.count}}</p>
 <button @click="add">增加</button>
 </div>
</template>

<script>
import { reactive } from 'vue'
export default {
 setup () {
 // 引入 reactive，同時定義多個變數
 const state = reactive({
 count: 0,
 str: 'hello'
 })

 // 現在存取變數，不能使用 .value 方式存取了
 const add = () => {
 // state.count.value++ // 錯誤
 state.count++
 }

 return {
 state,
 add
 }
 }
}
</script>

const obj = reactive({ count: 0 })

// obj 此時是一個響應式的物件
// 存取或修改，直接基於 obj.count

<template>
 <div>{{ count }}</div>
</template>

<script>
 export default {
 setup() {
 return {
 count: ref(0), // 這裡返回，在模板中無需 .value 存取值
 }
 },
 }
</script>

<script>
import { getCurrentInstance } from 'vue'
export default {
 setup () {
 const { ctx } = getCurrentInstance()
 console.log(ctx.$router.currentRoute.value)
 }
}
</script>

import Vuex from 'vuex'

export default Vuex.createStore({
 state: {
 },
 mutations: {
 },
 actions: {
 },
 modules: {
 }
})

// Vue2 中建立 store 範例
export default new Vuex.Store({
 // ... 
})

import Vuex from 'vuex'

export default Vuex.createStore({
 state: {
 count: 0
 },
 mutations: {
 ADD (state) {
 state.count++
 }
 },
 actions: {
 add ({ commit }) {
 commit('ADD')
 }
 },
 modules: {
 }
})

<template>
 <div class="home">
 <p>{{count}}</p>
 <button @click="add">增加</button>
 </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
 setup () {
 const store = useStore()
 const count = computed(() => store.state.count)

 const add = () => {
 store.dispatch('add')
 }

 return {
 count,
 add
 }
 }
}
</script>

import {getCurrentInstance} from 'vue'

// ...
const store = getCurrentInstance().ctx.$store