vue2 到 vue3 setup的语法糖

        使用惯vue2中的data()函数的方式及定义变量，突然转向vue3写起来就很不适应。对于vue2来说，vue3确实做了很多改变，不论是从定义变量到生命周期函数都有不小变化，但在性能上来说确实是提高了很多。比如说定义响应式的变量，初始化函数都集中在setup中，使代码在更加具备可读性。废话不多说，今天主要是说一说，vue2到vue3的变化。

         一，说vue2中的data()为什么不是一个对象，而是一个函数？

         　　这个问题就要说到js中的作用域了，在js把总体的数据类型分为两个大的类型，值类型和引用类型。

         　　值类型 包括：  1，字符串（String）2，数字（Number）【NAN】3，布尔（Boolean)  4, Null  (Undefined)  5, Symbol (ES6)

         　　引用类型包括：1，Object类型   2，Function函数 3, Array数组

                上面说的Data是一个函数的问题，是因为我们Object类型的值储存在堆中，在栈中的引用地址。在给对象值赋值的时候，原本的对象值也会发生变化。

                data之所以是一个函数，我们把变量写在return中，是因为函数存在着作用域，在储存值的时候都会开一个独立的空间，所以我们在储存变量的时候不会　　　　　　　　　　　　                发生相互影响的问题。

　　　

　　　二，vue2 和 vue3 的变化就要说到生命周期函数：

 

　　　　　beforeCreate()       --->　创建之前　　setup()

　　　　　created()          　   --->   创建完成　　setup()

           　　beforeMount()  　 --->    挂载之前　　onBeforeMount()

        　　   mounted()          　--->　挂载完成　　onMounted()

　　　　　beforeUpdate()  　--->    修改之前　　onBeforeUpdate()

                  updated()         　  --->    修改完成　　onUpdated()

 　　　　   beforeDestroy()    --->    销毁之前　　onBeforeUnmount()

                  destroyed()　　    ---> 　销毁完成       onUnmounted()

                  errorCaptured ---> onErrorCaptured

                  vue3中为了生命周期函数的统一性 在命名上做了更改，将vue2中的beforeCreate() 和 created() 集中在 setup()中。

           三，vue2中的监听写法和vue3中的有所不同

                   vue2中的watch写在data()同一级，   

                watch:{

　　　　　　　type: {

            　　handle(newValue, oldValue){
　　　　　　　　　　　......
　　　　　　　　　},
               immediate: true, // 第一次进入页面就开启监听
　　　　　　　　　deep: true  // 开启深度监听

            }
            // 对单个对象值进行监听
            "obj.startTime": {
                ......
            }
    　　}

       vue3 中的watch 写在setup()函数中

       // 在vue中引入watch
　　　　import { watch } from 'vue';

       //在setup中 直接以watch()的形式出现 写法上和vue2大有不同
       watch(() => props.type, (newValue, oldValue) => {type.value = newValue});

      

　　　四，vue2和vue3中的 computed（计算属性） 

        vue2 中的computed 和watch 一样在data() 同级。

                 data: {
  　　　　　num:  '1'
　　　　　},
　　　　　computed: {
　　　　　　  reversedMessage: function () {
　　　　　　　　return this.num++
　　　　　　  }
　　　　　}

                 vue3中的计算属性

       import { computed } from 'vue';
       
       setup () {
　　　　　　const num = computed(() => num++ );

       }

      vue3 中也添加了很多很有用的东西，比如说 teleport（传送门）这个可以去了解一下
      vue3 setup 可以写在标签上，写法上也有不同 v3配合着typeScript写起来也是别有一番滋味咯！
      vue3中废除了 filters 的用法   具体可以去官网查看，
     
      好几年没管理这个账号了，今天不知道为什么就写了点儿。
      好了，只是简单的记一下，不做深入解析，觉得有用可借鉴，觉得没有用不要喷，我从不看评论。哈哈哈 就这么豪横。