vue2 到 vue3 setup的语法糖

2022-06-14 17:34:22 阅读：239 来源： 互联网

使用惯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 ---> one rrorCaptured

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 的用法   具体可以去官网查看，
     
      好几年没管理这个账号了，今天不知道为什么就写了点儿。
      好了，只是简单的记一下，不做深入解析，觉得有用可借鉴，觉得没有用不要喷，我从不看评论。哈哈哈 就这么豪横。

标签：setup,watch,---,vue2,vue3,data
来源： https://www.cnblogs.com/toorange/p/16375483.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2 到 vue3 setup的语法糖