【Vuejs】1058- 盘点 Vue3 那些有趣的 API

偏执的太偏执、 2022-09-07 14:42 34阅读 0赞

从开始的Vue到Vue2再到现在的Vue3，前端开发人员一直被迫营业，永远也追不上尤大大写代码的脚步???? 。

今天我们放慢追赶的脚步，一起来看看尤大大在Vue3书写了哪些有趣的API，有些可能说不上哪里有趣，但是看起来就是比之前舒服一些（强迫症在线发作...）。文末有尤大大连夜写的新需求![c1b8350f8d6731f9bbb602fa45a79d3c.png][]

## data选项哪去了？    ##

回想我们在Vue2中创建响应式数据是这样的:

...
    data() {
      return {
        num:1  
      }
    }
    ...

而Vue3会 **setup** 组合式API这个选项了，为此引入了**ref**、**reactive**等响应式API，来看看怎么写的吧:

<template>
      <div>num:{
        {num}}</div>
      <div>refNum:{
        {refNum}}</div>
      <div>state对象:名字:{
        {state.name}},年龄:{
        {state.age}}</div>
    </template>
    
    <script>
    import { defineComponent, reactive, ref } from "vue"
    export default defineComponent({
      setup() {
        const num = 1  //不具备响应式
        const refNum = ref(2)
        const state = reactive({
          name: '小黄',
          age: 18
        })
        return {
          num,
          refNum,
          state
        }
      }
    })
    </script>

你可以看到Vue2的data选项已经被ref、reactive这样的API给替换了。

那么在setup如何对ref、reactive声明的数据修改操作呢？

...
    setup() {
      const count = ref(1)
      console.log(count.value) // => 1
      count.value++
      console.log(count.value) // => 2
    
      const str = ref('小黄')
      console.log(str.value) // => 小黄
    }
    ...

可以看到使用 **ref** 声明的数据可以直接使用 `.value` 这种形式更新数据。但是你也许会疑问为什么在<tempalte></template>视图中为什么不需要 `.value` ，其实是vue内部做了操作。另外，打印一下可以看到ref声明数据:

![3a03fd59b5a8dc62c4eb58f8477019fe.png][]

**reactive** 也是响应式的声明，它是返回对象的响应式副本

...
    setup() {
      const state = reactive({
        name: '小黄',
        age: 18
      })
      console.log(state) // =>
    }
    ...

我们直接打印下state对象，它其实是一个Proxy对象:![0749feddf6cbae44f37ffe22e242b8b8.png][]

...
    setup() {
      console.log(state.name) // => 小黄
      console.log(state.age) // => 18
      //对数据更改
      setTimeout(() => {
        state.age = 20
        console.log(state.age) // => 20
      }, 1000)
    }
    ...

也许你已经注意到了开头举的例子——所有声明的变量都被 `return` 出去了，这看起来有什么好处呢？

*  可以更加清晰得知道，数据与视图之前的关系。setup里对数据操作，视图渲染return出来的数据
 *  更好的保护组件独有的数据，不需要暴露给视图的数据我就不写在return里中

再者，你可能会讨厌为什么通过 `reactive` 声明的数据在视图中使用的时候又要 **xx.属性名** 的方式才行，有办法不写吗？有！尤大大满足开发者的一切便捷编码习惯。`toRefs` 就出来了,在结合ES9的扩展运算符 `...` 就可以满足要求了????????????

<template>
      //这里不再需要state包裹了，属性已经被展开return出来了
      <div>state对象:名字:{
        {name}},年龄:{
        {age}}</div>
    </template>
    
    <script>
    import {defineComponent, reactive, toRefs } from "vue"
    export default defineComponent({
      setup() {
        const state = reactive({
          name: '小黄',
          age: 18
        })
        return {
          ...toRefs(state)
        }
      }
    })
    </script>

## computed计算属性更好看了？ ##

计算属性在使用上好像变得更加令人愉快了，先来看Vue2的写法吧

...
    data(){
      return {
        str:'小黄'
      }
    },
    computed: {
      newStr() { // 对data的数据重新处理
        return this.str + 'hha'
      },
      list() { // 获取Vuex中的数据（经常用到）
        return this.$store.state.btnMenu.btnPowerList
      }
    },
    mounted(){}
    ...

