【Vue.js】934- 一文带你掌握Vue3新特性，再也不怕面试官啦

妖狐艹你老母 2023-01-15 08:14 179阅读 0赞

##  ##

## 前言 ##

记录一下笔记，给各位小伙伴们分享一些常用的Vue3新特性及哪些方法发生了变更。

我这里只写一些常用的，更多请看Vue3官网这里

点击上方“前端娱乐圈”，选择“设为星标”

第一时间推送新姿势！

## 组件v-model支持参数 ##

在Vue2.x时，我们要想给子组件传值，还得单独传入。Vue3.x直接以`v-model:xxx`形式传入参数，并且配合修饰符.sync进行数据同步更新。

**App.vue**

<template>
      {
        {title}} 
      <Input v-model:title="title" />
    </template>
    <script>
    import Input from "./components/Input"
    export default {
      name: 'App',
      components: {
        Input
      },
      data() {
        return {
          title: "蛙人",
        }
      },
    }
    </script>

**Input.vue**

<template>
      <div class="Input">
          <input type="text" @input="first" :value="title">
      </div>
    </template>
    <script>
    export default {
     name: 'Input',
      props: {
        title: {
            default: () => "蛙人"
        }
      },
      methods: {
          first(e) {
              this.$emit("update:title", e.target.value)
          },
      },
    }
    </script>

**效果**

![a8b60c028126364f397b57fec6ce0c2d.gif][]

## 组件支持多个v-model ##

在Vue3.x中支持在单个组件上可以创建多个v-model绑定。

**App.vue**

<template>
      {
        {title}}
      {
        {name}}
    
      <Input v-model:title="title" v-model:name="name"/>
    </template>
    
    <script>
    import Input from "./components/Input"
    export default {
      name: 'App',
      components: {
        Input,
      },
      data() {
        return {
          title: "蛙人",
          name: "www"
        }
      },
    }
    </script>

**Input.vue**

<template>
      <div class="Input">
          <input type="text" @input="first" :value="title">
          <input type="text" @input="last" :value="name">
      </div>
    </template>
    <script>
    export default {
     name: 'Input',
      props: {
        title: {
            default: () => "蛙人"
        },
        name: {
            default: () => "前端娱乐圈"
        }
      },
      methods: {
          first(e) {
              this.$emit("update:title", e.target.value)
          },
          last(e) {
              this.$emit("update:name", e.target.value)
          }
      }
    }
    </script>

**效果**

![a2c68eee87a72e8be8550fd54585fb81.gif][]

## Setup ##

`setup`函数是一个新的组件选项。作为在组件内使用`Composition Api`的入口点。下面我们分为4个方面来讲解它

*  调用时机
 *  this指向
 *  函数参数
 *  返回值

### 调用时机 ###

创建组件实例，然后初始化`props`，紧接着就调用`setup`函数。从生命周期的角度来看，它会在`beforeCreate`之前执行。也就是创建组件先执行`setup`、`beforeCreate`、`create`。

<template>
      <div>蛙人</div>
    </template>
    <script>
    export default {
      name: 'App',
      setup() {
        console.log("hey 蛙人")
      }
    }
    </script>

### this指向 ###

由于不能在`setup`函数中使用`data`、`methods`，为了避免使用`Vue`出错，所以把`setup`函数中`this`修改为了`undefined`。

<template>
      <div>蛙人</div>
    </template>
    <script>
    export default {
      name: 'App',
      setup() {
        console.log(this); // undefined
      }
    }
    </script>

### 函数参数 ###

*  props
 *  context

#### props ####

接收组件传递过来的所有数据，并且都是响应式的。

<template>
      <div>蛙人</div>
    </template>
    <script>
    export default {
      name: 'App',
      props: {
          title: {
              type: String
          }
      },
      setup(props) {
        console.log(props.title)
      }
    }
    </script>

> 注意一点，props数据不能使用解构，否则响应式数据失效

