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

5次阅读

共计 9706 个字符，预计需要花费 25 分钟才能阅读完成。

记录一下笔记，给各位小伙伴们分享一些罕用的 Vue3 新个性及哪些办法产生了变更。

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

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

成果

在 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函数是一个新的组件选项。作为在组件内应用 Composition Api 的入口点。上面咱们分为 4 个方面来解说它

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

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

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

因为不能在 setup 函数中应用 data、methods，为了防止应用Vue 出错，所以把 setup 函数中 this 批改为了undefined。

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

props
context

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

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

该参数提供一个上下文对象，从原来的 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>

该办法接管一个参数 {} 创立一个响应式对象。跟 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>

该办法接管一个参数，能够是单个值，也能够是一个对象，并且都是响应式的数据。当传入一个对象时 {}，外部将调用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>

该办法能够传入一个函数，默认该函数就是 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>

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

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

该办法接管一个函数并且立刻执行，并当该函数里的变量变更时，从新执行该函数。该办法无奈获取到原值，只能是扭转之后的值。

如果要监听哪个值，须要在该函数里写进去，否则监听有效

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等同于 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>

该办法和 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>

该办法相当于 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>

用于检测该数据是不是可读数据。返回一个 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>

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

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

用于检测该数据是不是 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>

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

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

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

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

成果：

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/

正文完

javascript

发表至： javascript

2021-04-19

0

关于javascript:js-formatDate-RegExp1-非标准化-使用RegExpexec代替

容易混淆-论query和params在前后端中的区别

关于javascript:手写自己的webpack插件『plugin』

fetch使用ajax替代方案

关于javascript:ES6Set和Map数据结构

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

前言

组件 v -model 反对参数

组件反对多个 v -model

Setup

调用机会

this 指向

函数参数

props

context

返回值

Reactive

Ref

Computed

Readonly

WatchEffect

勾销监听

Watch

监听单个值

监听多个值

生命周期系列

Provide && Inject

Refs

isReadonly

isRef

isReactive

移除过滤器 filters

不再限度 Template 一个根节点

自定义 v -model 修饰符

废除 on，off，once 实例办法

自定义指令更改

感激

往期好文

参考

站内搜索