我们在使用vue3之前，先来看看vue2中mounted，computed，watch等都是怎么用的，钩子函数、计算属性computed和监控器watch，是我们在vue2中必不可少的必学方法，我们来对比学习看在vue3中如何使用，会加深我们的印象。请看下面的代码：

<script>   export default { 		data: {     	return {       	name: '',         first: '张'，         last: '三'       }     }     mounted () {       // mounted 元素挂载结束，可以获取dom 元素      },     computed: {       // 计算属性computed,计算的是Name依赖的值,它不用在data中定义就可以使用。       Name:function(){           return this.first+this.last;       }     },     watch:{       // 监控属性watch,需要在data中定义。       name:function(val,oldval){           console.log(val,oldval);       }     },   } </script>

看完上面的代码，我们再一一学习vue3中都是如何为使用的，大家就会觉得其实学vue3也不难

一、onMounted

在mounted前面加on用驼峰命名就是我们vue3中的写法，然后如何使用呢，我们看代码：

// 先导入onMounted模块 import { onMounted, defineComponent } from 'vue'; export default defineComponent({     setup () {         onMounted(() => {             console.log('元素挂载结束，可以获取dom 元素 ')         })     } })

二、computed 计算机属性

import { computed,defineComponent } from 'vue'; export default defineComponent({     setup () {       const num = 1       const plusOne = computed(() => count + 1)       return {         plusOne       }     } }) 、computed 计算机属性

三、watch 监听器

import { ref,reactive, watch } from 'vue'; export default defineComponent({     setup () {       // 监听一个复杂数据类型 reactive       const state = reactive({ count: 0 })       watch(() => state.count, (count, prevCount) => {           console.log(count, prevCount)        })        // 直接监听一个简单数据类型 ref       const count = ref(0)       watch(count, (count, prevCount) => {           console.log(count, prevCount)        })     } }）

从上面的代码我们可以看到vue3跟vue2对比，变化不是很大，只是对方法进行了重新的封装，用法稍微有所变化而已。至于大家对ref和reactive不了解的可以看我上篇的分享，也很详细