<template>
      <div>蛙人</div>
    </template>
    <script>
    export default {
      name: 'App',
      props: {
          title: {
              type: String
          }
      },
      setup({ title }) {
        console.log(title) // 这里响应式数据将失效
      }
    }
    </script>

#### context ####

该参数提供一个上下文对象，从原来的2.x中选择性的暴露了一些属性。

*  attrs
 *  slots
 *  emit

<template>
      <div>蛙人</div>
    </template>
    <script>
    export default {
      name: 'App',
      props: {
          title: {
              type: String
          }
      },
      setup(props, { attrs, slots, emit } ) {
        console.log(attrs) 
      }
    }
    </script>

上面，`attrs`和`slots`都是内部组件实例上对应项的代理，可以确保在更新后仍然还是最新的值。所以这里可以使用解构语法。

### 返回值 ###

可以将`setup`函数返回值渲染到页面上。但前提是，`setup`返回值必须是一个对象，否则返回其它值则渲染无效。

<template>
      <div>蛙人</div>
    </template>
    <script>
    export default {
      name: 'App',
      props: {
          title: {
              type: String
          }
      },
      setup() {
        const name = "蛙人"
        return {
           name
        }
      }
    }
    </script>

## Reactive ##

该方法接收一个参数`{}`创建一个响应式对象。跟Vue2.x的`Vue.observable`一样。如果该参数不是对象的话，也可以渲染到模板上，但不是响应式的数据。

<template>
      <div class="test">
        姓名:  {
        { name.value }}
        {
        { test() }}
      </div>
    </template>
    
    <script>
    import { reactive } from "vue"
    export default {
     name: 'test',
      data() {
        return {
    
        }
      },
      setup() {
        let name = reactive({value: "蛙人"})
        function test() {
            name.value = "abc"; // 该方法测试响应式数据，可以看到执行完该方法视图也会发生改变
        }
        return {
            name,
            test
        }
      }
    }
    </script>

## Ref ##

该方法接收一个参数，可以是单个值，也可以是一个对象，并且都是响应式的数据。当传入一个对象时`{}`，内部将调用`reactive`方法进行转换为响应式数据。返回值里面带有`.value`属性取值，当使用模板渲染的时候可省去`.value`。

<template>
      <div class="test">
        姓名:  {
        { name }}
        {
        { test() }}
      </div>
    </template>
    
    <script>
    import { ref } from "vue"
    export default {
     name: 'test',
      data() {
        return {
    
        }
      },
      setup() {
    
        let name = ref("蛙人")
        function test() {
            name.value = "abc"; // 只是渲染模板可以省略.value，但是在逻辑中还得写哦
        }
        return {
            name,
            test
        }
      }
    }
    </script>

## Computed ##

该方法可以传入一个函数，默认该函数就是`getter`，不管`getter`返回值为一个`ref`响应式数据还是一个`普通变量`，数据都是`只读`不能改变。

传入一个对象`set`和`get`函数方法，这样就可以修改啦

## Readonly ##

该方法接收传入一个对象，默认是只读功能，是深层对象只读，不管嵌套多少层的属性都是只读状态。

![b3698517f730021dd58b28f850aa5037.png][]

## WatchEffect ##

该方法接收一个函数并且立即执行，并当该函数里的变量变更时，重新执行该函数。该方法无法获取到原值，只能是改变之后的值。

> 如果要监听哪个值，需要在该函数里写出来，否则监听无效

import { ref, watchEffect } from "vue"
    export default {
     name: 'test',
      setup() {
        let name = ref("蛙人");
        let age = ref(23);
        watchEffect(() => {
            name.value; // 监听name
            age.value;  // 监听age
            
            console.log(name.value)
            console.log(age.value)
        })
        
        setTimeout(() => {
            name.value = "前端娱乐圈"
        }, 5000)
    
        setTimeout(() => {
            age.value = 18
        }, 1000)
      }
    }
    </script>

#### 取消监听 ####

