一些关于Vue3的更改和调整

Vue3中的变化

距离 Vue3.0 Bate 版 正式发布已经1个月了。

不过不需要担心学不动的问题，因为现在 vue3 是完全兼容 vue2 的，你可以在 Vue3 中继续使用 Vue2 ,甚至可以两者一起使用。还有很重要的一点，Vue2 还会再更新一个版本，让大家能完美过渡到 Vue3。

如果有兴趣的可以去哔哩哔哩搜一下尤大那天的直播，下面我总结一下这几天我的理解和遇到的问题。有不对的地方和新的差异可以在下面评论交流，谢谢。

Composition API

vue3 对用户来说最大的改变应该就是 Composition API 。

文档地址 (昨天更新了中文文档)

在 Vue2 中我们的 OptionAPI 的写法：

data () {
    return {
      ...
    }
  },
  methods: {
 	...
  },
  mounted () {
   ...
  },
   ...
   ...

这种写法的好处就是把程序的功能类型整合到了一起，你是什么类型就去哪个队伍中。但是随着 Vue 项目越来越大，维护起来就也越发麻烦，我们修改一个方法，需要在 data , methods , computed , watch 以及各个生命周期中反复跳跃，然后就出现了这种情况——明明只换了一块砖，我房子怎么塌了。

因此，Vue3 中进行了修改，大概就是下面这个样子。

setup() {
 	...   
    return { ... };
}

这…56个民族56朵花，56个兄弟姐妹是一家？是的，data , methods , computed ... 等等，我不管你是谁，是用来干嘛的，全给你写一起。啧啧啧，听起来就很粗暴的样子，那实际效果的话，直接上图吧。

相同的颜色块代表同一个功能，这样可以看到，在更新之后，一块区域就是一个功能，只要开发者不是一个喜欢挑战极限的多人运动员的话，维护起来真的不要太舒服。

下面介绍一下其中的调整：

• 生命周期调整

• data调整

  以前的静态数据都存储在 data 中。现在取消了 data 这个功能。你用到哪个变量，就声明哪个，有两种方法：

  1. reactive

     这个用来声明 Object , Array 等引用类型的数据。

     声明完成后，在 return{} 中 toRefs ，再展开，就可以在template 中使用了。

     setup(){
         const data = reactive{
             name:'Jarry',
             age:23
         }
         
         return{ ...toRefs(data)}
     }
     -----------------
      <template>
         <div>我是{{name}},{{age}}岁</div>
      </template>
     

  2. ref

     这个是用来声名基础类型的数据。如 String , Number

     直接声明和引用。

     setup(){
         const name = ref('Jarry')
         const age = ref(23)
         
         return{name,age}
     }
     -----------------
      <template>
         <div>我是{{name}},{{age}}岁</div>
      </template>
     

     这两者的区别大概可以看出来了。要注意的是，它们在 setup() 中修改时分别是这样的：

     reactive:
     const data = reactive{
             name:'Jarry',
             age:23
      }
     data.name = 'Jarry007'
     
     ---------------------
     ref:
     const name = ref('Jarry')
     name.value = Jarry007'
     

  • methods调整

    现在的函数方法在 template 中没有改变，但是从以前写在methods 中改成了都在 setup() 中声明。

    setup(){
        const fn = ()=>{
            console.log('这是一个函数')
        }
        const name = ref('Jarry')
        const printName = ()=>{
            console.log(`我的名字是${name.value}`)
        }
        
        return{fn,name,printName}
    }
    

  • watch调整

    watch 也是直接在 setup() 中使用，呃，万物可被 setup 。

    这次更新，watch 不孤单了，因为他多了一个兄弟—— watchEffect 。两者的具体区别，可以看看文档的详细介绍，最大的区别就是，watchEffect 没有改变前的值。还有，watch 的写法也有点变化。

    监听一个：

    const name = ref('Jarry')
    watch(name,new_=>{
        console.log('name发生了变化',new_)
    })
    

    监听多个：

    const name = ref('Jarry')
    const age = 23
    watch([name,age],([newName,newAge],[oldName,oldAge])=>{
        console.log('新的',newName,newAge)
        console.log('老的',oldName,oldAge)
    })
    

  • computed调整

    同样的，computed 也是在 setup() 中，不过对于不同的数据类型使用起来就不太一样了

    reactive:
    const data = {
        myAge :23,
        myFatherAge:computed(()=>data.myAge + 24)
    }
    
    -------------------------
    ref:
    
    const myAge = ref(23)
    const myFatherAge = computed(()=>myAge.value + 24)
    
    //此时的 myFatherAge 是一个ref对象，所以在template 中需要用value获取它的值。
    
    <div>我父亲的年龄是{{myFatherAge.value}}</div>
    

Vue Router

改变不算太大，以往的 mode: history 变成了 history: routerHistory ,然后在页面使用时不再是 this.$router ,而是先引用再声明：

import {useRoute,useRouter} from 'vue-router'

setup(){
    const route = useRoute()
    const router = uerRouter()
}

其中，好像 useRoute 监听步到 router-link 下的传递的参数。

Vuex

这个也没啥变化，也是先引用再声明使用。

directive

Vue 中的自定义指令。使用方法没有变，但是原来的 bind inserted 等一系列钩子都失效了，换成 updated , mounted 等可以使用 。

Tree-Shaking

这个功能我太喜欢了。顾名思义，摇动树的时候会摇掉一些新陈代谢掉的没用的树叶。其实，我喜欢叫它 Hair-Dragging ，毕竟头发对于我们这个行业的同学们更形象，也更深刻。

这个功能的加入会在我们保存代码时，告诉我们哪些东西是没用的，错误的。比如我定义了一个 name 却没有使用，它就会报错给我们，这样节省了一部分不必要的开支。

其他的话等慢慢总结，慢慢发现。

github: Jarry007

最后

以上就是乐观钢笔最近收集整理的关于一些关于Vue3的更改和调整的全部内容，更多相关一些关于Vue3内容请搜索靠谱客的其他文章。