vue3.0学习记录(2)

vue3 与 vue2区别

写法上已经有很大的区别了，如：
vue2：

<template>
  <div>
    <h1>{{count}}</h1>
    <h1>{{twocount}}</h1>
    <button @click="test">点赞+1</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  data(){
  	return{
       count:0,
       twocount:0
     }
   },
  methods:{
     test(){
       this.count++;
       this.twocount = this.count*2;
     }
   }
});
</script>

而vue3：

<template>
  <div>
    <h1>{{count}}</h1>
    <h1>{{twocount}}</h1>
    <button @click="test">点赞+1</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,computed } from 'vue';

export default defineComponent({
  name: 'App',
  setup(){
    const count = ref(0)
    const twocount = computed(() => {
      return count.value * 2
    })
    const test = () =>{
      count.value++
    }
    return{
      count,
      twocount,
      test
    }
  }
});
</script>

vue3 与 vue2生命周期方法命名

vue2 -> vue3
beforeCreate -> use setup()

created -> use setup()

// 调用钩子函数是需要先引入
// import {onMounted} from 'vue'

beforeMount -> onBeforeMount

mounted -> onMounted
onUpdated(() => {
	console.log('xxxx')
})

beforeUpdate -> onBeforeUpdate

updated -> onUpdated		// 数据更新时候调用

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

activated -> onActivated

deactivated -> onDeactivated

errorCaptured -> onErrorCaptured

//新增调试钩子函数
onRenderTracked

onRenderTriggered
onRenderTriggered((event) => {
	console.log(event)
})