有时候我们想在触发一定的条件后取消监听。这时可以执行`watchEffect`的返回值。

import { ref, watchEffect } from "vue"
    export default {
     name: 'test',
      setup() {
        let name = ref("蛙人");
        let age = ref(23);
        let stop = watchEffect(() => {
            name.value; // 监听name
            age.value;  // 监听age
            
            console.log(name.value)
            console.log(age.value)
        })
        
        setTimeout(() => {
            name.value = "前端娱乐圈"
        }, 5000)
    
        setTimeout(() => {
            age.value = 18;
            setTimeout(stop, 300)
        }, 1000)
      }
    }
    </script>

## Watch ##

`watch`等同于Vue2.x中的`this.$watch`，`watch`需要监听特定数据，默认情况是懒执行，也就是只有当数据发生变化时才执行第二个参数函数。

对比`WatchEffect` ，`Watch`允许我们

*  懒执行函数
 *  更明确哪些状态改变触发监听器
 *  可以监听获取到变化前后的值

### 监听单个值 ###

### 监听多个值 ###

监听多个值，返回的是一个数组对象。

## 生命周期系列 ##

在Vue3.X也可以在`setup`函数下使用生命周期，这些钩子函数写法跟之前的生命周期写法不同。

> 注意：这些生命周期写法只能在`setup`函数下使用，在其它地方使用则会报错。

**与Vue2.x版本生命周期相对应的组合式Api**

*  beforeCreate --> setup
 *  created --> setup
 *  beforeMount --> onBeforeMount
 *  mounted --> onMounted
 *  beforeUpdate --> onBeforeUpdate
 *  updated --> onUpdated
 *  beforeDestroy --> onBeforeUnmount
 *  destroyed --> onUnmount

下面我们来看一下这些钩子的写法。钩子函数里面是一个回调函数。

## Provide && Inject ##

该方法和Vue2.x的 `provide`、`inject`一样的。但是Vue3新特性这俩方法只能在`setup`中使用。

*  Provide：接收2个参数，第一个`key`值，第二个`value`值，进行传递
 *  Inject：接收2个参数，第一个是`provide`的`key`值，默认第二个参数可选，可以设置默认值(当找不到key值，设置一个默认值)

**App.vue**

**test.vue**

<template>
     {
        { NAME }}    
    </template>
    <script>
    import { inject } from "vue"
    export default {
     name: 'test',
      setup() {
        let NAME = inject("name")
        console.log(NAME) // 蛙人
          
        let title = inject("key", 123)
        console.log(title) // 这时就会触发默认值，因为这里找不到这个key值
          
        return {
            NAME
        }
      }
    }
    </script>

## Refs ##

该方法相当于Vue2.x的`refs`一样获取元素，那么在`setup`中配合使用`ref`对象进行获取

<template>
      <div class="test">
        <p ref="el">123</p>
      </div>
    </template>
    
    <script>
    import { ref, onMounted } from "vue"
    export default {
     name: 'test',
      setup() {
        let el = ref(null)
        onMounted(() => {
             console.log(el) // p标签元素
        })
        return {
            el
        }
        
      }
    }
    </script>

## isReadonly ##

用于检测该数据是不是可读数据。返回一个`Boolean`类型。

## isRef ##

用于检测该数据是不是ref响应式数据。返回一个`Boolean`类型。

## isReactive ##

用于检测该数据是不是`reacttive`响应式数据。返回一个`Boolean`类型。

## 移除过滤器filters ##

在Vue3.x中移除过滤器，不在支持。建议使用`computed`去替代。贴一个官网例子

<template>
      <h1>Bank Account Balance</h1>
      <p>{
        { accountInUSD }}</p>
    </template>
    
    <script>
      export default {
        props: {
          accountBalance: {
            type: Number,
            required: true
          }
        },
        computed: {
          accountInUSD() {
            return '$' + this.accountBalance
          }
        }
      }
    </script>

## 不再限制Template一个根节点 ##

