一文带你掌握Vue3新特性,再也不怕面试官啦

时间:2022-05-24 16:31:01

一文带你掌握Vue3新特性,再也不怕面试官啦

组件v-model支持参数

 

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

App.vue

 

  1. <template> 
  2.   {{title}}  
  3.   <Input v-model:title="title" /> 
  4. </template> 
  5. <script> 
  6. import Input from "./components/Input" 
  7. export default { 
  8.   name'App'
  9.   components: { 
  10.     Input 
  11.   }, 
  12.   data() { 
  13.     return { 
  14.       title: "蛙人"
  15.     } 
  16.   }, 
  17. </script> 

Input.vue

 

  1. <template> 
  2.   <div class="Input"
  3.       <input type="text" @input="first" :value="title"
  4.   </div> 
  5. </template> 
  6. <script> 
  7. export default { 
  8.  name'Input'
  9.   props: { 
  10.     title: { 
  11.         default: () => "蛙人" 
  12.     } 
  13.   }, 
  14.   methods: { 
  15.       first(e) { 
  16.           this.$emit("update:title", e.target.value) 
  17.       }, 
  18.   }, 
  19. </script> 

效果

一文带你掌握Vue3新特性,再也不怕面试官啦

组件支持多个v-model

 

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

App.vue

 

  1. <template> 
  2.   {{title}} 
  3.   {{name}} 
  4.  
  5.   <Input v-model:title="title" v-model:name="name"/> 
  6. </template> 
  7.  
  8. <script> 
  9. import Input from "./components/Input" 
  10. export default { 
  11.   name'App'
  12.   components: { 
  13.     Input, 
  14.   }, 
  15.   data() { 
  16.     return { 
  17.       title: "蛙人"
  18.       name"www" 
  19.     } 
  20.   }, 
  21. </script> 

Input.vue

  1. <template> 
  2.   <div class="Input"
  3.       <input type="text" @input="first" :value="title"
  4.       <input type="text" @input="last" :value="name"
  5.   </div> 
  6. </template> 
  7. <script> 
  8. export default { 
  9.  name'Input'
  10.   props: { 
  11.     title: { 
  12.         default: () => "蛙人" 
  13.     }, 
  14.     name: { 
  15.         default: () => "前端娱乐圈" 
  16.     } 
  17.   }, 
  18.   methods: { 
  19.       first(e) { 
  20.           this.$emit("update:title", e.target.value) 
  21.       }, 
  22.       last(e) { 
  23.           this.$emit("update:name", e.target.value) 
  24.       } 
  25.   } 
  26. </script> 

效果

 一文带你掌握Vue3新特性,再也不怕面试官啦

Setupsetup

 

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

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

调用时机

 

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

  1. <template> 
  2.   <div>蛙人</div> 
  3. </template> 
  4. <script> 
  5. export default { 
  6.   name'App'
  7.   setup() { 
  8.     console.log("hey 蛙人"
  9.   } 
  10. </script> 

this指向

 

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

  1. <template> 
  2.   <div>蛙人</div> 
  3. </template> 
  4. <script> 
  5. export default { 
  6.   name'App'
  7.   setup() { 
  8.     console.log(this); // undefined 
  9.   } 
  10. </script> 

函数参数props

 

  • context
  • props

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

  1. <template> 
  2.   <div>蛙人</div> 
  3. </template> 
  4. <script> 
  5. export default { 
  6.   name'App'
  7.   props: { 
  8.       title: { 
  9.           type: String 
  10.       } 
  11.   }, 
  12.   setup(props) { 
  13.     console.log(props.title) 
  14.   } 
  15. </script> 

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

  1. <template> 
  2.   <div>蛙人</div> 
  3. </template> 
  4. <script> 
  5. export default { 
  6.   name'App'
  7.   props: { 
  8.       title: { 
  9.           type: String 
  10.       } 
  11.   }, 
  12.   setup({ title }) { 
  13.     console.log(title) // 这里响应式数据将失效 
  14.   } 
  15. </script> 

context

 

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

  • attrs
  • slots
  • emit
  1. <template> 
  2.   <div>蛙人</div> 
  3. </template> 
  4. <script> 
  5. export default { 
  6.   name'App'
  7.   props: { 
  8.       title: { 
  9.           type: String 
  10.       } 
  11.   }, 
  12.   setup(props, { attrs, slots, emit } ) { 
  13.     console.log(attrs)  
  14.   } 
  15. </script> 

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

返回值

 

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

  1. <template> 
  2.   <div>蛙人</div> 
  3. </template> 
  4. <script> 
  5. export default { 
  6.   name'App'
  7.   props: { 
  8.       title: { 
  9.           type: String 
  10.       } 
  11.   }, 
  12.   setup() { 
  13.     const name = "蛙人" 
  14.     return { 
  15.        name 
  16.     } 
  17.   } 
  18. </script> 

Reactive

 

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

  1. <template> 
  2.   <div class="test"
  3.     姓名:  {{ name.value }} 
  4.     {{ test() }} 
  5.   </div> 
  6. </template> 
  7.  
  8. <script> 
  9. import { reactive } from "vue" 
  10. export default { 
  11.  name'test'
  12.   data() { 
  13.     return { 
  14.  
  15.     } 
  16.   }, 
  17.   setup() { 
  18.     let name = reactive({value: "蛙人"}) 
  19.     function test() { 
  20.         name.value = "abc"; // 该方法测试响应式数据,可以看到执行完该方法视图也会发生改变 
  21.     } 
  22.     return { 
  23.         name
  24.         test 
  25.     } 
  26.   } 
  27. </script> 

Ref

 

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

  1. <template> 
  2.   <div class="test"
  3.     姓名:  {{ name }} 
  4.     {{ test() }} 
  5.   </div> 
  6. </template> 
  7.  
  8. <script> 
  9. import { ref } from "vue" 
  10. export default { 
  11.  name'test'
  12.   data() { 
  13.     return { 
  14.  
  15.     } 
  16.   }, 
  17.   setup() { 
  18.  
  19.     let name = ref("蛙人"
  20.     function test() { 
  21.         name.value = "abc"; // 只是渲染模板可以省略.value,但是在逻辑中还得写哦 
  22.     } 
  23.     return { 
  24.         name
  25.         test 
  26.     } 
  27.   } 
  28. </script> 

Computed

 

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

  1. <script> 
  2. import { ref, computed } from "vue" 
  3. export default { 
  4.  name'test'
  5.  setup() { 
  6.     let name = ref("蛙人"
  7.     let test = computed(() => name.value); 
  8.     test.value = "123" // 修改无效,只能只读 
  9.   } 
  10. </script> 

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

  1. <script> 
  2. import { ref, computed } from "vue" 
  3. export default { 
  4.  name'test'
  5.  setup() { 
  6.     let name = ref("蛙人"
  7.     let test = computed({ 
  8.         get() { 
  9.             return name.value; 
  10.         }, 
  11.         set(val) { 
  12.             return name.value = val; 
  13.         } 
  14.     }); 
  15.     test.value = "123"  
  16.   } 
  17. </script> 

Readonly

 

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

  1. <script> 
  2. import { readonly } from "vue" 
  3. export default { 
  4.  name'test'
  5.   setup() { 
  6.     let obj = { 
  7.         name"蛙人"
  8.         sex: "male"
  9.         prodution: { 
  10.             proName: "音响" 
  11.         } 
  12.     } 
  13.     let only = readonly(obj) 
  14.     only.name = "前端娱乐圈" // 修改无效 
  15.     only.prodution.proName = "欢迎关注" // 修改无效 
  16.     console.log(only)  
  17.   } 
  18. </script> 

一文带你掌握Vue3新特性,再也不怕面试官啦

WatchEffect

 

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

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

  1. import { ref, watchEffect } from "vue" 
  2. export default { 
  3.  name'test'
  4.   setup() { 
  5.     let name = ref("蛙人"); 
  6.     let age = ref(23); 
  7.     watchEffect(() => { 
  8.         name.value; // 监听name 
  9.         age.value;  // 监听age 
  10.          
  11.         console.log(name.value) 
  12.         console.log(age.value) 
  13.     }) 
  14.      
  15.     setTimeout(() => { 
  16.         name.value = "前端娱乐圈" 
  17.     }, 5000) 
  18.  
  19.     setTimeout(() => { 
  20.         age.value = 18 
  21.     }, 1000) 
  22.   } 
  23. </script> 

取消监听

 

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

  1. import { ref, watchEffect } from "vue" 
  2. export default { 
  3.  name'test'
  4.   setup() { 
  5.     let name = ref("蛙人"); 
  6.     let age = ref(23); 
  7.     let stop = watchEffect(() => { 
  8.         name.value; // 监听name 
  9.         age.value;  // 监听age 
  10.          
  11.         console.log(name.value) 
  12.         console.log(age.value) 
  13.     }) 
  14.      
  15.     setTimeout(() => { 
  16.         name.value = "前端娱乐圈" 
  17.     }, 5000) 
  18.  
  19.     setTimeout(() => { 
  20.         age.value = 18; 
  21.         setTimeout(stop, 300) 
  22.     }, 1000) 
  23.   } 
  24. </script> 

Watch

 

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

对比WatchEffect ,Watch允许我们

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

监听单个值

 

  1. <script> 
  2. import { ref, watch } from "vue" 
  3. export default { 
  4.  name'test'
  5.   setup() { 
  6.     let name = ref("蛙人"); 
  7.  
  8.     watch(name, (newVal, oldVal) => { 
  9.         console.log(newVal, oldVal) // 前端娱乐圈, 蛙人 
  10.     }) 
  11.  
  12.     setTimeout(() => { 
  13.         name.value = "前端娱乐圈" 
  14.     }, 1000) 
  15.  
  16.   } 
  17. </script> 

监听多个值

 

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

  1. <script> 
  2. import { ref, watch } from "vue" 
  3. export default { 
  4.  name'test'
  5.   setup() { 
  6.     let name = ref("蛙人"); 
  7.     let age = ref(23); 
  8.  
  9.     watch([name, age], (newVal, oldVal) => { 
  10.         console.log(newVal, oldVal) // ["前端娱乐圈", 18], ["蛙人", 23] 
  11.     }) 
  12.      
  13.     setTimeout(() => { 
  14.         name.value = "前端娱乐圈" 
  15.         age.value = 18 
  16.     }, 1000) 
  17.  
  18.   } 
  19. </script> 

生命周期系列

 

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

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

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

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

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

  1. <script> 
  2. import { onMounted, onUpdated, onUnmounted } from "vue" 
  3. export default { 
  4.  name'test'
  5.   setup() { 
  6.      
  7.     onMounted(() => { 
  8.       console.log('mounted!'
  9.     }) 
  10.     onUpdated(() => { 
  11.       console.log('updated!'
  12.     }) 
  13.     onUnmounted(() => { 
  14.       console.log('unmounted!'
  15.     }) 
  16.      
  17.   } 
  18. </script> 

Provide && Inject

 

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

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

App.vue

 

  1. <script> 
  2. import test from "./components/test" 
  3. import { provide, ref } from "vue" 
  4. export default { 
  5.   name'App'
  6.   components: { 
  7.     test 
  8.   }, 
  9.   setup() { 
  10.     let name = ref("蛙人"
  11.     provide("name"name) // 传入一个响应式数据 
  12.   }, 
  13. </script> 

test.vue

 

  1. <template> 
  2.  {{ NAME }}     
  3. </template> 
  4. <script> 
  5. import { inject } from "vue" 
  6. export default { 
  7.  name'test'
  8.   setup() { 
  9.     let NAME = inject("name"
  10.     console.log(NAME) // 蛙人 
  11.        
  12.     let title = inject("key", 123) 
  13.     console.log(title) // 这时就会触发默认值,因为这里找不到这个key值 
  14.        
  15.     return { 
  16.         NAME 
  17.     } 
  18.   } 
  19. </script> 

Refs

 

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

  1. <template> 
  2.   <div class="test"
  3.     <p ref="el">123</p> 
  4.   </div> 
  5. </template> 
  6.  
  7. <script> 
  8. import { ref, onMounted } from "vue" 
  9. export default { 
  10.  name'test'
  11.   setup() { 
  12.     let el = ref(null
  13.     onMounted(() => { 
  14.          console.log(el) // p标签元素 
  15.     }) 
  16.     return { 
  17.         el 
  18.     } 
  19.      
  20.   } 
  21. </script> 

isReadonly

 

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

  1. <script> 
  2. import { isReadonly, readonly} from "vue" 
  3. export default { 
  4.  name'test'
  5.   setup() { 
  6.     let test = readonly({name"蛙人"}) 
  7.     console.log(isReadonly(test)) // true 
  8.        
  9.     let test2 = readonly("蛙人"
  10.     console.log(isReadonly(test2)) // false, 这不是一个只读数据 
  11.   } 
  12. </script> 

isRef

 

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

  1. <script> 
  2. import { isRef, ref } from "vue" 
  3. export default { 
  4.  name'test'
  5.   setup() { 
  6.     let test = ref("公众号:前端娱乐圈"
  7.     console.log(isRef(test)) // true 
  8.   } 
  9. </script> 

isReactive

 

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

  1. <script> 
  2. import { isReactive, reactive } from "vue" 
  3. export default { 
  4.  name'test'
  5.   setup() { 
  6.     let test = reactive({name"蛙人"}) 
  7.     console.log(isReactive(test)) // true 
  8.        
  9.     let test2 = reactive("蛙人"
  10.     console.log(isReactive(test2)) // false, 这不是一个响应式数据 
  11.   } 
  12. </script> 

移除过滤器filters

 

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

  1. <template> 
  2.   <h1>Bank Account Balance</h1> 
  3.   <p>{{ accountInUSD }}</p> 
  4. </template> 
  5.  
  6. <script> 
  7.   export default { 
  8.     props: { 
  9.       accountBalance: { 
  10.         type: Number, 
  11.         required: true 
  12.       } 
  13.     }, 
  14.     computed: { 
  15.       accountInUSD() { 
  16.         return '$' + this.accountBalance 
  17.       } 
  18.     } 
  19.   } 
  20. </script> 

不再限制Template一个根节点

 

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

  1. <template> 
  2.     <div>首页</div> 
  3.     <div>新闻</div> 
  4. </template> 

自定义v-model修饰符

 

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

App.vue

 

  1. <template> 
  2.   <Input v-model:str.capitalize="modelModifiers"/> 
  3. </template> 
  4. <script> 
  5. import Input from "./components/Input" 
  6. export default { 
  7.   name'App'
  8.   components: { 
  9.     Input 
  10.   } 
  11. </script> 

Input.vue

 

  1. <template> 
  2.   <div class="Input"
  3.     <input type="text" @input="send"
  4.   </div> 
  5. </template> 
  6.  
  7. <script> 
  8. export default { 
  9.  name'Input'
  10.   props: { 
  11.       str: String, 
  12.       strModifiers: { 
  13.           default: () => ({}) 
  14.       } 
  15.   }, 
  16.   methods: { 
  17.       send(e) { 
  18.           let value = e.target.value 
  19.           if (this.strModifiers.capitalize) { // capitalize 这里的值就是修饰符 
  20.             value = value.toUpperCase() 
  21.             console.log(value) 
  22.           } 
  23.           this.$emit("update:str", value) 
  24.       } 
  25.   } 
  26. </script> 

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

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

效果:

 一文带你掌握Vue3新特性,再也不怕面试官啦

废弃on,off,once实例方法

 

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

  1. <script> 
  2.  created() { 
  3.         console.log(this.$on, this.$once, this.$off) // undefined undefined undefined 
  4.  } 
  5. </script> 

自定义指令更改

 

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

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

main.js

 

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3.  
  4. let main = createApp(App) 
  5. main.directive("custom", { 
  6.     beforeMount(el, attr) { 
  7.         console.log(el, attr) 
  8.     }, 
  9.     updated() { 
  10.         console.log("updated"
  11.     }, 
  12.     unmounted() { 
  13.         console.log("移除"
  14.     } 
  15. }) 
  16. main.mount('#app'

App.vue

 

  1. <template> 
  2.   <p v-custom v-if="show"></p> 
  3. </template> 
  4. <script> 
  5. export default { 
  6.   name'App'
  7.   data() { 
  8.     return { 
  9.       show: true 
  10.     } 
  11.   }, 
  12.   created() { 
  13.     setTimeout(() => { 
  14.       this.show = true
  15.     }, 5000) 
  16.        
  17.     setTimeout(() => { 
  18.       this.show = false 
  19.     }, 3000) 
  20.   } 
  21. </script> 

感谢谢谢你读完本篇文章,希望对你能有所帮助.

原文地址:https://mp.weixin.qq.com/s/WmOVTXt2z0XmPzayRO-bgg