Vue3个人使用笔记

前言

Vue3.0正式版上线已经两年多了，脚手架默认Vue版本为3也已经快一年了。2021年的时候beta版本的Vue3用了差不多一年，年底跳槽后到现在基本就没有用过了，现在公司短时间是不可能升级vue版本的，真的怕以后出去就脱节了，今天就来回忆一下vue3的使用方法，加深记忆。

整体结构

首先最显著的改变就是使用组合式Api代替了原来的选项式Api,这样做的好处就是可以把相关的数据和方法写在一起，避免JS文件过长然后上下拖动文件寻找，而且还可以直接把相关的js代码拆分到单独的文件中，便于代码迁移。但是这种写法也有一些缺点，就是火候掌握不好会导致整个js代码比较凌乱，数据定义和方法定义到处都是，我之前写的代码就有这个问题，用熟悉过后会好一点。

// Vue2
<script>
 export default {
   data(){
     return {}
   },
   methods：{
   
   }
 }
</script>

// Vue3
<script>
import {ref} from 'Vue'
export default {
  setup(props,context) {
     const state1 = ref()
     const method1 = ()=>{
       state1.value = 1
     }
     
     ...
      const state2 = ref()
     const method2 = ()=>{
       state2.value = 1
     }
     
  }
}
</script>

生命周期

Vue3在生命周期上有所调整,合并了一些生命周期到setup中。

beforeCreate    ->    使用 setup()

created             ->    使用 setup()

beforeMount    ->   onBeforeMount

mounted           ->   onMounted

beforeUpdate   ->   onBeforeUpdate

updated            ->   onUpdated

beforeDestroy  ->   onBeforeUnmount

destroyed         ->   onUnmounted

errorCaptured  ->   onErrorCaptured

actived       -> onActived

响应式数据

Vue3中响应式数据定义使用reactive、ref，使用reactive可以定义多个数据，使用ref定义单个数据。

<script>
import { reactive ,ref,toRefs} from 'Vue' 
export default {
   setup(){
      const state = reactive({
         name:'lili'
         age:12
      })
      const msg = ref('我是理理')
      
      // js中调用
      console.log(`我是${state.name},今年${state.age}`)
      
      console.log(msg.value) // ref定义的数据访问要加.value
      
      
     // 定义输数据和方法必须要使用return返回出去才能在template模板中使用
     return {
        state,
        // ...toRefs(state),  // 如果reactive返回的数据使用toRefs修饰 则模板中可以直接访问  name age 不用state.name
        msg
     }
   }
}
</script>
值得注意的是vue3不再要求tempalte模板中必须要有唯一的根目节点了
<template>
  <div> 我是{{state.name}},今年{{state.age}}</div>
  <div>{{msg}}</div>
  <!--模板中访问ref定义的数据集不用加.value -->
</template>

数据监听

Vue3中数据监听可以监听单个源，也可以同时监听多个源。这个监听多个源的方法我觉得是非常好用的，vue2要监听多个源还得用计算属性合并才能实现。

<script>
  export default{
    setup(){
      const state = reactive({name:'lili',age:18})
      
      // 监听单个
      watch(()=>state.name ,(newVal,oldVal) => {
         ....
      })
      
      // 监听多个
      watch( [() => state.name,() => state.age] ,([newName,newAge],[oldName,oldAge])=>{
       ....
      })
    }
  }
</script>

除此之外，Vue3还有一个自动收集数据变化的api：watchEffect,当其中的数据发生变化时会自动执行回调。

setup(){
	let age = ref(0)
	watchEffect(()=>{
		console.log(age.value)  // 当age发生变化会自动执行
		console.log('watchEffect函数执行了~')
	})
}

计算属性

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

const age1 = ref(18)
const age2 = ref(20)
const totalAge = computed(() => age1.value+age2.value)
console.log(totalAge.value) // 18 当age1或age2的值发生变化时，totalAge会相应改变

双向绑定

Vue3中的v-model可以携带参数，可以作为.sync修饰符的替代，相比于2来说方便了不少。

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

setup语法糖

在3.2及之后的版本中，新增了setup语法糖

<script setup>
const state = reactive({
  name:'lili',
  age:18
})

const methd = () => {}
</script>

属性和方法可以在模板中使用，不用再集中return一次，可以减少一些LOC(代码行)

最后

以上就是我个人在使用中有用到的Vue3的相关信息。