Vue3新特性

时间 2021-08-13

标签前端 vue node react api 数组 ide 函数 this 代理栏目 React 繁體版

原文原文链接

一文带你掌握Vue3新特性

前言

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

写法采用vue3.x，固然目前vue3 版本时支持vue2.x的写法的vue

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

Setup

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

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

调用时机

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

蛙人

this指向

因为不能在setup函数中使用data、methods，为了不使用Vue出错，因此把setup函数中this修改成了undefined。数组

蛙人

函数参数

props
context

props

接收组件传递过来的全部数据，而且都是响应式的。ide

蛙人

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

蛙人

context

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

attrs
slots
emit

蛙人

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

返回值

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

蛙人

Reactive

该方法接收一个参数{}建立一个响应式对象。跟Vue2.x的Vue.observable同样。若是该参数不是对象的话，也能够渲染到模板上，但不是响应式的数据。

姓名:  {{ name.value }}
    {{ test() }}

Ref

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

姓名:  {{ name }}
    {{ test() }}

Computed

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

 name.value);
    test.value = "123" // 修改无效，只能只读
  }
}" _ue_custom_node_="true">

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

Readonly

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

组件v-model支持参数

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

App.vue

{{title}}

Input.vue

 "蛙人"
    }
  },
  setup(props,context) {
      function first(e) {
          context.$emit("update:title", e.target.value)
      },
      return {
          first
      }
  }      
}" _ue_custom_node_="true">

效果

组件支持多个v-model

在Vue3.x中支持在单个组件上能够建立多个v-model绑定。

App.vue

{{title}}
  {{name}}

Input.vue

 "蛙人"
    },
    name: {
        default: () => "前端娱乐圈"
    }
  },
  setup(props,context) {
      function first(e) {
          context.$emit("update:title", e.target.value)
      },
      function last(e) {
          this.$emit("update:name", e.target.value)
      }
      return {
          first,
          last
      }
  }      
}" _ue_custom_node_="true">

效果

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

取消监听

有时候咱们想在触发必定的条件后取消监听。这时能够执行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)
  }
}

Watch

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

对比WatchEffect ，Watch容许咱们

懒执行函数
更明确哪些状态改变触发监听器
能够监听获取到变化先后的值

监听单个值

 {
        console.log(newVal, oldVal) // 前端娱乐圈， 蛙人
    })

    setTimeout(() => {
        name.value = "前端娱乐圈"
    }, 1000)

  }
}" _ue_custom_node_="true">

监听多个值

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

 {
        console.log(newVal, oldVal) // ["前端娱乐圈", 18], ["蛙人", 23]
    })
    
    setTimeout(() => {
        name.value = "前端娱乐圈"
        age.value = 18
    }, 1000)

  }
}" _ue_custom_node_="true">

生命周期系列

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

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

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

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

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

 {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
    
  }
}" _ue_custom_node_="true">

Provide && Inject

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

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

App.vue

test.vue

	{{ NAME }}

Refs

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

123 {
         console.log(el) // p标签元素
    })
    return {
        el
    }
    
  }
}" _ue_custom_node_="true">

isReadonly

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

isRef

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

isReactive

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

移除过滤器filters

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

Bank Account Balance{{ accountInUSD }}

再也不限制Template一个根节点

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

首页新闻

自定义v-model修饰符

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

App.vue

Input.vue

 ({})
      }
  },
      
  methods: {
      send(e) {
          let value = e.target.value
          if (this.strModifiers.capitalize) { // capitalize 这里的值就是修饰符
            value = value.toUpperCase()
            console.log(value)
          }
          this.$emit("update:str", value)
      }
  }
}" _ue_custom_node_="true">

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

特别须要注意一点：若是你的v-model参数值为str，那么组件里面接收的值，所有为str开头，如：props里面的 strModifiers，str

效果：

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