×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

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

[[394914]]

组件v-model支持参数

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

在霍邱等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、成都网站制作 网站设计制作定制网站,公司网站建设,企业网站建设,成都品牌网站建设,网络营销推广,外贸网站制作,霍邱网站建设费用合理。

App.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

Input.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

效果

组件支持多个v-model

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

App.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

Input.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

效果

 

Setupsetup

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

调用时机

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

this指向

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

函数参数props

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

context

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

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

返回值

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

Reactive

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

Ref

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

Computed

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

Readonly

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

WatchEffect

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

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

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

取消监听

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

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

Watch

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

对比WatchEffect ，Watch允许我们

监听单个值

 
 
 
 
    
  
  
  
  
  1.  
    2.

监听多个值

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

生命周期系列

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

Provide && Inject

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

App.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.

test.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

Refs

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

isReadonly

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

isRef

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

isReactive

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

移除过滤器filters

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

不再限制Template一个根节点

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

自定义v-model修饰符

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

App.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

Input.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

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

效果：

 

废弃on，off，once实例方法

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

自定义指令更改

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

main.js

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

App.vue

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

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

 


新闻名称：一文带你掌握Vue3新特性，再也不怕面试官啦
本文链接：http://cdbrznjsb.com/article/cdjhoei.html

其他资讯

让你的专属顾问为你服务