vue3.0初体验

Vue 3.0 项目初始化

第一步，安装 vue-cli:

npm install -g @vue/clivue

第二步，初始化 vue 项目：

vue create vue-next-testweb

升级 Vue 3.0 项目

目前建立 Vue 3.0 项目须要经过插件升级的方式来实现，
vue-cli 尚未直接支持，咱们进入项目目录，并输入如下指令：vuex

cd vue-next-test
vue add vue-nextvue-cli

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开头。npm

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 状态：api

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      return {
        count,
        add
      }
    }
  }
</script>

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

计算属性和监听器

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref, computed, watch } from 'vue'
  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      return {
        count,
        doubleCount,
        add
      }
    }
  }
</script>

获取路由

<script>
  import { getCurrentInstance } from 'vue'

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

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
      }
  }
});
// 调用
<template>
  <div class="test">
    <h1>a: {{a}}</h1>
	<button @click="update">update vuex</button>
  </div>
</template>
<script>
  import { getCurrentInstance } from 'vue'
  export default {
	    setup () {
			const { ctx } = getCurrentInstance()
			const a = computed(() => ctx.$store.state.test.a)
			const update = () => {
				ctx.$store.commit('setTest', count)
			}
	      return {
			count,
			add,
			newCount,
			a,
			update
	      }
	}
  }
</script>

模块化

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
	<button @click="addFn">add</button>
	<button @click="removeFn">remove</button>
  </div>
</template>
<script>
  import { ref, onBeforeMount } from 'vue'
  export default {
    setup () {
		const count = ref(0)
		const add = addFn(count)
		const remove = removeFn(count)
	      return {
			...add,
			...remove,
			count
	      }
		}
	}
	function addFn(count) {
		const addFn = () => {
			count.value ++
		}
		return {
			addFn
		}
	}
	function removeFn(count) {
		const removeFn = () => {
			count.value --
		}
		return {
			removeFn
		}
	}
</script>