中规中矩没得说，这里computed是当作分段式的组件内部方法

重点看看Vue3中computed如何实现。

...
    setup() {
      const count = ref(3)
      console.log(count.value) // => 3
      const newCount = computed(() => count.value + 1)
      console.log(newCount.value) // => 4
    }
    ...

倘若需要在计算属性中获取Vuex的数据的话，那么可以使用Vuex提供的 `useStore` 模块获取到store的实例

import { computed, defineComponent } from "vue"
    import { useStore } from 'vuex'
    export default defineComponent({
      setup() {
        const store = useStore()
        const list = computed(() => store.state.list)
        return {
          list
        }
      }
    })

## watch与watchEffect监听？ ##

watch监听在Vue使用的场景也是比较多的。老规矩，先来看看Vue2是怎么写的，有对比才有伤害???? ????

...
    watch: {
      bankName(newValue,oldValue) {
        consoel.log(newValue,oldValue)
      }
    },
    methods:{}
    ...

来看看Vue3怎么写吧

<template>
      <div>count:{
        {count}}</div>
    </template>
    
    <script>
    import { defineComponent, ref, watch } from "vue"
    export default defineComponent({
      setup() {
        const count = ref(10)
        setTimeout(() => {
          count.value = 20
        }, 2000)
        watch(count, (newValue, oldValue) => {
          console.log(oldValue)
          console.log(newValue)
        })
        return {
          count
        }
      }
    })
    </script>

然后watch监听到count变化，预期地打印

![f07a9bb40cab7600213d78c97954409a.png][]

当我们想定义一个响应式对象怎么办呢？这里通常选用 `reactive` ,当然ref也可以定义一个对象。

<template>
      <div>person对象:名字:{
        {person.name}},年龄:{
        {person.age}}</div>
    </template>
    
    <script>
    import { defineComponent, reactive, watch } from "vue"
    export default defineComponent({
      setup() {
        const person = reactive({
          name: '前端发现',
          age: 18
        })
        setTimeout(() => {
          person.name = '我是reactive定义的name属性更改后的数据'
        }, 2000)
    
        watch(() => person.name, (newValue, oldValue) => {
          console.log(oldValue)
          console.log(newValue)
        })
        return {
          person
        }
      }
    })
    </script>
    ...

可以看到，这里问采用了函数的形式返回了需要监听的数据.`() => person.name`。来看看案例的效果:

以上都是监听单一的数据，多个属性怎么监听呢？直接上????

<template>
      <div>count:{
        {count}}</div>
      <div>person对象:名字:{
        {person.name}},年龄:{
        {person.age}}</div>
    </template>
    
    <script>
    import { defineComponent, reactive, ref, watch } from "vue"
    export default defineComponent({
      setup() {
        const count = ref(10)
        const person = reactive({
          name: '前端发现',
          age: 18
        })
        setTimeout(() => {
          count.value = 20
          person.name = '我是reactive定义的name属性更改后的数据'
          person.age = 22
        }, 2000)
    
        watch([count, () => person.name, () => person.age], ([newCount, newName, newAge], [oldCount, oldName, oldAge
        ]) => {
          console.log(oldCount, oldName, oldAge)
          console.log(newCount, newName, newAge)
        })
        return {
          count,
          person
        }
      }
    })
    </script>

直接数组的形式监听多个数据

![2dba0b7b71cc07e11658eab1e7a082bf.png][]

除了watch之外，Vue3还诞生出了 `watchEffect` ，看起来像是watch Plus（我暂且这样理解吧），官方是怎么定义这个API的呢？

> 在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。

//当然这里是需要从vue导入模块滴
    import { watchEffect } from "vue"
    ...
    const count = ref(10)
    watchEffect(() => console.log(count.value)) // => 10
    
    setTimeout(() => {
      count.value = 20 立即执行watchEffect方法，调出打印 // => 20
    }, 1000)

先看效果:

可以看到使用 **watchEffect** 并没有之前 **watch** 的更改前数据，`也不需要传入监听的数据源` ，而是直接执行一个函数，可以获取到更新后的数据。

同样的，监听多个的话也是可以的

...
    watchEffect(() => {
      console.log(count.value)
      console.log(person.name)
    })
    ...

> 总结：watch ???? watchEffect

