vue3.0初体验

Vue 3.0 项目初始化

第一步，安装 vue-cli:

npm install -g @vue/cli

第二步，初始化 vue 项目：

vue create vue-next-test

升级 Vue 3.0 项目

目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，
vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令：

cd vue-next-test
vue add vue-next

vue2.0 vs 3.0

1. 默认进行懒观察(按需监听)
   在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效
2. 更精准的变更通知。
   举例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行
3. 3.0 新加入了 TypeScript 以及 PWA 的支持
   4 .按需引入
   Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。

生命周期

vue3.0中取消了 beforeCreate 和 created 两个周期，因为setup会在这个这个周期前执行，因此你可以在setup中进行你需要的处理。其他的生命周期全部以on开头。

import {
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onUnmounted,
  onUpdated
} from '@vue/composition-api'
export default {
  setup(){
    onBeforeMount(() =>{
      console.log('onBeforeMount');
    })
    onMounted(() =>{
      console.log('onMounted');
    })
    onBeforeUnmount(() =>{
      console.log('onBeforeUnmount');
    })
    onBeforeUpdate(() =>{
      console.log('onBeforeUpdate');
    })
    onDeactivated(() =>{
      console.log('onDeactivated');
    })
    onUnmounted(() =>{
      console.log('onUnmounted');
    })
    onUpdated(() =>{
      console.log('onUpdated');
    })
  }
}

状态和事件绑定

Vue 3.0 中定义状态的方法改为类似 React Hooks 的方法
Vue 3.0 中初始化状态通过 setup 方法，
定义状态需要调用 ref 方法。接下来我们定义一个事件，用来更新 count 状态：

count 值的时候不能直接使用 count++，而应使用 count.value++

计算属性和监听器

获取路由

vuex

store/ index.js
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
      test: {
          a: 1
      }
  },
  mutations: {
      setTest(state, val) {
          console.log(val);
          state.test.a = val
      }
  }
});
// 调用

模块化