Vue3.x中将不在限制模板中只有一个根节点，根组件可以任意多个元素。

## 自定义v-model修饰符 ##

Vue3.x中，添加了可以自定义修饰符，如Api提供的内置方法`.trim`，新特性我们也可以自定义啦。下面就来演示一下写一个转换字符串大写的修饰符。

**App.vue**

<template>
      <Input v-model:str.capitalize="modelModifiers"/>
    </template>
    <script>
    import Input from "./components/Input"
    export default {
      name: 'App',
      components: {
        Input
      }
    }
    </script>

**Input.vue**

<template>
      <div class="Input">
        <input type="text" @input="send">
      </div>
    </template>
    
    <script>
    export default {
     name: 'Input',
      props: {
          str: String,
          strModifiers: {
              default: () => ({})
          }
      },
      methods: {
          send(e) {
              let value = e.target.value
              if (this.strModifiers.capitalize) { // capitalize 这里的值就是修饰符
                value = value.toUpperCase()
                console.log(value)
              }
              this.$emit("update:str", value)
          }
      }
    }
    </script>

上面方法，必须传入`props`值，`Modifiers`必须写定义为一个空对象。

> 特别需要注意一点：如果你的`v-model`参数值为`str`，那么组件里面接收的值，全部为str开头，如：props里面的 strModifiers，str

**效果：**

![39657176db877234f3c9034de7e5179f.png][] ![411f55033be56f36fde5a2f624e38478.png][]

## 废弃on，off，once实例方法 ##

Vue3.x中 `$on`，`$off` 和 `$once` 实例方法已被移除，应用实例不再实现事件触发接口。

## 自定义指令更改 ##

在Vue3.x中自定义指定写法稍有更改，看下列。

*  bind --> beforeMount 指令绑定到元素后发生。只发生一次
 *  inserted --> mounted 元素插入到父DOM后发生
 *  beforeUpdate: Vue3.x新添加的，这是在元素更新之前调用，
 *  componentUpdated --> updated
 *  beforeUnmount : Vue3.x新添加的，将在卸载元素前调用
 *  unbind --> unmounted

**main.js**

import { createApp } from 'vue'
    import App from './App.vue'
    
    let main = createApp(App)
    main.directive("custom", {
        beforeMount(el, attr) {
            console.log(el, attr)
        },
        updated() {
            console.log("updated")
        },
        unmounted() {
            console.log("移除")
        }
    })
    main.mount('#app')

**App.vue**

<template>
      <p v-custom v-if="show"></p>
    </template>
    <script>
    export default {
      name: 'App',
      data() {
        return {
          show: true
        }
      },
      created() {
        setTimeout(() => {
          this.show = true;
        }, 5000)
          
        setTimeout(() => {
          this.show = false
        }, 3000)
      }
    }
    </script>

![45784559b9c36ddf5d217b4b838bf46c.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]

![6f006441fefd8a731f7e54e3b6713435.gif][]

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

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

[a8b60c028126364f397b57fec6ce0c2d.gif]: /images/20221022/0e57bbe2642b4b9d8492d3560d1e2e1b.png
[a2c68eee87a72e8be8550fd54585fb81.gif]: /images/20221022/b934224f1bae4eb8824ebdcc9487dd27.png
[b3698517f730021dd58b28f850aa5037.png]: /images/20221022/648b21ab1d90480f83e8032e3610480e.png
[39657176db877234f3c9034de7e5179f.png]: https://img-blog.csdnimg.cn/img_convert/39657176db877234f3c9034de7e5179f.png
[411f55033be56f36fde5a2f624e38478.png]: /images/20221022/7fd0a2e5586f4f1fbfe6496e2c5b9f1c.png
[45784559b9c36ddf5d217b4b838bf46c.gif]: /images/20221022/afbc01e6a49a4cdda20f936d94f7e91f.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
[6f006441fefd8a731f7e54e3b6713435.gif]: /images/20221022/200da33b7c054d9cbad53a0923f5c040.png