vue3.0 正式版体验

Vue3 正式版本已经更新，再次入坑。

Vue3新特性

• 首先是向下兼容，Vue3 支持大多数 Vue2 的特性。
• 性能的提升，框架更快，更轻。
• 新推出的Composition API。
• 更好TypeScript支持

安装 vue3

# 全局安装
cnpm i -g create-vite-app
#
create-vite-app vue3-res
cd vue3-res
cnpm i
# 用 vscode 打开

1. vue 实例的创建以及挂载变化

• Vue2 创建实例并挂载 DOM 上

import Vue from "vue"
import App from './App.vue'

const app = new Vue({
	render: (h) => h(App)
})

app.$mount("#app")

• Vue3 创建实例并挂载 DOM 上

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

const app = createApp(App)

app.mount('#app')

2. 生命周期变化

Vue2	vue3
beforeCreate	setup()	setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
created	setup()
beforeMount	onBeforeMount	组件挂载到节点上之前执行的函数。
mounted	onMounted	组件挂载完成后执行的函数。
beforeUpdate	onBeforeUpdate	组件更新之前执行的函数。
updated	onUpdated	组件更新完成之后执行的函数。
beforeDestroy	onBeforeUnmount	组件卸载之前执行的函数。
destroyed	onUnmounted	组件卸载完成后执行的函数
activated	onActivated	被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
deactivated	onDeactivated	比如从 A 组件，切换到 B 组件，A 组件消失时执行。
errorCaptured	onErrorCaptured	当捕获一个来自子孙组件的异常时激活钩子函数。

3. vue 组件/指令/插件注册 变化

• Vue2

	Vue.component('SearchInput', SearchInputComponent)
	Vue.directive('focus', FocusDirective)
	Vue.use(LocalePlugin)

• Vue3

	const app = Vue.createApp({})
	app.component('SearchInput', SearchInputComponent)
	app.directive('focus', FocusDirective)
	app.use(LocalePlugin)

	//或者
	
	Vue.createApp({})
		.component('SearchInput', SearchInputComponent)
		.directive('focus', FocusDirective)
		.use(LocalePlugin)

4. Composition API

由于vue3.0的其他语法跟vue2.x的语法几乎是完全兼容的，所以接下来主要介绍使用composition-api

为什么要使用Composition API?

• 与之前option配置方法写组件的时候相比，当组件越来越多，业务复杂度越来越高，导致后续维护非常的复杂，同时代码可复用性不高

Composition API 主要介绍一下几个函数：

• reactive
• ref
• computed
• watchEffect
• toRefs
• 生命周期的hooks

reactive

将传入的对象生成新的深度响应式对象,其不等于原始对象

const obj = reactive({ 
	count: 0,
	books:['三体','人生','黄金时代']
})

ref

将传入的简单数据值生成新的响应式对象

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

computed

使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // error

watchEffect

在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

watch

// 侦听一个getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

5. setup

• setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点,它会在 beforeCreate 钩子之前被调用
• 一般情况下若 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文中

注意：在setup函数中不存在this，带入参数 props 和 setupContext

在setup函数使用 Composition API：

import { reactive, ref, computed, watchEffect, toRefs, onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  props: ['msg'],
  data(){
    return {
        school:{
            year:2020,
            name:'花园小学'
        }
    }
  },
  setup(props, context) {

    let count = ref(1)
    
    const data = reactive({ 
        numer: 0,
        books:['三体','人生','黄金时代']
    })

    
    function add() {
      count.value++
    }

    //声明周期函数
    onMounted(() => {
      console.log('mounted!')
    })

    onUpdated(() => {
      console.log('updated!')
    })

    onUnmounted(() => {
      console.log('unmounted!')
    })

    const refData = toRefs(data); // 保证后面结构后依然保持响应式
    
    return { ...refData, count, add}
  },
  mounted() {
    console.log('number：',this.numer);
    console.log('count：',this.count);
    console.log('add：',this.add);
    console.log('school：',this.school);
  },
  methods:{
      handleClick(){
          console.log('handleClick');
      }
  }
}

主要参考文献：
vue3.0中文文档