vue3组合式api(一)

1.setup语法糖

1.1 定义

Vue 3 中引入了一个新的 Composition API，其中包含了 setup 函数，用于替代 Vue 2 中的 data、methods 等选项。setup 函数提供了更灵活和可组合的方式来组织组件的逻辑，并且更加符合函数式编程的思想

它的执行比created还要早,在这里打印不了this,v3的项目几乎用不到this.setup是进入页面时自动触发而定一个函数

1.2 变量

  // vue2写法
  data () {
    return {
      vue2: 'vue2'
    }
  },
  // vue3写法
  setup () {
    const vue3 = 'vue3'
    return { vue3 }
  }

1.3方法

<template>
  <div class="home">
    <button @click="func.btnClickEvent">按钮</button>
  </div>
</template>

<script>
export default {
  setup () {
  //将func对象当成vue2中的methods
    const func = {
      btnClickEvent: () => {
        console.log(6666)
      }
    }
    return { func }
  }
}
</script>

2. ref 和 reactive

Vue 3 的响应式系统是基于 ES6 的 Proxy 对象来实现对象的响应式跟踪。
Proxy 对象:当调用 reactive 函数时，会创建一个 Proxy 对象，并传入目标对象（即我们传入的对象）和一个 handler 对象，用来定义 Proxy 的行为。

Handler 对象:在 handler 对象中，会定义一系列针对目标对象的拦截器 (handler traps)，用来捕捉并响应目标对象的各种操作，比如属性的获取、设置、删除等。当我们访问或修改响应式对象的属性时，Proxy 会捕捉这些操作，并通知 Vue 的响应式系统进行相应的处理。

依赖追踪:在访问响应式对象的属性时，Vue 会通过 Proxy 捕获这个操作，并将属性与当前的组件实例建立关联，从而建立属性与组件的依赖关系。当属性发生变化时，Vue 可以追踪到受影响的组件实例，并触发视图的更新。

反应性触发:当响应式对象的属性发生变化时，Proxy 会捕获这个变化，并通知相关的组件进行更新，确保视图与数据的同步。

2.1 ref

在 Vue 3 中，ref 是用来创建一个响应式数据的函数。通过 ref 函数创建的变量会自动进行数据绑定，当变量的值发生改变时，相关的视图会自动更新

<template>
  <div class="home">
    <h1>{{ name }}</h1>
    <h1>{{ obj.age }}</h1>
    <h1>{{ arr[0] }}</h1>
    <button @click="func.btnClickEvent">按钮</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const name = ref('基本类型')
    const obj = ref({
      age: '对象中的数据'
    })
    const arr = ref(['数组中的数据'])

    const func = {
      btnClickEvent: () => {
        name.value = '改变基本类型'
        obj.value.age = '改变对象中的数据'
        arr.value[0] = '改变数组中的数据'
      }
    }
    return { name, obj, func, arr }
  }
}
</script>

2.2.reactive

<template>
  <div class="home">
    <h1>{{ obj.a.b[0] }}</h1>
    <button @click="func.btnClickEvent">按钮</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup () {
    const obj = reactive({
      a: {
        b: ['嵌套数据']
      }
    })
    const func = {
      btnClickEvent: () => {
        obj.a.b[0] = '改变嵌套数据'
      }
    }
    return { func, obj }
  }
}
</script>

2.3ref 与 toRef

1.ref的本质是拷贝一份数据,脱离了与源数据的交互
2.ref函数将对象中的属性变成响应式数据,不会影响到源数据,但是会更新视图层
3.toRef的本质是引用,与原始数据有交互,修改响应式数据会影响到源数据,但是不会更新视图层

<template>
  <div class="home">
    <h1>{{ obj1.age}}</h1>
	<h1>{{ obj2.Age}}</h1>
	<h1>{{ obj.age}}</h1>
    <button @click="func.btnClickEvent">按钮</button>
  </div>
</template>

<script>
import { ref, toRef } from 'vue'

export default {
  setup () {
   	const obj = {
   	  age:10
   	}
   
    //因为obj中的变量直接在ref中定义的,不能称为源数据
    const obj1 = ref({
      age:10
    })
    
    const Age = 10
	const obj2 = ref({
      Age
    })
    
	const obj3 = toRef(obj ,'age')

    const func = {
      btnClickEvent: () => {
        obj1.value.age++
        //此时打印发现,视图在变化,obj1.value.age也在变化的
        console.log(obj1, 'obj1')
		
		obj2.value.Age++
		//此时打印发现,obj2.value.Age没有发生变化,但是视图发生了变化
		 console.log(obj2, 'obj2')
		 
		 obj3.value++
		//此时打印发现,obj.age发生变化,但是视图没有发生变化
		 console.log(obj , 'obj ')
      }
    }
    return { func, obj , obj1, obj2 ,obj3 }
  }
}
</script>>