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>>
