vue3 - setup & ref

vue3 一步一个脚印

一.setup (composition API)

1. 所有生命周期钩子函数之前调用
2. 其中的this->undefined
3. 会返回东西,返回的东西会被附着在组件实例中 return {}

export default {
    setup () {
        // 不具有响应式,它只是一个单纯的变量,无法同步到vue实例中
        let count = 0;
        const increase = () => {
            count ++
        }
        return {
            count,
            increase
        }
    }
}

• 在此引入 ref ,可以使变量响应式改变,再return

<template>
  <p>
    <button @click="count++">{{ count }}</button>
  </p>
</template>
import {ref} from 'vue'
export default {
    setup () {
        // 不具有响应式,它只是一个单纯的变量,无法同步到vue实例中
        let count = ref(0);
        console.log(count)
        return {
            count,
        }
    }
}

• 以下为console.log(count)

{
    "_shallow": false,
    "__v_isRef": true,
    "_rawValue": 0,
    "_value": 0,
    value: 0
}

模板访问的count,是通过组件代理对象 -> 访问了count.value中的值

setup中,count是一个对象,实例代理中,count是一个count.value

• 通过解构 ...fun()来执行

import {ref} from "vue"
function fun() {
  const data = ref(0)
  const increase = () => {
    data.value++;
  }
  const decrease = () => {
    data.value--;
  }
  return {
    data,
    increase,
    decrease
  }
}
​
export default {
  setup() {
    return {
      ...fun()
    }
  }
}

总结:

1. template模板语言可以有多个根标签(vue2只能有一个div根标签)
2. 响应式数据可以通过ref来定义,读取数据时是通过代理 data.value来返回
3. ref可以在setup外部进行使用,以及函数也可以在外部进行定义并在setup内部进行return return { ...fun() } (解构)