Vue3复习和总结----组合式API-setup，终

Vue3复习和总结----组合式API-setup

代码全部放在->github仓库：https://github.com/zyugat/vue-review-all

详细文档可查看：zyugat.cn

前言：分为base、Component、router、Vuex、组合式API。5个部分。

base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli

组合式API-setup

将界面中重复的部分连同功能都提取为可重用的代码段

在 setup 中你应该避免使用 this，因为它不会找到组件实例。

setup在beforeCreate之前执行一次，this是undefined。

setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

data、methos、computed…）当与setup某个属性重名时，setup优先。

setup内部无法通过this获取值，所以只能在参数传入props，不然setup内部无法获取外面传来的值

1、setup简单使用

• 返回值：
  • 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
  • 若返回一个渲染函数：则可以自定义渲染内容。（了解）

返回值是一个 promise 。

setup(){
   
  let name = '张三'
  let age = 18

  // 方法
  function sayHello() {
   
    alert(`Hello`)
  }

  // 返回一个对象（常用）
  return {
   
    name,
    age,
    sayHello,
  }
  // 返回一个函数（渲染函数）
  // return ()=> h('h1','setup')
}

2、setup的参数

setup：选项是一个接收 props 和 context 的函数。

• props：对象，包含组件外部传递过来的数据，以及内部声明接收的属性。
• context：上下文对象
  • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  • slots: 收到的插槽内容, 相当于 this.$slots。
  • emit: 分发自定义事件的函数, 相当于 this.$emit。

emit

当在setup中使用emit时，需先在子组件中声明。

emits:['hello']

定义响应式的数据

1、ref

作用: 定义一个响应式的数据

• 语法: const xxx = ref(initValue)

  • 如果要操作数据需要：.value。读取数据就不需要。

  • 因为接收参数并将其包裹在一个带有 value property 的对象中返回。

  • ref通过Object.defineProperty()的get与set实现响应式。也可以定义对象和数组，但会自动通过reactive转为Proxy对象。

import {
    ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

2、toRef

解构，将响应式对象中的某个属性单独提供给外部使用。

toRef(Object, attribute)

toRefs(Object)：处理一个对象的多个属性。

setup(){
   
  //数据
  let person = reactive({
   
    name:'张三',
    age:18,
    job:{
   
      j1:{
   
        salary:20
      }
    }
  })
  // const name2 = toRef(person,'name')
  const x = toRefs(person)
  return {
   
    person,
    // salary:toRef(person.job.j1,'salary'),
    ...toRefs(person)