*  **watchEffect** 不需要指定监听的属性，他会自动的收集依赖，只要在回调函数中引用到了响应式的属性，那么当这些属性变动的时候，这个回调都会执行，而 **watch** 只能监听指定的属性而作出变动(v3开始能够同时指定多个)
 *  **watch** 能够获取到新值与旧值（更新前的值），而 **watchEffect** 是拿不到的
 *  **watchEffect** 在组件初始化的时候就会执行一次用以收集依赖，收集到的依赖发生变化时再执行。而 **watch** 则是直接指定依赖项

## 片段是啥？ ##

在 Vue 3 中，组件现在正式支持多根节点组件，即片段！

<template>
      <div>我是其中一个div</div>
      <header>...</header>
      <footer>...</footer>
    </template>

## 组件状态驱动的 CSS 变量真香？ ##

听起来就感觉非常逼格![b8b4456faaf72cc0f5d7bf4de85a707b.png][]，它其实就是将css用到的属性值在组件内定义一个变量去替换。目前这个API目前还在试验性阶段！

<template>
      <div class="myClass">我是SFC style CSS variable injection</div>
    </template>
    
    <script>
    import { reactive, ref, toRefs } from "vue"
    export default {
      setup() {
        const minColor = ref('red')
        const styleJs = reactive({
          color: 'blue',
          fontSize: '20px',
          fontWeight: '700',
          textDecoration: 'underline'
        })
        return { // 这里不能忘记return出去
          minColor,
          ...toRefs(styleJs),
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .myClass {
      text-decoration: v-bind(textDecoration);
      font-weight: v-bind(fontWeight);
      color: v-bind(minColor);
      font-size: v-bind(fontSize);
    }
    </style>

来看看效果:

![342eb4dac54795225800cd3c53d25e40.png][]

可以看到 **myClass** 类名加上我们使用 **v-bind** 绑定的CSS属性值

*值得说明的是*，在return中，我使用了 `...toRefs()` API，不使用的话那么在写绑定styleJs对象的属性值时就需要注意一下

.myClass {
      text-decoration: v-bind('styleJs.textDecoration');
      font-weight: v-bind('styleJs.fontWeight');
      color: v-bind(minColor);
      font-size: v-bind('styleJs.fontSize');
    }

现在看到的样式绑定上的属性名上会有一点点的变化:

![4fe2624ed0b79b074d01a391adab20a3.png][]

有兴趣的朋友可以看看咱们尤大大对 组件状态驱动的 CSS 变量 的提案![60c89c59613d3cd1bbd64092287a3f7b.png][]

![241c9b9468a6903038ea88c92aa7bb3f.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![3ed00da02d60906cc9dd9f72db50f3cb.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[c1b8350f8d6731f9bbb602fa45a79d3c.png]: /images/20220829/7dd68ec336e5497f89a175166023f043.png
[3a03fd59b5a8dc62c4eb58f8477019fe.png]: /images/20220829/0edea545f3af41a18feb88302e8748b1.png
[0749feddf6cbae44f37ffe22e242b8b8.png]: /images/20220829/663b9ee3fbd9485dbe52f52f2db08232.png
[f07a9bb40cab7600213d78c97954409a.png]: /images/20220829/af4feaf4755d4f0f898adc3eccb05ad0.png
[2dba0b7b71cc07e11658eab1e7a082bf.png]: /images/20220829/cdf59a6d1d1446b08314bd3f8c80cdca.png
[b8b4456faaf72cc0f5d7bf4de85a707b.png]: /images/20220829/b08cb1bd80b345f59843d7e4d40f2281.png
[342eb4dac54795225800cd3c53d25e40.png]: /images/20220829/e0a4abd19fb8432f97f2e9a6fa66b695.png
[4fe2624ed0b79b074d01a391adab20a3.png]: /images/20220829/1d02a958ddff497c8e75e694b7349da0.png
[60c89c59613d3cd1bbd64092287a3f7b.png]: /images/20220829/182313d159884043950585dc2edcd6ec.png
[241c9b9468a6903038ea88c92aa7bb3f.gif]: /images/20220829/cfd86d79b36e4edcb638ebd811ecb6e5.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[3ed00da02d60906cc9dd9f72db50f3cb.gif]: /images/20220829/65fd851a68164b49b37a0ad97dc755c4.png