我们在使用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不了解的可以看我上篇的分享，也很详细，

四时宝库

程序员的知识宝库

vue3中对computed，watch等方法的详解

一、onMounted