setup

之前已经了解过了setup,是composition-api用来返回数据的,他可以接收两个参数setup(props, context),第一个参数是Vue2中的props,第二个参数是一个上下文对象,可以调用Vue2中的this上的方法(setup中访问不到this)

响应式数据

基础数据使用ref,引用类型使用reactive获得响应式,上一篇已经说过了,本篇不再赘述

说一下之前没有提到的几个API

unref

如果参数是ref产生的响应式数据,返回这个参数的.value,如果不是返回这个参数本身

isRef

检查参数是否是ref对象

toRef

将reactive创建的响应式对象的某个属性拿出来,赋值给一个变量,效果类似于ref创建了一个响应式数据

比如

let data = reactive({
  name: "张三",
  age: 13,
});

let ageRef = toRef(data, "age");
// ageRef.value和data.age访问的是同一属性,改变他们的值都会互相影响

如果 const dom = ref(null),那么变量dom将会是一个DOM元素的引用(onMounted之后才可以获取),dom.value = document

计算属性

类似于Vue2的计算属性,composition-api中传入一个函数获得一个制度的计算属性

let count = ref(1)

const countPro = computed(() => {
  return 'count:' + count.value
})

{{countPro}} // count:1

image-20200918202844086

传入get和set方法获得一个可读可写的计算属性

let  count = ref(1)

const countPro = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

countPro.value = 1
console.log(count.value) // 0

监听器

监听ref类型数据

let count = ref(1);

watch(count, (count, prevCount) => {
  console.log('new:'+count);
  console.log('old:'+prevCount);
});

ref类型数据watch方法接收两个参数,第一个参数是要监听的数据;第二个参数是一个函数,这个函数有两个参数,第一个参数是新的值,第二个参数是旧的值

image-20200918210658809

监听多个数据源

watch([count1,count2],
  ([count1, count2], [prevCount1, prevCount2]) => {
    console.log(count1);
    console.log(count2);
    console.log('---------');
    console.log(prevCount1);
    console.log(prevCount2);
})

监听reactive类型数据

let data = reactive({
  name: "张三",
  age: 13,
});

watch(() => data.age, (age, prevAge) => {
  console.log("new:" + age);
  console.log("old:" + prevAge);
})

reactive类型数据watch方法第一个参数是一个箭头函数,返回reactive响应对象监听的对象

监听多个数据源

watch([
  () => data.name,
  () => data.age],
  ([name, age], [prevName, prevAge]) => {
    console.log(name);
    console.log(age);
    console.log('---------');
    console.log(prevName);
    console.log(prevAge);
})

image-20200918212659375

清除监视

调用watch的返回值可以清除监视器

// 注册监听器
const stop = watch(xx, (xx. prevxx) => {
  /** XXXX*/
})
// 取消监听
stop()

生命周期钩子

新版的生命周期只能在setup()函数中使用,变化是将beforeCreatecreated合并为setup,其他的生命周期前面加上on,使用方法:向函数内部传箭头函数

vue3-lifehooks

provide/inject

可以不限层级传递数据,同Vue2中一样,composition-api中使用方法如下(只能在setup函数中使用)

// 父组件
provide('数据key', '数据value') // value可以是ref数据
// 子组件
const getData = inject('数据key')

前端小白