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 的用法 具体可以去官网查看,

好几年没管理这个账号了,今天不知道为什么就写了点儿。
好了,只是简单的记一下,不做深入解析,觉得有用可借鉴,觉得没有用不要喷,我从不看评论。哈哈哈 就这么豪横。

     

posted @ 2022-06-14 17:18  来客小镇  阅读(2144)  评论(0编辑  收藏  举报