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()函数中使用，变化是将beforeCreate和created合并为setup，其他的生命周期前面加上on，使用方法：向函数内部传箭头函数

vue3-lifehooks

provide/inject

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

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

前端小白