关于javascript:一文带你掌握Vue3新特性再也不怕面试官啦

前言

记录一下笔记，给各位小伙伴们分享一些罕用的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>

成果

组件反对多个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>

成果

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响应式数据还是一个一般变量，数据都是只读不能扭转。

<script>import { ref, computed } from "vue"export default { name: 'test', setup() {    let name = ref("蛙人")    let test = computed(() => name.value);    test.value = "123" // 批改有效，只能只读  }}</script>

传入一个对象set和get函数办法，这样就能够批改啦

<script>import { ref, computed } from "vue"export default { name: 'test', setup() {    let name = ref("蛙人")    let test = computed({        get() {            return name.value;        },        set(val) {            return name.value = val;        }    });    test.value = "123"   }}</script>

Readonly

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

<script>import { readonly } from "vue"export default { name: 'test',  setup() {    let obj = {        name: "蛙人",        sex: "male",        prodution: {            proName: "音响"        }    }    let only = readonly(obj)    only.name = "前端娱乐圈" // 批改有效    only.prodution.proName = "欢送关注" // 批改有效    console.log(only)   }}</script>

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容许咱们

懒执行函数
更明确哪些状态扭转触发监听器
能够监听获取到变动前后的值

监听单个值

<script>import { ref, watch } from "vue"export default { name: 'test',  setup() {    let name = ref("蛙人");    watch(name, (newVal, oldVal) => {        console.log(newVal, oldVal) // 前端娱乐圈， 蛙人    })    setTimeout(() => {        name.value = "前端娱乐圈"    }, 1000)  }}</script>

监听多个值

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

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

生命周期系列

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

留神：这些生命周期写法只能在setup函数下应用，在其它中央应用则会报错。

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

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

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

<script>import { onMounted, onUpdated, onUnmounted } from "vue"export default { name: 'test',  setup() {        onMounted(() => {      console.log('mounted!')    })    onUpdated(() => {      console.log('updated!')    })    onUnmounted(() => {      console.log('unmounted!')    })      }}</script>

Provide && Inject

该办法和Vue2.x的 provide、inject一样的。然而Vue3新个性这俩办法只能在setup中应用。

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

App.vue

<script>import test from "./components/test"import { provide, ref } from "vue"export default {  name: 'App',  components: {    test  },  setup() {    let name = ref("蛙人")    provide("name", name) // 传入一个响应式数据  },}</script>

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类型。

<script>import { isReadonly, readonly} from "vue"export default { name: 'test',  setup() {    let test = readonly({name: "蛙人"})    console.log(isReadonly(test)) // true          let test2 = readonly("蛙人")    console.log(isReadonly(test2)) // false， 这不是一个只读数据  }}</script>

isRef

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

<script>import { isRef, ref } from "vue"export default { name: 'test',  setup() {    let test = ref("公众号：前端娱乐圈")    console.log(isRef(test)) // true  }}</script>

isReactive

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

<script>import { isReactive, reactive } from "vue"export default { name: 'test',  setup() {    let test = reactive({name: "蛙人"})    console.log(isReactive(test)) // true          let test2 = reactive("蛙人")    console.log(isReactive(test2)) // false, 这不是一个响应式数据  }}</script>

移除过滤器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中将不在限度模板中只有一个根节点，根组件能够任意多个元素。

<template>    <div>首页</div>    <div>新闻</div></template>

自定义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

成果：

废除on，off，once实例办法

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

<script>    created() {        console.log(this.$on, this.$once, this.$off) // undefined undefined undefined    }</script>

自定义指令更改

在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>

感激

谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。

我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够退出前端娱乐圈交换群欢送大家一起来交换探讨

写作不易，「点赞」+「在看」+「转发」 谢谢反对❤

往期好文

《聊聊在Vue我的项目中应用Decorator装璜器》

《分享15个Webpack实用的插件！！！》

《手把手教你写一个Vue组件公布到npm且可外链引入应用》

《分享12个Webpack中罕用的Loader》

《聊聊什么是CommonJs和Es Module及它们的区别》

《这些工作中用到的JavaScript小技巧你都晓得吗？》

《【倡议珍藏】分享一些工作中罕用的Git命令及非凡问题场景怎么解决》

参考

https://v3.cn.vuejs.org/